[안드로이드 / android] Layout Inspector로 레이아웃 디버깅하기

이번 포스팅에서는 android studio의 새로운 layout debugging 툴인 layout inspector를 소개해 드리겠습니다.

기존에는 Hierarchy Viewer 를 사용 했었습니다. 아래와 같이 생긴 툴인데 Android Device Monitor에 내장되어 있었습니다.

그림 0. Hierarchy Viewer

그런 Hierarchy Viewer가 Android Studio 3.1부터는 역사의 뒤안길로 사라지게 되었습니다. (여전히 Android Studio 3.1 이전 버전에서는 사용가능합니다.)

그럼 지금부터 Hierarchy Viewer를 밀어낸 Layout Inspector에 대해서 알아보겠습니다.

Android Studio의 Layout Inspector를 사용하면 Android Studio에서 런타임에 앱의 뷰 계층을 검사할 수 있습니다. 이 기능은 레이아웃이 완전히 XML로 빌드된 것이 아니라 런타임에 빌드되어 위치 오류등이 생겼을 때 이를 찾는데 특히 유용합니다.

그럼 한번 다음과 같이 Layout Inspector를 열어보겠습니다.

1. 연결된 기기나 에뮬레이터에서 앱을 실행합니다.
2. Tools > Android > Layout Inspector를 클릭합니다.
3. 나타나는 Choose Process 대화상자에서, 검사하려는앱 프로세스를 선택하고 OK를 클릭합니다. 

그림 1. Choose Process 대화상자

기본적으로 Choose Process 대화상자에는 Android Studio에 현재 열려있는 프로젝트의 프로세스만 나열됩니다. 또한 이 프로세스가 기기에서 실행중이어야 합니다. 그게 아니면 아무것도 보이지 않습니다.
하지만 루팅한 디바이스나 에뮬레이터에서는 다른 프로세스들도 잘 나타납니다. 혹은 user binary가 아닌 engineer binary에서는 모든 프로세스에 붙여볼 수 있습니다.
필요하면 루팅 후 다른 앱의 Layout 정보도 디버깅 해볼 수 있지만 노력에 비해 얻는게 적습니다. 루팅없이 다른 앱의 Layout 정보를 볼수 있는 툴도 있으니 다음에 소개해 드리겠습니다.

실행중인 프로세스를 선택하게 되면 Layout Inspector가 스냅샷을 캡처하여 .li 파일로 저장하고 엽니다. 그림2와 같이 Layout Inspector는 다음 사항을 표시합니다.

View Tree: 레이아웃에있는 뷰 계층.
Screenshot: 각 뷰에대한 기기 스크린샷이며 경계가표시됨.
Properties Table: 선택한 뷰의 레이아웃 속성.

그림 2. Layout Inspector

View Tree에서 특정 뷰를 클릭하고 스크린샷에서 이와 동일한 뷰를 선택할 수 있으며 그 반대도 마찬가지입니다. 뷰의 모든 레이아웃 속성이 Properties Table에 나타납니다.

겹치는 뷰가 레이아웃에 포함된 경우 기본적으로 스크린샷에서 앞쪽 뷰만 클릭이 가능합니다.

스크린샷에서 뒤쪽 뷰를 클릭 가능하게 하기위해서는 View Tree에서 앞쪽 뷰를 마우스 오른쪽 버튼으로 클릭하고 Show in preview를 선택 취소합니다. 이 경우 뷰 콘텐츠가 사라지는 것이 아니라 스크린샷에서 클릭 가능 경계만 사라지는 것이므로, 앞쪽 뷰 대신 뒤쪽 뷰를 클릭할 수 있습니다.

중간에 사용자의 동작이나 혹은 다른 이유로 기기의 레이아웃이 변경되더라도 Layout Inspector는 업데이트되지 않습니다.
위 과정을 처음부터 다시 진행해서 새로운 스냅샷을 만들어야 합니다.

참고로 각 스냅샷은 별도 .li 파일로 project-name/captures/에 저장됩니다.             

그림 3. Project 창의 Layout Inspector 스냅샷(.li 파일)

이상으로 Layout Inspector의 소개를 마치겠습니다. 다음에 다른 툴 소개로 다시 찾아오겠습니다.
감사합니다.