Layout Inspector 및 Layout Validation으로 레이아웃 디버깅

Android 스튜디오의 Layout Inspector를 사용하면 앱 레이아웃을 디자인 모형과 비교하고 앱의 확대 뷰 또는 3D 뷰를 표시하며 런타임에 앱 레이아웃의 세부정보를 검토할 수 있습니다. 레이아웃이 완전히 XML로 빌드된 것이 아니라 런타임에 빌드되어 예상치 못한 방식으로 동작하는 경우 특히 유용합니다.

Layout Validation을 사용하면 여러 기기와 디스플레이 구성(예: 다양한 글꼴 크기나 사용자 언어)에서 레이아웃을 동시에 미리 볼 수 있어 일반적인 여러 레이아웃 문제를 쉽게 테스트할 수 있습니다.

Layout Inspector 열기

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

연결된 기기나 에뮬레이터에서 앱을 실행합니다.
Tools > Layout Inspector를 클릭합니다.

그림 1과 같이 Layout Inspector에서는 다음 사항이 표시됩니다.

Component Tree: 레이아웃에 있는 뷰의 계층 구조입니다.
Layout Display: 기기 또는 에뮬레이터에 표시되는 앱 레이아웃을 렌더링하며 각 뷰에 레이아웃 경계가 표시됩니다.
Layout Inspector 툴바: Layout Inspector의 도구입니다.
Attributes: 선택한 뷰의 레이아웃 속성입니다.

Component Tree, Layout Inspector 툴바, Layout Display, Attributes를 나타내는 라벨이 있는 Layout Inspector 스크린샷

그림 1. Layout Inspector

뷰 선택하기

뷰를 선택하려면 Component Tree 또는 Layout Display에서 뷰를 클릭합니다. 선택한 뷰의 모든 레이아웃 속성이 Attributes 패널에 표시됩니다.

레이아웃에 중복되는 뷰가 포함되어 있으면 Component Tree에서 뷰를 클릭하거나 레이아웃을 회전하고 원하는 뷰를 클릭하여 뒤에 있는 뷰를 선택할 수 있습니다.

뷰 격리하기

복잡한 레이아웃을 사용하려면 레이아웃의 하위 집합만 Component Tree에 표시되고 Layout Display에 렌더링되도록 개별 뷰를 격리하면 됩니다.

뷰를 격리하려면 Component Tree에서 뷰를 마우스 오른쪽 버튼으로 클릭하고 Show Only Subtree 또는 Show Only Parents를 선택합니다.

전체 뷰로 돌아가려면 뷰를 마우스 오른쪽 버튼으로 클릭하고 Show All을 선택합니다.

레이아웃 테두리 및 뷰 라벨 숨기기

레이아웃 요소의 경계 상자나 뷰 라벨을 숨기려면 Layout Display 상단에서 View Options 를 클릭하고 Show Borders 또는 Show View Label을 전환합니다.

앱 레이아웃과 참조 이미지 오버레이 비교하기

UI 모형과 같은 참조 이미지와 앱 레이아웃을 비교하려면 Layout Inspector에서 비트맵 이미지 오버레이를 로드하면 됩니다.

오버레이를 로드하려면 Layout Inspector 상단에서 Load Overlay 를 클릭합니다. 오버레이는 레이아웃에 맞게 조정됩니다.
오버레이의 투명도를 조정하려면 Overlay Alpha 슬라이더를 사용합니다.
오버레이를 삭제하려면 Clear Overlay 를 클릭합니다.

Live Layout Inspector

Live Layout Inspector를 사용하면 앱의 UI가 API 수준 29 이상을 실행하는 기기나 에뮬레이터에 배포되는 동안 UI에 관한 포괄적이고 유용한 정보를 실시간으로 확인할 수 있습니다.

Live Layout Inspector를 사용 설정하려면 File > Settings > Experimental로 이동하여 Enable Live Layout Inspector옆에 있는 체크박스를 선택합니다. 그런 다음 Layout Display 위 Live updates 옆에 있는 체크박스를 클릭합니다.

Live Layout Inspector에는 동적 레이아웃 계층 구조가 포함되어 있으므로 기기의 뷰가 변경될 때 Component Tree와 Layout Display가 업데이트됩니다.

또한 속성값 해상도 스택을 사용하면 소스 코드에서 리소스 속성값이 발생한 위치를 조사하여 속성 창에서 하이퍼링크를 따라 발생 위치로 이동할 수 있습니다.

그림 2. 속성의 정의로 연결되는 하이퍼링크가 있는 Attributes 패널의 속성값

마지막으로 Layout Display에는 런타임 시 앱의 뷰 계층 구조를 보여주는 고급 3D 시각화 기능이 있습니다. 이 기능을 사용하려면 Live Layout Inspector 창에서 레이아웃을 클릭하고 마우스를 드래그하여 회전하면 됩니다. 레이아웃의 레이어를 확장하거나 축소하려면 Layer Spacing 슬라이더를 사용하세요.

그림 3. 레이아웃의 회전된 3D 뷰

Layout Validation

Layout Validation은 다양한 기기 및 디스플레이 구성의 레이아웃을 동시에 미리 볼 수 있는 시각적 도구로, 프로세스 초기에 레이아웃의 문제를 포착할 수 있습니다. 이 기능에 액세스하려면 IDE 창의 오른쪽 상단에 있는 Layout Validation 탭을 클릭합니다.