Technical Note/ANDROID

출처 : 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


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

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