|
<?xml version="1.0" encoding="utf-8"?> <FrameLayout <ImageView android:layout_width="200dp" android:layout_height="200dp" android:src="@drawable/sunset" android:scaleType="fitXY"/> <ImageView android:src="@drawable/androboy" android:layout_width="100dp" android:layout_height="100dp" android:scaleType="fitXY" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text = "텍스트" android:textColor="#111111" android:textStyle="bold"/> </FrameLayout> |
위의 코드(하나의 프레임 레이아웃 안에 세 개의 자식 View가 있음)를 실행 후, HierarchyViewer를 통해 본 모습은 다음과 같다. 사용자가 XML에서 작성한 코드 외에도 자동으로 추가되는 레이아웃들이 있음을 확인할 수 있다.
Hierarchy Viewer에서 View tree의 시작은 Décor View로써 UI를 스크린에 표시하기 위한 최상위의 윈도우 뷰 이다.
PhondeWindow의 내부 클래스로 정의되어 있어 그림 상에서는 흐릿하게 보이는데, PhoneWindow$DecorView 라고 쓰여있다. 데코뷰는 하위의 UI 요소(View/ViewGroup)들을 직접 제어하지는 않고, 화면 전체의 밝기 조절 등을 담당하는 (하는 일이 그닥 많지는 않은 듯한) 뷰라고 한다.
그 아래에는 id가 없는 LinearLayout이 자동적으로 생성되어 있는데, UI 전체 영역을 담당하며 해당 레이아웃을 기점으로 두 개의 프레임 레이아웃이 생성되어 각각 타이틀바 영역과 컨텐츠 영역을 그려준다.
View Tree 구조에서 붉은 테두리의 영역(사용자가 작성한 코드)를 제외하고 나머지 부분은 app 내에 별도의 코드가 있는 것이 아니라 자동으로 생성되는 것이다. 컨텐츠 영역 전체가 하나의 프레임 레이아웃의 내부라고 할 수 있기 때문에, 사용자가 xml로 위의 예제코드와 같이 프레임 레이아웃 안에 자식 View들이 존재하는 UI를 만들었을 때 두 개의 프레임 레이아웃이 중복되는 구조가 되어 버린다.
두 개의 프레임 레이아웃은 화면 구성을 하는 데 있어서 동일한 역할을 수행하고 있기 때문에 불필요하게 트리 내에서 깊이(Depth)를 늘리고 있다. 레이아웃을 그리기 위해 자식View와 부모View가 영역 협상을 하는 데는 많은 비용을 필요로 하기 때문에 이러한 Depth를 최소화 하는 것이 UI를 최적화시키는 좋은 방법이다.
이렇게 중복되는 두 레이아웃을 하나로 하나로 묶어 줄 수 있는 태그가 바로 <merge/>
|
FrameLayout 태그 사용 |
Merge 태그 사용 |
|
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" |
<merge xmlns:android= |
FrameLayout 대신 merge 태그를 사용하고 레이아웃 크기를 삭제(merge될 상위의 View와 크기가 동일하므로) 하여
출력했을 때 겉으로 보여지는 UI는 그대로이지만 HierarchyViewer에서는 중복되던 레이아웃이 하나로 합쳐진 것을 확인할 수 있다.
merge 태그를 사용하면 상위의 레이아웃( id, 크기 등)을 기준으로 한다.
(첫번째 그림과 비교해 보았을 때 Depth가 줄어들었다~)
여기에서 잠깐 드는 궁금증 한가지!!
중복되게 만들 필요 없이 그냥 코드에서 Frame Layout 태그를 빼면 되는 것 아닐까? 하지만 이를 실험해 보면 컴파일 단계에서 unbound prefix 에러가 발생하며 XML을 파싱할 수 없다고 나온다. (;;)
content라는 id의 첫 번째 FrameLayout은 UI를 화면에 보여주기 위해 타이틀 bar와 함께 DecorView에서 그려 주는
Runtime에서 나타나는 Layout이고, 두 번째 FrameLayout은 하위에 자신이 가지고 있는 자식 View들을 어떻게 배치할 지 결정하기 위한 레이아웃이기 때문에 컴파일 단계에서 생략을 할 수 없는 듯 하다.
위의 예제처럼 사용자가 XML로 직접 레이아웃을 구성할 때 만약 가장 처음 쓰는 것이 프레임 레이아웃이라면 merge 태그로 대체하는 것이 좋을 듯 하고, 그 외에 또 merge 태그가 적용 가능한 케이스가 있는지에 대해서는 개발할 때 HierarchyViewer를 통해 UI를 디버깅해 보면서 중복되는 요소가 있는지를 직접 알아보아야 할 것 같다. <참고 사이트>
◎ 휴우 님, [번역] 안드로이드 Layout Tricks: Merging Layouts (링크)
'공부하는 개발자 > Android' 카테고리의 다른 글
| [Git] repo sync했을 때 branch is published 에러 (0) | 2011/10/10 |
|---|---|
| 안드로이드 에뮬레이터 단축키 (0) | 2011/09/19 |
| 안드로이드 Full Build에서 API 에러가 났다면 make update-api (0) | 2011/09/15 |
| 중복되는 프레임 레이아웃은 합쳐버리자, merge 태그 (0) | 2011/09/07 |
