Tata letak postur tabletop dengan Grid dan mediaQuery

Ikon rating bintang 4

Postur mode di atas meja pada perangkat foldable membagi satu layar menjadi dua area tampilan fungsional yang dipisahkan oleh lipatan fisik (atau engsel). Postur mode di atas meja memungkinkan Anda menempatkan konten utama aplikasi (seperti pemutar video atau kanvas game) di bagian atas, sekaligus menempatkan elemen interaktif (seperti kontrol media atau tombol kontrol) di bagian bawah.

Perangkat foldable dalam posisi tabletop yang menampilkan konten video di layar atas dan kontrol pemutaran di layar bawah.
Gambar 1. Postur mode di atas meja membagi konten dan kontrol interaktif di seluruh lipatan fisik.

Praktik terbaik

Untuk menambahkan dukungan mode di atas meja ke aplikasi, gunakan Grid API untuk menentukan tata letak dengan dua baris dan satu kolom, serta menerapkan kueri media postur jendela mode di atas meja.

  • Mendeteksi postur mode di atas meja secara reaktif: Gunakan composable mediaQuery untuk mengamati status perangkat. Saat perangkat dilipat ke dalam postur mode di atas meja (windowPosture == Posture.Tabletop), ubah tata letak Anda secara dinamis tanpa memerlukan memulai ulang aktivitas atau penanganan siklus proses yang kompleks.
  • Menyusun tata letak dengan Grid: Saat dalam postur mode di atas meja, gunakan Grid API (2 rows, 1 column) untuk memisahkan konten visual utama ke dalam baris atas di atas lipatan dan kontrol interaktif ke dalam baris bawah di bawah lipatan.
  • Memanfaatkan pengindeksan z implisit untuk overlay: Dalam postur standar (non-mode di atas meja), tetapkan beberapa ID area ke sel yang sama untuk meng-overlay kontrol di atas pemutar. Grid otomatis merender item dari belakang ke depan dalam urutan deklarasinya.
  • Memberikan transisi yang lancar: Pastikan status dan posisi scroll dipertahankan saat bertransisi antara tata letak layar penuh standar dan postur mode di atas meja.

Bahan

  • Grid: Penampung tata letak adaptif yang memungkinkan Anda menempatkan item dalam baris dan kolom yang dapat dikonfigurasi, ideal untuk membagi konten di seluruh wilayah layar yang berbeda.
  • mediaQuery: Jetpack Compose API yang digunakan untuk mengkueri postur jendela, class ukuran, dan karakteristik hardware aplikasi saat ini langsung dalam composable Anda.

Langkah

Kueri postur perangkat menggunakan mediaQuery(). Saat perangkat dalam postur mode di atas meja, atur konten aplikasi Anda ke dalam petak vertikal dengan dua baris dan satu kolom, sehingga konten utama tetap berada di atas dan kontrol tetap dapat diakses di bagian bawah.

1. Menentukan konfigurasi Petak untuk mode di atas meja

Di dalam fungsi composable, tentukan ID area tata letak menggunakan enum dan siapkan blok GridConfigurationScope untuk postur default dan mode di atas meja.

Di defaultConfig, kedua area ditetapkan ke sel yang sama (row = 1, column = 1). Grid menggunakan pengindeksan z implisit tempat composable yang dideklarasikan nanti dalam tata letak dirender di atas composable sebelumnya, sehingga pengontrol dapat meng-overlay pemutar tanpa nesting penampung tambahan (lihat Overlay elemen UI dengan Petak untuk mengetahui detail selengkapnya).

enum class VideoPlayerArea { Player, Controller }

object PlayerGridConfig {
    // Default: Single area layout with overlay (controls on top of player)
    val defaultConfig: GridConfigurationScope.() -> Unit = {
        row(1f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1)
        area(areaId = VideoPlayerArea.Controller, row = 1, column = 1)
    }

    // Tabletop: Two rows splitting content across the fold
    val tabletopConfig: GridConfigurationScope.() -> Unit = {
        row(0.5f)
        row(0.5f)
        column(1f)
        area(areaId = VideoPlayerArea.Player, row = 1, column = 1) // Top half above fold
        area(areaId = VideoPlayerArea.Controller, row = 2, column = 1) // Bottom half below fold
    }
}

2. Mendeteksi postur mode di atas meja dan menerapkan konfigurasi ke Petak

Gunakan mediaQuery untuk memilih konfigurasi aktif berdasarkan windowPosture, meneruskan config ke Grid, dan mengikat konten composable ke ID area. Mendeklarasikan VideoPlayerArea.Player sebelum VideoPlayerArea.Controller memastikan bahwa saat keduanya berbagi sel di defaultConfig, kontrol akan dirender di atas pemutar:

val config = mediaQuery {
    when (windowPosture) {
        Posture.Tabletop -> PlayerGridConfig.tabletopConfig
        else -> PlayerGridConfig.defaultConfig
    }
}

Grid(config = config) {
    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Player)
    ) {
        // VideoPlayerContent
    }

    Box(
        modifier = Modifier
            .gridItem(areaId = VideoPlayerArea.Controller)
    ) {
        // PlaybackControlsContent
    }
}

Hasil

Dengan menggabungkan mediaQuery dan Grid, aplikasi Anda akan mendeteksi secara dinamis saat perangkat foldable dilipat sebagian ke dalam postur mode di atas meja dan otomatis menyesuaikan UI-nya menjadi dua area tampilan fungsional yang dipisahkan oleh lipatan.

Referensi lainnya