Android 스튜디오의 Layout Inspector를 사용하면 앱 레이아웃을 디자인 모형과 비교하고, 앱의 확대 뷰를 표시하고, 런타임에 앱 레이아웃의 세부정보를 검토할 수 있습니다. 레이아웃이 완전히 XML로 빌드된 것이 아니라 런타임에 빌드되어 예상치 못한 방식으로 작동하는 경우 유용합니다.
Layout Inspector의 많은 기능은 지원 중단된 Hierarchy Viewer 및 Pixel Perfect 도구에서 이전에 제공되던 것입니다.
Layout Inspector 열기
다음과 같이 Layout Inspector를 엽니다.
- 연결된 기기나 에뮬레이터에서 앱을 실행합니다.
- Tools > Layout Inspector를 클릭합니다.
표시되는 Choose Process 대화상자에서 검사하려는 앱 프로세스를 선택하고 OK를 클릭합니다.
그림 1. Choose Process 대화상자
기본적으로 Choose Process 대화상자에는 Android 스튜디오에 현재 열려 있고 기기나 에뮬레이터에서 실행 중인 프로젝트의 프로세스만 나열됩니다. 기기에 있는 다른 앱을 검사하려면 Show all processes를 선택합니다. Google Play 스토어 없이 루팅된 기기나 에뮬레이터를 사용 중인 경우에는 실행 중인 모든 앱이 표시됩니다. 사용 중이 아니라면 디버그 가능한 실행 중인 앱만 표시됩니다.
Layout Inspector가 스냅샷을 캡처하고 .li 파일로 저장하여 파일을 엽니다.
그림 2와 같이 Layout Inspector에서는 다음 사항이 표시됩니다.
- View Tree: 레이아웃에 있는 뷰의 계층입니다.
- Layout Inspector 툴바: Layout Inspector의 도구입니다.
- 스크린샷: 기기에 표시되는 앱 레이아웃의 스크린샷으로, 각 뷰의 레이아웃 경계가 표시됩니다.
- Properties Table: 선택한 뷰의 레이아웃 속성입니다.
그림 2. Layout Inspector
뷰 선택하기
뷰를 선택하려면 View Tree 또는 스크린샷에서 뷰를 클릭합니다. 선택한 뷰의 모든 레이아웃 속성이 Properties Table에 표시됩니다.
겹치는 뷰가 레이아웃에 포함된 경우 스크린샷에서 전면 뷰만 클릭할 수 있습니다. 전면에 있지 않은 뷰를 선택하려면 View Tree에서 해당 뷰를 클릭합니다.
뷰 격리하기
복잡한 레이아웃으로 작업하려면 레이아웃의 하위 집합만 View Tree에 표시되고 스크린샷에 렌더링되도록 개별 뷰를 격리하면 됩니다.
기기가 계속 연결되어 있을 때만 뷰를 격리할 수 있습니다. 뷰를 격리하려면 Layout Inspector가 다른 스크린샷을 찍을 수 있도록 기기에서 레이아웃을 렌더링해야 합니다.
뷰를 격리하려면 다음 중 한 가지 방법을 사용합니다.
- 스크린샷에서 뷰를 더블클릭합니다.
- View Tree에서 뷰를 마우스 오른쪽 버튼으로 클릭하고 Render Subtree Preview를 선택합니다.
포함하는 뷰로 돌아가려면 Tree View 왼쪽 상단에 있는 화살표를 클릭합니다.
레이아웃 경계 숨기기
레이아웃 요소를 구분하는 경계 상자를 숨기려면 View Tree에서 요소를 마우스 오른쪽 버튼으로 클릭하고 Show layout bounds를 선택 해제합니다.
Show layout bounds가 선택 해제된 레이아웃 요소는 스크린샷에서 클릭하는 방법으로 선택할 수 없습니다.
참조 그리드를 확대 및 사용하여 레이아웃 세부정보 검사하기
Layout Editor 툴바에 있는 버튼을 사용하여 스크린샷의 그리드 오버레이 및 확대/축소 수준을 제어할 수 있습니다.
- 스크린샷을 확대하려면 Zoom In
을 클릭합니다. - 스크린샷을 축소하려면 Zoom Out
을 클릭합니다. - 스크린샷의 1픽셀과 기기상의 1픽셀을 동등한 배율로 하여 레이아웃을 보려면 Actual Size
를 클릭합니다. - 픽셀 그리드를 오버레이하려면 Grid
를 클릭합니다.
그리드는 높은 확대/축소 수준에서만 사용할 수 있습니다.
앱 레이아웃과 참조 이미지 오버레이 비교하기
UI 모형과 같은 참조 이미지와 앱 레이아웃을 비교하려면 Layout Inspector에서 비트맵 이미지 오버레이를 로드하면 됩니다.
- 오버레이를 로드하려면 Layout Inspector 상단에서 Load Overlay
를 클릭합니다. 오버레이는 레이아웃에 맞게 조정됩니다. - 오버레이의 투명도를 조정하려면 Alpha 슬라이더를 사용합니다.
- 오버레이를 삭제하려면 Clear Overlay
를 클릭합니다.
새 스크린샷을 찍어 레이아웃 변경사항 캡처하기
기기의 레이아웃이 변경되더라도 Layout Inspector는 변경사항을 자동으로 업데이트하지 않습니다. 레이아웃 변경사항을 캡처하려면 Tools > Layout Inspector를 다시 클릭하여 새 스크린샷을 만듭니다.
각 스크린샷은 project-name/captures/에 별도의 .li 파일로 저장되고 새 탭에서 열립니다.
그림 3. Project 창의 Layout Inspector 스크린샷(.li 파일)
project-name/captures/에서 .li 파일을 더블클릭하여 이전 스크린샷을 새로고침할 수 있습니다.