Tata letak kanonis

Tata letak kanonis adalah tata letak serbaguna yang telah terbukti memberikan pengalaman pengguna yang optimal di berbagai faktor bentuk.

Tata letak kanonis mendukung ponsel layar kecil serta tablet, perangkat foldable, dan perangkat ChromeOS. Tata letak yang terinspirasi dari panduan Desain Material ini tidak hanya estetik, tetapi juga memiliki berbagai fungsi.

Framework Android menyertakan komponen khusus yang membuat implementasi tata letak menjadi mudah dan andal.

Tata letak kanonis menciptakan UI yang menarik dan meningkatkan produktivitas yang menjadi dasar aplikasi hebat.

如果您对自适应应用规范化布局很熟悉，但不确定哪些 Android API 适用于您的应用，请跳转到适用性部分，该部分可帮助您确定哪种布局适用于您的应用用例。

Detail daftar

Tata letak detail daftar memungkinkan pengguna menjelajahi daftar item yang berisi informasi deskriptif, penjelasan, atau informasi tambahan lainnya—detail item.

Tata letak ini membagi jendela aplikasi menjadi dua panel berdampingan: satu untuk daftar, satu untuk detail. Pengguna memilih item dari daftar untuk menampilkan detail item. Deep link dalam detail akan menampilkan konten tambahan di panel detail.

Tampilan lebar yang diperluas (lihat Menggunakan class ukuran jendela) memuat daftar dan detail secara bersamaan. Pilihan item daftar akan memperbarui panel detail untuk menampilkan konten terkait untuk item yang dipilih.

Tampilan dengan lebar sedang dan rapat menampilkan daftar atau detail, bergantung pada interaksi pengguna dengan aplikasi. Jika hanya daftar yang terlihat, pemilihan item daftar akan menampilkan detail di tempat daftar tersebut. Jika hanya detail yang terlihat, menekan tombol kembali akan menampilkan ulang daftar.

Perubahan konfigurasi seperti perubahan orientasi perangkat atau perubahan ukuran jendela aplikasi dapat mengubah class ukuran jendela layar. Tata letak daftar-detail akan merespons dengan sesuai, sehingga mempertahankan status aplikasi:

• Jika tampilan lebar yang diperluas yang menampilkan panel daftar dan detail dipersempit menjadi sedang atau rapat, panel detail akan tetap terlihat dan panel daftar disembunyikan
• Jika tampilan lebar sedang atau rapat hanya menampilkan panel detail dan class ukuran jendela diperlebar ke tampilan diperluas, daftar dan detail akan ditampilkan secara bersamaan, dan daftar akan menunjukkan jika item yang sesuai dengan konten di panel detail dipilih
• Jika tampilan lebar sedang atau rapat hanya menampilkan panel daftar dan diperluas ke tampilan diperluas, daftar dan panel detail placeholder akan ditampilkan secara bersamaan

Tata letak daftar-detail cocok untuk aplikasi pesan, pengelola kontak, file browser, atau aplikasi apa pun yang kontennya diatur sebagai daftar item yang menampilkan informasi tambahan.

Gambar 1. Aplikasi pesan yang menampilkan daftar percakapan dan detail percakapan yang dipilih.

Implementasi

您可以使用各种技术创建列表-详情布局，包括 Compose、View 和 activity 嵌入（适用于旧版应用）。如需我们帮助您确定哪项技术最适用于您的应用，请参阅适用性部分。

SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。

首先，将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来，添加两个子元素（View 或 fragment），用于表示列表和详情内容。

实现一种通信方法，以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel，因为它能存储业务逻辑，并且可在配置更改后继续留存。

SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情，二者会并排显示。如果窗口空间不足，系统会根据用户与应用的互动单独显示列表或详情。

如需查看示例实现，请参阅包含滑动窗格的列表-详情示例。

activity 嵌入

借助 activity 嵌入，可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity，或让两个 activity 堆叠显示（一个叠加在另一个之上）。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情，借助 activity 嵌入，您只需进行少量代码重构（甚至无需重构），即可创建列表详情布局。

如需实现 activity 嵌入，只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity（用于启动分屏）和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时，activity 便会叠加显示。例如，如果显示屏宽度下限为 600dp，那么在较小宽度的显示屏上，activity 会叠加显示；但在中等宽度和较大宽度的显示屏上，activity 会并排显示。

Android 12L（API 级别 32）及更高版本支持 activity 嵌入，但经设备制造商实现后，较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入，回退行为会导致列表 activity 或详情 activity 占据整个应用窗口，具体取决于用户与应用的互动。

如需了解详情，请参阅 activity 嵌入。

如需查看示例实现，请参阅使用 activity 嵌入构建列表详情示例。

Feed

Tata letak feed mengatur elemen konten yang setara dalam petak yang dapat dikonfigurasi agar konten dalam jumlah besar dapat dilihat dengan cepat dan mudah.

Ukuran dan posisi membentuk hubungan di antara elemen konten.

Grup konten dibuat dengan membuat elemen memiliki ukuran yang sama dan memosisikannya bersama. Perhatian tertuju pada elemen dengan membuatnya lebih besar daripada elemen di dekatnya.

Kartu dan daftar adalah komponen umum tata letak feed.

Tata letak feed mendukung tampilan untuk hampir semua ukuran karena petak dapat beradaptasi dari satu kolom scroll ke feed konten scroll multi-kolom.

Tata letak feed sangat cocok untuk aplikasi berita dan media sosial.

Gambar 2. Aplikasi media sosial yang menampilkan postingan dalam bentuk kartu dengan berbagai ukuran.

Implementasi

RecyclerView merender banyak item dalam satu kolom secara efisien. GridLayoutManager menata letak item dalam petak, sehingga memungkinkan konfigurasi ukuran dan span item.

Konfigurasi kolom petak berdasarkan ukuran area tampilan yang tersedia untuk menetapkan lebar minimum yang diizinkan untuk item.

Strategi rentang default GridLayoutManager, yaitu satu span per item, dapat diganti dengan membuat SpanSizeLookup kustom. Sesuaikan span untuk menekankan beberapa item daripada yang lain.

Pada layar lebar rapat yang memiliki cukup ruang hanya untuk satu kolom, gunakan LinearLayoutManager, bukan GridLayoutManager.

Untuk contoh implementasi, lihat contoh Feed dengan tampilan.

Panel pendukung

Tata letak panel pendukung mengatur konten aplikasi ke dalam area tampilan utama dan sekunder.

Area tampilan utama mengisi sebagian besar jendela aplikasi (biasanya sekitar dua pertiga) dan berisi konten utama. Area tampilan sekunder adalah panel yang mengisi sisa jendela aplikasi dan menampilkan konten yang mendukung konten utama.

Tata letak panel pendukung berfungsi dengan baik pada tampilan lebar yang diperluas (lihat Menggunakan class ukuran jendela) dalam orientasi lanskap. Tampilan dengan lebar sedang atau rapat mendukung tampilan area tampilan utama dan sekunder jika konten dapat disesuaikan dengan ruang tampilan yang lebih sempit, atau jika konten tambahan pada awalnya dapat disembunyikan di bagian bawah atau samping yang dapat diakses dengan kontrol seperti menu atau tombol.

Tata letak panel pendukung berbeda dengan tata letak daftar-detail jika dilihat dari hubungan konten utama dan sekunder. Konten panel sekunder hanya bermanfaat jika memiliki keterkaitan dengan konten utama; misalnya, jendela alat panel pendukung tidak akan berfungsi jika digunakan sendiri. Namun, konten tambahan di panel detail pada tata letak daftar-detail tetap bermanfaat meskipun tanpa konten utama, misalnya, deskripsi produk dari listingan produk.

Kasus penggunaan untuk panel pendukung meliputi:

• Aplikasi produktivitas: Dokumen atau spreadsheet disertai dengan komentar pengulas di panel pendukung
• Aplikasi media: Video streaming yang dilengkapi dengan daftar video terkait di panel pendukung, atau penggambaran album musik yang dilengkapi dengan playlist
• Aplikasi referensi dan penelusuran: Formulir input kueri dengan hasil di panel pendukung

Gambar 3. Aplikasi belanja dengan deskripsi produk di panel pendukung.

Implementasi

辅助窗格布局是使用 LinearLayout 或 ConstraintLayout 等辅助布局实现的。建立窗口大小类别 用于将应用可用的横向显示空间量 三个类别：较小 (< 600dp)、中等 (>= 600dp) 和较大 (>= 840dp)。

针对每个窗口大小类别，按以下方式定义布局：

• 紧凑：在应用资源 layout 文件夹中，放置 在主要内容下方或底部动作条内呈现辅助窗格
• 中等：在 layout-w600dp 文件夹中提供辅助窗格内容，使主要内容和辅助窗格并排呈现，并平均分配横向显示空间
• 展开：在 layout-w840dp 文件夹中添加辅助窗格内容，使主要内容和辅助窗格并排呈现；不过，让辅助窗格只占据横向空间的 30%，并将其余 70% 的空间留给主要内容

使用 ViewModel 在主要内容和 无论是使用 View、fragment 还是二者结合使用，都可以在辅助窗格中显示。

如需查看实现示例，请参阅以下示例：

• 使用 View 构建辅助窗格
• 使用 fragment 构建辅助窗格

Penerapan

Tata letak kanonis membuat presentasi konten multifaset untuk memudahkan akses dan eksplorasi lebih jauh. Gunakan diagram alir berikut untuk menentukan tata letak dan strategi implementasi yang paling tepat untuk kasus penggunaan aplikasi Anda.

Untuk contoh tata letak kanonis yang diterapkan di berbagai jenis aplikasi, lihat galeri perangkat layar besar.

Gambar 4. Pohon keputusan tata letak kanonis perangkat layar besar.

Referensi lainnya

• Desain Material — Tata letak kanonis