안녕하세요 돼지왕왕돼지입니다.
오늘은 "Android Layout Tricks #2 : Optimize by merging." 주제로 이야기하고자 합니다.
이 글은 http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-by.html 를 의역한 글입니다.
Android Layout Tricks #3 : Optimize by merging.
<merge /> 는 view tree 의 level 을 줄이는 최적화를 위해 사용되는 tag 입니다. 예제를 보는 것이 이해를 하기가 빠르겠군요. 다음의 xml layout 은 image 와 그 제목을 표시하고 있습니다. ImageVIew 와 TextView 를 사용합니다.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="Golden Gate" />
</FrameLayout>
우리가 원하는 대로 그려지고, 이상이 없어 보입니다.
흥미롭게도, HierarchyViewer 의 결과를 보면 FrameLayout 이 쓸데 없이 2번 사용된 것을 볼 수 있습니다.
우리가 사용한 FrameLayout 이 그 부모와 같이 fill_parent 를 사용했다는 점과, background를 설정하지도 않고, 추가 padding 이나 gravity 등을 사용하지 않았다는 점에서 완전히 동일하므로 FrameLayout 을 2번 정의하는 것은 완벽한 낭비입니다. 특별한 이유 없이 UI 의 복잡도만 올려놓은 셈이죠. 하지만 우리가 어떻게 우리 예제 XML 에서 FrameLayout 을 제거할 수 있을까요? XML document 는 root tag 를 필요로 하고, XML layout 이 보통 root tag 로 오는데 말이죠.
이곳이 바로 <merge /> 가 사용될 곳입니다. LayoutInflater 가 이 merge 태그를 만나면, <merge /> 의 children 들을 <merge /> 의 parent 에 붙여버립니다. 햇갈리나요? 우리가 이미 기술한 XML 을 merge 태그를 사용하여 다시 기술해보겠습니다.
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="Golden Gate" />
</merge>
이 새로운 xml 로 TextView 와 ImageView 는 바로 top-level FrameLayout 에 붙어버립니다.겉보기에는 같지만, view hierarchy 를 보면 더 간단해졌습니다.
여기서 <merge /> 태그를 사용한 것은 activity 의 기본 view group 이 FrameLayout 이며, 해당 xml 에서 사용했던 parent 가 다른 속성이 없는 FrameLayout 이었기 때문에 사용 가능했습니다. 만약 XML 에서 root layout으로 LinearLayout 을 사용했다면, 이 merge 를 사용할 수 없었겠죠. <merge /> 태그는 <include /> 태그와 함께 사용되어 최적의 효과를 내곤 합니다. 아래의 OKCancelBar 예제를 통해서 어떻게 두 태그가 협동하는지 함께 보겠습니다. 이 예제는 ImageView 가 있고, 그 위에 custom view 가 보여집니다.
<merge
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:okCancelBar="http://schemas.android.com/apk/res/com.example.android.merge">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="@drawable/golden_gate" />
<com.example.android.merge.OkCancelBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:paddingTop="8dip"
android:gravity="center_horizontal"
android:background="#AA000000"
okCancelBar:okLabel="Save"
okCancelBar:cancelLabel="Don't save" />
</merge>
OKCancelBar 는 매우 간단한 코드입니다. 2개의 버튼이 external XML 로 정의되어 있고, LayoutInflate 를 통해 load 됩니다.
public class OkCancelBar extends LinearLayout {
public OkCancelBar(Context context, AttributeSet attrs) {
super(context, attrs);
setOrientation(HORIZONTAL);
setGravity(Gravity.CENTER);
setWeightSum(1.0f);
LayoutInflater.from(context).inflate(R.layout.okcancelbar, this, true);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.OkCancelBar, 0, 0);
String text = array.getString(R.styleable.OkCancelBar_okLabel);
if (text == null) text = "Ok";
((Button) findViewById(R.id.okcancelbar_ok)).setText(text);
text = array.getString(R.styleable.OkCancelBar_cancelLabel);
if (text == null) text = "Cancel";
((Button) findViewById(R.id.okcancelbar_cancel)).setText(text);
array.recycle();
}
}
2개의 버튼은 다음 XML 에 정의되어 있습니다.
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<include
layout="@layout/okcancelbar_button"
android:id="@+id/okcancelbar_ok" />
<include
layout="@layout/okcancelbar_button"
android:id="@+id/okcancelbar_cancel" />
</merge>
이런식으로 merge 와 include 를 사용하면, custom view 를 만들고 관리하기가 매우 쉽습니다.
<merge /> tag 는 매우 유용하며 당신의 코드를 기적처럼 만들 것입니다. 하지만 다음과 같은 제약사항이 있지요.
- <merge /> 는 root tag 로밖에 사용될 수 없습니다.
- inflate 를 할 때 <merge /> 를 만나게 되면, 당신은 "반드시" parent ViewGroup 을 명시해줘야 하고, attachToRoot 를 true 로 set 해주어야 합니다. ( inflate() 함수를 참조하세요 )
댓글