[Android] Hierarchy View

이번 장에서는 바로 이전 과정에서 작성한 두 가지 Layout의 화면 구성을 살펴보고

어떤 Layout이 최적화 되었는지 살펴 보겠다.

우선 화면 분석을 위해서는 Eclipse에서 PlugIn으로 존재하는

Hierarchy View 툴을 사용하면 편리하다.

 

1. Hierarchy View에 대해서

 

Hierarchy View는 화면의 View와 ViewGroup 구성이 어떻게 되어 있는지

아주 상세하게 보여주는 Tool이다.

현재 화면 구성의 상태를 디버깅할 수 있다.

 

우선 Hierarchy View를 어떻게 실행하는지 살펴 보자.

 

1.1 Hierarchy View 환경 설정

 

● Eclipse에서 아래와 같이 1번을 선택해 보자.

 

● 아래의 Hierarchy View가 없는 사람들은  "Other"을 선택하라.

    만일 Hierarchy View가 있는 사람들은 그냥 누르면 끝난다.

 

 ● 아래의 Hierarchy View를 선택하라.

 

 ● 아래의 1번을 누르면 Hierarchy View가 구동이 된다.

 

 

1.2 Hierarchy View 구동

 

● 아래는 이전 강좌에 작성한  LinearLayout의 Sample이다.

    해당 Sample을 일단 실행하여 애뮬을 가동한다.

 

 

● 아래와 같은 화면이 나올 것이다.

    여기서 중요한 것은 방금 실행한 LinearLayout Sample 어플리케이션이

    리스트에 있냐는 것이다.

    아래와 같이 1번이 표시되면 정상이다.

    만일 보이지 않으면 2번을 선택해서 화면을 갱신하도록 하자.

    정상적으로 보이면 아래의 1번을 두번 클릭해 보자.

 

● 아래와 같은 화면이 보인다면 정상적으로 구동된 것이다.

 

 

 

 

2. 화면 구조 분석하기

 

● 일단 이전 강좌에서 작성한 LinearLayout의 화면 구성을 살펴 보자.

    아래는 이전 강좌에서 작성한 소스이다.

 

● Hierarchy View를 살펴 보자.

    아래의 1번을 두번 눌러서 크게 보거나,

    아래의 2번을 눌러 축소하여 볼 수 있다.

 

 

● 아래와 같은 구조를 가질 것이다.

    훌륭하지 않은가? ^^

    우선 아래의 노랑색 부분은 무시하고 나머지만 보도록 하자.

    (안드로이드에서는 기본적으로 노랑색 부분의 기본 Layout을 가진다.

     이에 대해서는 다음에 설명토록 하겠다.)

 

● 자 나머지 부분만을 보자.

    대충 보아도 어떻게 구성되어 있었는지 알수 있지 않겠는가?

 

 

● 이제 이전 강좌에서 작성한 RelativeLayout Sample을 실행해 보도록 하자.

    아래는 이전 작성한 소스이다.

 

● 자 RelativeLayout 의 구조이다.

 

 

● 둘을 같이 놓고 비교해 보자.

 

LinearLayout이 RelativeLayout 보다 Tree 깊이가 더 깊고,

View 개수가 더 많다.

Tree의 깊이가 깊을 수록 내부적으로 해당 화면을 그리기 위해 많은 계산이 들어간다.

이제 LinearLayout이 RelativeLayout보다 좀 비효율 적인 것을 알겠는가?

 

하지만 그렇다고 RelativeLayout만을 사용하라는 것은 아니다.

LinearLayout으로만 가능한 화면 구성도 많이 존재하며,

화면 구성이 복잡할 경우 XML 리소스 자체도 RelativeLayout의 경우

복잡해서 가독성이 많이 떨어진다.

그러므로 적절하게 여러가지 Layout을 섞어서 가용하는 것이 실력인 것이다.

 

 

3. 기본적으로 포함된 Layout

 

위에서 LinearLayout에 대해 분석할때

아래와 같이 노랑색 영역이 기본적으로 포함되어 있었다.

이것은 무엇일까?

 

노랑색 부분을 자세히 보자.

눈에 보이지는 않지만 View 구조에 가장 Root에 해당 하는 View가 존재한다.

그것은 바로 1번과 같이 DecorView라고 부른다.

(DecorView는 FrameLayout을 상속 받은 View이다.)

 

그 다음 2번과 같이 LinearLayout이 존재한다.

 

2번에서 LinearLayout으로 갈리는 이유는 바로 "타이틀 바" 때문이다.

아래의 그림을 보자.

1번과 같이 화면의 Title이 바로 그 것이다.

2번과 같이 해당 View를 클릭하면 타이틀만 미리보기가 표시되는 것을 알 수 있다.

 

그 다음 아래의 5번에 해당하는 것이 바로 사용자가 정의하게 될 기본 ViewGroup이 된다.

 

우리는 바로 FrameLayout 위에 원하는 View를 나열하게 되는 것이다.

 

 

4. Hierarchy View의 기타 기능

 

● View 미리보기

 

위에서 1번과 같이 해당 View를 선택하면 2번처럼 해당 View의 하위 View까지 구성된

미리보기 화면이 출력된다.

또한 두번 클릭하면 별도의 창에서 해당 View의 하위 View까지 구성된 미리보기 화면이 나타난다.

여기저기 View들을 클릭해 보라.

 

● View 상세 속성 보기

 

위에서 1번과 같이 해당 View를 선택하면

해당 View에 대한 상세 속성이 2번의 창에서 나타난다.

예로 3번을 보면 해당 XML 소스에서 설정된 값이 나타난 것을 볼 수 있다.

출처 : http://cafe.daum.net/superdroid/aAfL/21