[android] view 를 최적화시켜보자 ( Hierarchy Viwer & Pixel Perfect )

안드로이드, View 를 최적화시켜보자 ( Hierarchy Viewer & Pixel Perfect )

출처 : http://developer.android.com/tools/debugging/debugging-ui.html

Optimizing Your UI ( UI 최적화하기 )

layout 때문에 앱이 느려질 수 있다.

layout 에 관련된 debug 는 Hierarchy Viewer 와 lint tools 를 통해 할 수 있다.

Hierarchy Viewer 는 layout 의 계층도를 보여주며, 각 node 가 얼마나 성능을 내는가를 볼 수 있다.

그리고 Pixel Perfect window 를 통해 확대해 볼 수도 있다.

lint 는 static code scanning tool 로 일반적으로 발생하는 coding problem 을 잡아준다.

layout file 이나 다른 resource directory 에서 손쉽게 문제를 찾아 성능이슈를 해결할 수 있다.

Hierarchy Viewer 사용하기

시큐리티 이슈가 있어서, Hierarchy Viewer 는 오직 developer 모드로 빌드된 단말에서만 작동한다.

독자 : 뭐야 말짱 황이자나? 

필자 : 아니다. (느리지만, 답답하지만) 에뮬레이터로 하면 된다.

1. 앱을 실행시키고 terminal 에서 hierarchyviewer 를 입력하여 실행시킨다.

  위치는 <sdk>/tools/ 에 있다.

2. 처음 보는 화면은 device 의 종류이다.

  그곳에서 트리를 따라가면서 hierarchy 를 보고 싶은 activity 를 찾아들어간다.

3. 그곳에서 view hierarchy 를 볼 수 있고, pixel perfect window 를 이용하여 뷰를 확대할수도 있다.

View Hierarchy Window

VIew object 는 rendering performance data 도 가지고 있다.

4개의 패널이 있다.

1. Tree View

왼쪽에 위치해있으며, view hierarchy 를 tree 형태로 보여준다.

패널을 zoom 하기 위해서는 패널 아래쪽 slider 를 이용할 수 있고, 마우스 휠을 이용해도 된다.

패널내에서 이동을 하고 싶으면 마우스 클릭 후 드래그 하면 된다.

특정노드를 찾아 highlight 하고 싶으면 "Filter by class or id:" 란에 filter text 를 입력하면 된다.

매칭되는 노드는 갈색에서 밝은 푸른색으로 변형된다.

TreeView 의 screenshot 을 "Save AS PNG" 를 통해 저장할 수도 있다.

"Capture Layers" 를 통하면 Adobe Photoshop ( PSD ) 로도 저장할 수 있다. 이 경우 모든 view 가 layer 로 구분되어 저장된다.

( 호! 좋은데? )

2. Tree Overview

우상단에 위치해있으며, 전체 트리의 현재 포지션 등을 간단하게 보여준다.

드래그나 클릭을 통해 쉽게 위치를 이동할 수 있다.

3. Properties View

우측 중단에 위치해있으며, 선택된 view 의 속성들을 보여준다.

4. LayoutView

우하단에 위치해있으며, UI 를 블락 형태로 보여준다.

여기서 View object 를 클릭함으로서 tree view 에 selection 을 할 수 도 있다.

반대로 tree view 에서 click 하여 highlight 하면 마찬가지로 layoutview 에서도 highlight 된다.

layoutview 에서는 색깔로 추가정보를 알려준다.

굵은 빨간색 : 해당 view 가 tree view 에서 선택되었다.

엷은 빨간색 : 굵은 빨간색으로 표시된 녀석의 parent

흰색 : 선택된 view 와 별 상관이 없는 layout 들.

실제 Activity 에서 어떤 operation 을 해서 뷰를 변화시킨다고 해서

view hierarchy 가 바로 변화되지 않는다.

변화를 반영시키기 위해서는 상단의 "Load View Hierarchy"를 클릭해주어야 한다.

Activity 가 전환되도 마찬가지이다.

Activity 가 전환된 경우는 새로 뜬 activity selection 을 다시 해주고,

"Load View Hierarchy" 를 클릭해주어야 한다.

Working with an individual View in Tree View

각각의 View 를 통해서 우리는 여러가지 정보를 얻을 수 있는데 그 중에서 눈여겨 보아야 할 것은

performance indicators

3개의 색상이 rendering speed 를 보여준다. ( 다른 뷰와 비교한 상대값이다. )

왼쪽부터 점들은 각각 다음과 같은 의미를 갖는다.

measure, layout, draw time.

색깔의 의미는 다음과 같다.

초록색 : 모든 view tree object 50% 보다 더 빠르다.

노란색 : 모든 view tree object 50% 보다 더 느리다.

빨간색 : view tree 에서 가장 느린 녀석이다.

그리고 view 를 클릭하면 실제 render time 정보도 볼 수 있다.

Debugging with View Hierarchy

View 를 하나 선택한다.

다시 그리고 싶은 view 에서 "invalidate" 를 클릭한다.

"Request Layout" 을 통해 layout 을 다시 시킬수도 있다.

Optimizing with View Hierarchy

느린 render performance 를 볼 수 있어서 optimization 에 도움이 될 수 있다.

red, yellow 로 표시된 녀석들은 느린 녀석들이라 주목해 볼 필요가 있다.

특정 상황에서만 느린 것인지, 지속적으로 느린것인지 판단하여

지속적으로 느린 경우에는 개선이 필요하다.

참고로 ViewGroup 의 경우는 느린 performance 는 용납할만하다.

더 많은 자식을 가질수록 render 는 더 느려지기 마련이니깐.

Using Pixel Perfect

Pixel Perfect window 는 확대된 이미지를 볼 수 있다.

Pixel Perfect 를 이용하면 bitmap layout 파일을 이용해서 layout 을 잡는 경우

pixel 단위로 정교하게 맞추도록 도와주는 작업도 할 수 있다.

Pixel Perfect 는 Hierarchy Viewer 를 통해 실행할 수 있다.

Hierarchy Viewer 에서 상단의 "Inspect Screenshot" 을 클릭한다. 그럼 pixel perfect 가 실행된다.

세 가지 패널이 있다.

1. View Object Pane

현재 보여지는 view 의 hierarchy list.

그곳에서 개별 view 를 선택할 수 있다.

2. Pixel Perfect Loupe(확대경) Pane

확대된 이미지를 보여준다. grid 위에 존재하며, 그리드의 한 칸은 한 pixel 을 의미한다.

줌 슬라이더나 마우스 휠을 통해서 줌을 조정할 수 있다.

픽셀 하나를 클릭함으로서 같은 color 로 칠해진 곳,

HTML color code ( hexa RGB ), 그리고 RGB value ( 0~255 range ), x y coordinate 를 알 수 있다.

3. Pixel Perfect Pane

현재 보여지는 화면 전체를 보여준다.

청록색 십자가를 움직이면 확대경 pane 에서의 위치도 바뀐다.

선택된 object 는 굵은 빨간색으로 표시되고, 형제뷰나 부모뷰는 엷은 빨간색으로 표시된다.

그리고 나머지는 하얀색으로.

layout box 의 안쪽 흰색이나 검은색 사각형은 padding 을 의미한다.

바깥쪽 흰색, 검은색 사각형은 margin 을 의마한다.

여기서도 마찬가지로 "Save as PNG" 를 통해 screenshot 을 저장할 수 있다.

여기서도 "또" 마찬가지로 view 가 변했다고 자동 refresh 되지 않는다.

상단의 "Refresh Screenshot" 을 클릭해주어야 변경된다.

다행히도(?) 여기서는 자동으로 refresh 하도록 만들수도 있는데, 상단의 "Auto Refresh" 를 클릭하여 

"Refresh Rate" 를 설정해줌으로서 자동 업데이트를 수행시킬 수도 있다.

Working with Pixel Perfect Overlays

Bitmap image 로 된 ui design 을 적용한다면 pixel perfect 가 좋은 툴이다.

해당 bitmap 을 "overlay" 로 올려서 비교해볼 수 있다.

상단의 "Load Overlay" 를 통해서 overlay 를 불러와서 비교할 수 있다.

기본적으로 overlay 는 50% 의 투명도를 갖으며, 실제 view 의 아래쪽에 깔린다.

slider 를 통해서 overlay 를 조정할 수 있다.

Loupe pane 에는 기본적으로 overlay 가 보이지 않는다.

Loupe pane 에도 보이게 하고 싶으면 "Show in Loupe" 를 클릭해야 한다.

Android, auto refresh, bitmap layout, build, capture layers, code scanning, developer mode, developer 모드, Draw, hierarchy viewer, Highlight, html color code, inspect screenshot, invalidate, layout, layoutview, lint, lint tools, load overlay, load view hierarchy, mearue, optimizing ui, optimizing view, Overlay, performance indicator, photoshop, pixel perfect, pixel perfect loupe pane, properties view, PSD, Red, refresh, refresh rate, refresh screenshot, render time, rendering, rendering performance, rendering performance data, request layout, RGB, save as png, SDK, show in loupe, Tools, tree overview, tree view, ui 최적화, view object pane, view optimization, view 최적화, viewgroup, xy coordinate, Yellow, 안드로이드