Layout Inspector로 레이아웃 디버깅

Android Studio의 Layout Inspector를 사용하면 Android Studio IDE 내에서 런타임에 앱의 뷰 계층을 검사할 수 있습니다. 이 기능은 레이아웃이 완전히 XML로 빌드된 것이 아니라 런타임에 빌드되어 레이아웃이 이상하게 동작하는 경우 특히 유용합니다.

다음과 같이 Layout Inspector를 엽니다.

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

    그림 1. Choose Process 대화상자

    기본적으로, Choose Process 대화상자에는 Android Studio에 현재 열려있는 프로젝트의 프로세스만 나열되며, 이 프로세스가 기기에서 실행 중이어야 합니다. 기기에 있는 다른 앱을 검사하려면 Show all processes를 선택합니다. Google Play 스토어가 없이 루팅된 기기나 에뮬레이터를 사용 중인 경우에는 실행 중인 모든 앱이 보입니다. 그렇지 않은 경우, 디버깅이 가능한 실행 중인 앱만 보입니다.

Layout Inspector가 스냅샷을 캡처하여 .li 파일로 저장하고 엽니다. 그림 2와 같이 Layout Inspector는 다음 사항을 표시합니다.

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

그림 2. Layout Inspector

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

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

기기에서 레이아웃이 변경되더라도 Layout Inspector는 업데이트하지 않습니다. Tools > Android > Layout Inspector를 다시 클릭하여 새 스냅샷을 만들어야 합니다. 각 스냅샷은 별도 .li 파일로 project-name/captures/에 저장됩니다.

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