Menggunakan kembali tata letak dengan <include>

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menggunakan tata letak di Compose.

Tata letak berbasis slot →

Meskipun Android menawarkan berbagai widget untuk menyediakan elemen interaktif yang kecil dan dapat digunakan kembali, Anda mungkin juga perlu menggunakan kembali komponen lebih besar yang memerlukan tata letak khusus. Untuk menggunakan kembali tata letak lengkap secara efisien, gunakan tag <include> dan <merge> untuk menyematkan satu tata letak di dalam tata letak lainnya.

Dengan begitu, Anda dapat membuat tata letak yang kompleks—seperti panel tombol ya atau tidak atau status progres kustom dengan teks deskripsi. Artinya, Anda dapat mengekstrak elemen aplikasi apa pun yang umum di beberapa tata letak, mengelolanya secara terpisah, dan menyertakannya dalam setiap tata letak. Meskipun setiap komponen UI dapat dibuat dengan menulis View kustom, Anda dapat melakukannya dengan lebih mudah dengan menggunakan kembali file tata letak.

Membuat tata letak yang dapat digunakan kembali

Mulailah dengan membuat file XML baru dan menentukan tata letak yang ingin Anda gunakan kembali. Misalnya, berikut adalah tata letak yang menentukan panel judul untuk disertakan dalam setiap aktivitas (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 root harus sama persis dengan yang ingin Anda tampilkan di setiap tata letak tempat Anda berencana menambahkan tata letak ini.

Catatan: Atribut tools:showIn dalam file XML sebelumnya adalah atribut khusus yang hanya digunakan pada waktu desain di Android Studio dan dihapus selama kompilasi. Atribut ini menentukan tata letak yang menyertakan file ini, sehingga Anda dapat melihat pratinjau dan mengedit file ini seperti yang ditampilkan saat disematkan dalam tata letak induk.

Menggunakan tag <include>

Di dalam tata letak tempat Anda ingin menambahkan komponen yang dapat digunakan kembali, tambahkan tag <include>. Misalnya, berikut adalah tata letak yang menyertakan panel judul dari contoh sebelumnya:

<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>

Anda juga dapat mengganti semua parameter tata letak—atribut android:layout_* apa pun—dari tampilan root tata letak yang disertakan dengan menentukannya di tag <include>. Hal ini ditunjukkan dalam contoh berikut:

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

Namun, jika Anda ingin mengganti atribut tata letak menggunakan tag <include>, ganti juga android:layout_height dan android:layout_width agar atribut tata letak lainnya dapat diterapkan.

Menggunakan tag <merge>

Tag <merge> membantu menghilangkan kelompok tampilan yang berlebihan di hierarki tampilan saat menyertakan satu tata letak dalam tampilan lain. Satu kasus penggunaan <merge> adalah saat Anda mengimplementasikan tampilan kustom dengan memperluas ViewGroup.

Misalnya, jika tata letak utama Anda adalah LinearLayout vertikal dengan dua tampilan berturut-turut dapat digunakan kembali dalam beberapa tata letak, tata letak yang dapat digunakan kembali tempat Anda menempatkan dua tampilan tersebut memerlukan tampilan root-nya sendiri. Namun, menggunakan LinearLayout lain sebagai root untuk tata letak yang dapat digunakan kembali akan menghasilkan LinearLayout vertikal di dalam LinearLayout vertikal. LinearLayout bertingkat tidak terlalu berguna dan memperlambat performa UI Anda.

Sebagai gantinya, Anda dapat memperluas LinearLayout untuk membuat tampilan kustom dan menggunakan XML tata letak untuk mendeskripsikan tampilan turunannya. Tag teratas dalam XML adalah <merge>, bukan LinearLayout, seperti yang ditunjukkan dalam contoh berikut:

<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>

Saat Anda menyertakan tata letak ini dalam tata letak lain—menggunakan tag <include>—sistem akan mengabaikan elemen <merge> dan menempatkan dua tombol langsung di tata letak, menggantikan tag <include>.

Untuk mengetahui informasi selengkapnya tentang <include>, lihat Resource tata letak.