[Android, ReUsingLayout] include, viewStub, merge 태그 사용하기

안녕하세요. 블랙진입니다

이번 포스팅은 레이아웃을 좀 더 효과적으로  그릴 수 있는 태그인 include, viewStub 그리고 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:background="@color/colorPrimary"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize">

    <TextView
        android:id="@+id/tvIncludeTopBar"
        android:textSize="15sp"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="상단바"/>

</RelativeLayout>

위와 같이 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"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    <TextView
        android:text="블랙진의 티스토리"
        android:layout_margin="50dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    
</LinearLayout>

<include></include> 태그를 사용해 간단히 추가해줄 수 있습니다.

MainActivity.class

TextView tvIncludeTopBar = findViewById(R.id.tvIncludeTopBar);
tvIncludeTopBar.setText("상단바 변경");

include_top_bar.xml 에 선언되어 있는 컴포넌트들은 findViewById 를 통해 사용할 수 있습니다.

ViewStub

VideStub 는 사이즈가 0인 더미 뷰입니다. 기능은 include 와 동일하나 setVisibility(int) 또는 inflate 되었을 때 view 를 그리기 시작합니다. 정리하자면 lazy include 라고 생각하시면 됩니다. include 와 동일한 예제로 보여드리겠습니다.

<ViewStub
    android:id="@+id/stub"
    android:layout="@layout/include_top_bar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"/>

include 태그만 VIewStub 로 변경했으며 width, height 값을 지정해 주어야 합니다.

ViewStub stub = findViewById(R.id.stub);
View inflated = stub.inflate();
TextView tvIncludeTopBar = inflated.findViewById(R.id.tvIncludeTopBar);
tvIncludeTopBar.setText("상단바 변경");

Activity 에서는 inflate() 함수를 사용해 더미 뷰를 화면에 그려주고 findViewById 사용해 컴포넌트를 불러옵니다.

TextView tvIncludeTopBar = findViewById(R.id.tvIncludeTopBar);

혹은 위와 같이 해주셔도 되지만 이 경우 ViewStub 가 inflate 된 후에 선언을 해주셔야 됩니다. 그렇지 않은 경우 NullPointerException 을 발생시킵니다.

merge

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

merge_button.xml

<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <Button
        android:id="@+id/btnAdd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="add"/>

    <Button
        android:id="@+id/btnDelete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="delete"/>

</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"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

    <TextView
        android:text="블랙진의 티스토리"
        android:layout_margin="50dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

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

</LinearLayout>

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

MainActivity 에서 findViewById 를 통해 merge 태그 안의 뷰들을 불러올 수 있습니다.

findViewById(R.id.btnAdd).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        showToast("add");
    }
});

findViewById(R.id.btnDelete).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        showToast("delete");
    }
});

정리

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

include - 뷰의 재활용을 통해 유지보수의 이점이 있습니다

viewStub - 자주 사용하지 않은 뷰를 그릴때 지정해 주면 불필요하게 레이아웃을 그릴 필요가 없어 성능 개선에 도움이 됩니다.

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

<참고자료>

구글 문서 - Layout Resource

구글 문서 - ReUsing Layout