<include>로 레이아웃 재사용

Compose 사용해 보기
Jetpack Compose는 Android를 위한 권장 UI 도구 키트입니다. Compose에서 레이아웃을 사용하는 방법을 알아보세요.

Android에서 다양한 위젯을 통해 재사용 가능한 작은 대화형 요소를 제공하지만, 특수 레이아웃이 필요한 큰 구성요소를 재사용해야 할 수도 있습니다. 전체 레이아웃을 효율적으로 재사용하려면 <include><merge> 태그를 사용하여 한 레이아웃을 다른 레이아웃 내에 삽입합니다.

이를 통해 예 또는 아니요 버튼 패널이나 설명 텍스트가 있는 맞춤 진행률 표시줄과 같은 복잡한 레이아웃을 만들 수 있습니다. 즉, 여러 레이아웃에서 공통으로 사용되는 애플리케이션 요소를 추출하여 별도로 관리하고 각 레이아웃에 포함할 수 있습니다. 맞춤 View를 작성하여 개별 UI 구성요소를 만들 수도 있지만 레이아웃 파일을 재사용하면 더 쉽게 이 작업을 할 수 있습니다.

재사용 가능 레이아웃 생성

먼저 새 XML 파일을 만들고 재사용할 레이아웃을 정의합니다. 예를 들어 다음은 각 활동에 포함할 제목 표시줄을 정의하는 레이아웃입니다(titlebar.xml).

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg"
    tools:showIn="@layout/activity_main" >

    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

루트 View는 이 레이아웃을 추가하려는 각 레이아웃에 표시되게 하려는 모양 그대로여야 합니다.

<include> 태그 사용

재사용 가능한 구성요소를 추가하려는 레이아웃 내부에 <include> 태그를 추가합니다. 예를 들어 다음은 이전 예의 제목 표시줄을 포함하는 레이아웃입니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_bg"
    android:gravity="center_horizontal">

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

    <TextView android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:text="@string/hello"
              android:padding="10dp" />
    ...
</LinearLayout>

포함된 레이아웃의 루트 뷰에 사용되는 모든 레이아웃 매개변수(모든 android:layout_* 속성)를 <include> 태그에 지정하여 재정의할 수도 있습니다. 예를 들면 다음과 같습니다.

<include android:id="@+id/news_title"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         layout="@layout/title"/>

그러나 <include> 태그를 사용하여 레이아웃 속성을 재정의하려면 android:layout_heightandroid:layout_width도 재정의하여 다른 레이아웃 속성이 적용되도록 합니다.

<merge> 태그 사용

<merge> 태그를 사용하면 한 레이아웃을 다른 레이아웃에 포함할 때 뷰 계층 구조에서 중복 뷰 그룹을 제거할 수 있습니다. <merge>의 한 가지 사용 사례는 ViewGroup를 확장하여 맞춤 뷰를 구현하는 경우입니다.

예를 들어 기본 레이아웃이 두 개의 연속 뷰를 여러 레이아웃에서 재사용할 수 있는 세로 LinearLayout이면 두 개의 뷰를 배치하는 재사용 가능한 레이아웃에는 자체 루트 뷰가 필요합니다. 그러나 다른 LinearLayout을 재사용 가능한 레이아웃의 루트로 사용하면 세로 LinearLayout 내부에 세로 LinearLayout이 생깁니다. 중첩된 LinearLayout은 실제 목적이 없으며 UI 성능을 저하시킵니다.

대신 LinearLayout를 확장하여 맞춤 뷰를 만들고 레이아웃 XML을 사용하여 하위 뷰를 설명할 수 있습니다. 다음 예와 같이 XML의 최상위 태그는 LinearLayout가 아닌 <merge>입니다.

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

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>

</merge>

<include> 태그를 사용하여 이 레이아웃을 다른 레이아웃에 포함하면 시스템은 <merge> 요소를 무시하고 <include> 태그 대신 두 개의 버튼을 레이아웃에 직접 배치합니다.

<include>에 관한 자세한 내용은 레이아웃 리소스를 참고하세요.