Tata letak kanonis

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

Penggambaran perangkat layar besar yang menampilkan tata letak kanonis.

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 dari aplikasi yang hebat.

Detail daftar

Wireframe dari tata letak detail daftar.

Tata letak detail daftar memungkinkan pengguna menjelajahi daftar item yang berisi deskripsi, 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 memberikan respons yang sesuai guna mempertahankan status aplikasi:

  • Jika tampilan lebar yang diperluas yang menampilkan panel daftar dan detail dipersempit ke 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 diperlebar ke tampilan diperluas, daftar dan panel detail placeholder akan ditampilkan secara bersamaan

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

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

Implementasi

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和“详细信息”窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或“详细信息”窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示“详细信息”窗格时，添加 BackHandler 即可移除“详细信息”窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一个高级可组合项，可简化列表详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

以下是此示例中的关键组件：

  • rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和“详细信息”窗格之间的导航。
  • listPane：显示项列表。
  • detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

Feed

Wireframe dari tata letak feed.

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

Ukuran dan posisi membentuk hubungan di antara elemen konten.

Grup konten dibuat dengan membuat elemen berukuran sama dan memosisikannya bersama-sama. Perhatian akan tertuju pada elemen jika dibuat lebih besar dari 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.

Feed sangat cocok untuk aplikasi berita dan media sosial.

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

Implementasi

Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。

根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。

对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。

如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。

以下是使用 LazyVerticalGrid 的最小实现：

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

自适应 Feed 的关键在于 columns 配置。GridCells.Adaptive(minSize = 180.dp) 会创建一个网格，其中每列至少为 180.dp 宽。然后，网格会显示可用空间中可容纳的列数。

如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。

Panel pendukung

Wireframe tata letak 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 penayangan 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 detail daftar jika dilihat dari hubungannya dengan 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:

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

Implementasi

Compose 支持用于做出如下判断的窗口大小类别逻辑：同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和展开宽度，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一个高级可组合项，可简化辅助窗格布局的实现。该可组合项会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持在窗格之间导航。

以下是最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 示例中的关键组件：

  • rememberSupportingPaneScaffoldNavigator：可组合项，用于创建导航器来管理窗格可见性（例如，在较小屏幕上隐藏或显示辅助窗格）
  • mainPane：显示主要内容的可组合项
  • supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

Referensi lainnya