[Android] include, merge 태그에 대해

오늘은 레이아웃을 좀 더 효과적으로 그릴 수 있는 태그인 include, merge에 대해 알아보겠다!

 

include

 

재사용하고 싶은 컴포넌트를 레이아웃에 넣을 때 include 태그를 사용한다. 예를 들어서 상단바와 같이 재사용하는 컴포넌트를 적용할 때 유용하다.

 

상단바를 include 태그를 사용해서 적용하는 예제를 작성해 보자!

 

include_top_bar.xml

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/material_dynamic_neutral30"
    android:orientation="vertical">

    <TextView
        android:id="@+id/IncludeTopBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:textStyle="bold"
        tools:text="Top bar" />

</RelativeLayout>

 

include_top_bar.xml

위와 같이 actionBarSize 높이에 textView 1개를 가진 레이아웃을 그렸습니다. 이걸 activity_main.xml에 include 해보겠다.

 

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include layout="@layout/include_top_bar" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:layout_gravity="center"
        android:text="DAON의 개발 공방"
        android:textStyle="bold" />

</LinearLayout>

 

activity_main.xml

<include> ~ </include> 태그를 사용해 간단히 컴포넌트를 추가해 줄 수 있다!

 

merge

 

merge는 include 태그와 함께 쓰이며 더미뷰를 생성해 준다. include 되었을 때 merge 태그는 무시되고 자식 View들을 <merge/> 태그의 부모 View에 추가한다.

 

merge_button.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btnAdd"
            android:layout_width="match_parent"
            android:backgroundTint="@color/material_dynamic_neutral30"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textColor="@color/white"
            android:text="add"/>

        <Button
            android:id="@+id/btnDelete"
            android:backgroundTint="@color/material_dynamic_neutral30"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:textColor="@color/white"
            android:text="delete"/>
    </LinearLayout>

</merge>

 

xml을 생성하여 2개의 버튼을 만들었다. 다른 레이아웃에서 include 하게 되면 merge 태그는 무시되고 Button 2개만 보이게 된다. 이를 activity_main에 적용해 보겠다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <include layout="@layout/include_top_bar" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="50dp"
        android:layout_gravity="center"
        android:text="DAON의 개발 공방"
        android:textStyle="bold" />

    <include layout="@layout/merge_button" />

</LinearLayout>

 

<include> ~ </include>를 사용해 추가해 주었다. 그럼 merge 태그는 무시되고 activity_main에 Button 2개가 추가된 것과 동일하다.

 

activity_main.xml

 

결론

 

뷰의 재활용 및 더 나은 구조의 레이아웃을 그릴 수 있는 2가지 태그에 대해 알아봤다.

 

include - 뷰의 재활용을 통한 유지보수의 이점이 존재한다.

 

merge - 레이아웃을 그릴 때 depth가 깊어질수록 성능이 저하된다. merge 태그를 사용해 depth를 줄여 성능을 개선할 수 있다.