Overlay elemen UI dengan Petak

Grid API Jetpack Compose dirancang untuk tata letak layar dua dimensi struktural. Tidak seperti petak lambat, yang dioptimalkan untuk set data besar, Grid memungkinkan Anda menentukan struktur tata letak responsif atau tetap menggunakan jalur (baris dan kolom), celah, dan area petak. Anda menempatkan item ke dalam struktur ini menggunakan Modifier.gridItem, yang memberi Anda kontrol eksplisit atas pemosisian dan rentang dalam penampung petak.

Jika UI Anda memerlukan beberapa item di area petak yang sama atau area yang tumpang-tindih—seperti overlay badge, indikator status, atau kartu berlapis—ambiguitas koordinat dapat membuat perilaku tata letak tidak dapat diprediksi. Mengelola kedalaman komponen yang tumpang tindih tanpa menggunakan bertingkat Box yang kompleks atau offset koordinat manual sangat penting untuk menjaga kode tata letak yang bersih dan mudah dibaca.

Praktik terbaik

• Urutan deklarasi: Grid mengikuti pengurutan zIndex standar berdasarkan urutan deklarasi dalam blok Grid. Item yang dideklarasikan nanti di blok konten Grid akan dirender di atas item yang dideklarasikan sebelumnya.
• Kontrol z-index eksplisit: Gunakan Modifier.zIndex jika Anda perlu mengontrol atau mengganti urutan gambar default elemen yang tumpang-tindih secara eksplisit.
• Area bernama vs overlay item: Gunakan Grid dan area bernama untuk menentukan struktur tata letak, tetapi pertahankan logika overlay yang kompleks di dalam gridItem tertentu jika overlay tersebut terikat secara logis ke sel petak tersebut.
• Rentang yang disengaja untuk overlay: Saat melakukan overlay, pastikan parameter rowSpan dan columnSpan disengaja untuk elemen yang tumpang-tindih guna mengontrol seberapa banyak konten yang mendasarinya dikaburkan.

Bahan

• Grid: Penampung tata letak dua dimensi struktural
• GridConfigurationScope.area: Fungsi cakupan yang digunakan untuk menentukan region bernama dan area overlay di seluruh jalur petak
• Modifier.gridItem: Pengubah yang digunakan untuk menempatkan dan merentangkan composable di seluruh jalur petak atau ke area petak bernama
• Modifier.zIndex: Pengubah yang digunakan untuk mengontrol urutan gambar dan elevasi lapisan secara eksplisit

Langkah

Konfigurasikan tata letak petak dan area bernama, posisikan konten lapisan dasar dalam koordinat petak target, dan tempatkan elemen overlay di sel petak bersama atau area yang tumpang-tindih.

1. Menentukan konfigurasi petak

Buat konfigurasi composable Grid yang menentukan jalur baris dan kolom, serta area bernama yang mencakup beberapa sel untuk menentukan region overlay:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Menempatkan konten dasar dan mendeklarasikan overlay

Tempatkan composable dasar Anda di sel petak menggunakan Modifier.gridItem. Grid mengikuti pengurutan zIndex standar berdasarkan urutan komposisi, sehingga item yang dideklarasikan kemudian dalam blok Grid digambar di atas item sebelumnya. Saat menempatkan overlay di sel yang sama atau area yang tumpang-tindih, deklarasikan composable overlay setelah elemen dasar, atau referensikan area bernama. Anda dapat menggunakan Modifier.zIndex jika perlu mengontrol atau mengganti urutan gambar default ini secara eksplisit.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Hasil

Elemen UI Anda dihamparkan secara terprediksi dalam struktur petak 2D. Dengan mengandalkan pengurutan deklarasi standar, Anda dapat menghindari container bertingkat yang kompleks sekaligus mempertahankan kode tata letak yang bersih dan responsif.

Gambar 1. Elemen UI yang tumpang-tindih dalam Compose Grid.