Membuat tata letak adaptif

UI untuk aplikasi Anda harus responsif agar dapat memperhitungkan berbagai ukuran layar, orientasi, serta faktor bentuk. Tata letak adaptif berubah berdasarkan ruang layar yang tersedia untuknya. Perubahan ini bervariasi mulai dari penyesuaian tata letak sederhana hingga mengisi ruang, sampai mengubah tata letak sepenuhnya untuk memanfaatkan ruang tambahan.

Sebagai toolkit UI deklaratif, Jetpack Compose sangat cocok untuk mendesain dan mengimplementasikan tata letak yang menyesuaikan diri untuk merender konten secara berbeda di berbagai ukuran. Dokumen ini berisi beberapa pedoman tentang cara menggunakan Compose untuk membuat UI Anda responsif.

Membuat perubahan tata letak yang besar untuk composable root secara eksplisit.

Saat menggunakan Compose untuk menata letak seluruh aplikasi, composable level root akan menempati semua ruang yang diberikan untuk merender aplikasi Anda. Pada tingkat ini dalam desain Anda, mungkin perlu mengubah tata letak layar secara keseluruhan untuk memanfaatkan layar yang lebih besar.

Hindari menggunakan nilai fisik dan hardware untuk membuat keputusan tata letak. Anda mungkin ingin membuat keputusan berdasarkan nilai nyata yang tetap (Apakah perangkat ini berupa tablet? Apakah layar fisik memiliki rasio lebar tinggi tertentu?), tetapi jawaban atas pertanyaan ini mungkin tidak berguna untuk menentukan ruang yang dapat digunakan oleh UI Anda.

Diagram yang menampilkan beberapa faktor bentuk perangkat yang berbeda -- ponsel, perangkat foldable, tablet, dan laptop

Pada tablet, aplikasi mungkin berjalan dalam mode multi-aplikasi, yang berarti aplikasi mungkin memisahkan layar dengan aplikasi lain. Di Chrome OS, aplikasi mungkin berada di jendela yang dapat diubah ukurannya. Mungkin ada lebih dari satu layar fisik, misalnya dengan perangkat foldable. Di semua kasus ini, ukuran layar fisik tidak relevan dengan memutuskan cara menampilkan konten.

Sebagai gantinya, Anda harus membuat keputusan berdasarkan bagian layar sebenarnya yang dialokasikan ke aplikasi, seperti metrik jendela saat ini yang disediakan oleh library WindowManager Jetpack. Untuk melihat cara menggunakan WindowManager di aplikasi Compose, lihat contoh JetNews.

Dengan mengikuti pendekatan ini, aplikasi Anda akan lebih fleksibel karena akan berperilaku baik dalam semua skenario di atas. Dengan menjadikan tata letak Anda adaptif dengan ruang layar yang tersedia untuknya juga akan mengurangi jumlah penanganan khusus untuk mendukung platform seperti Chrome OS, serta faktor bentuk seperti tablet dan perangkat foldable.

Setelah Anda mengamati ruang relevan yang tersedia untuk aplikasi, sebaiknya konversikan ukuran mentah menjadi class ukuran yang bermakna, seperti yang dijelaskan dalam Class Ukuran Jendela. Tindakan ini mengelompokkan ukuran menjadi bucket ukuran standar, yang merupakan titik henti sementara yang dirancang untuk menyeimbangkan kemudahan dengan fleksibilitas agar aplikasi Anda dapat dioptimalkan untuk sebagian besar kasus yang unik. Class ukuran ini mengacu pada keseluruhan jendela aplikasi Anda, jadi gunakan class ini untuk keputusan tata letak yang memengaruhi tata letak layar secara keseluruhan. Anda dapat meneruskan class ukuran ini ke bawah sebagai status, atau Anda dapat menjalankan logika tambahan untuk membuat status turunan guna diteruskan ke komponen bertingkat.

enum class WindowSizeClass { Compact, Medium, Expanded }

@Composable
fun MyApp(windowSizeClass: WindowSizeClass) {
    // Perform logic on the size class to decide whether to show
    // the top app bar.
    val showTopAppBar = windowSizeClass != WindowSizeClass.Compact

    // MyScreen knows nothing about window sizes, and performs logic
    // based on a Boolean flag.
    MyScreen(
        showTopAppBar = showTopAppBar,
        /* ... */
    )
}

Pendekatan berlapis ini membatasi logika ukuran layar ke satu lokasi, bukan menyebarkannya di aplikasi Anda di banyak tempat yang harus terus disinkronkan. Lokasi tunggal ini menghasilkan status, yang dapat secara eksplisit diteruskan ke composable lain seperti yang Anda lakukan untuk status aplikasi lainnya. Meneruskan status secara eksplisit menyederhanakan composable non-root, karena ini hanya merupakan fungsi yang dapat dikomposisi normal yang menggunakan class ukuran atau konfigurasi yang ditentukan bersama data lainnya.

Komponen bertingkat yang fleksibel dapat digunakan kembali

Composable lebih dapat digunakan kembali saat dapat ditempatkan di berbagai tempat. Jika dapat diasumsikan bahwa sebuah composable akan selalu ditempatkan di lokasi tertentu dengan ukuran tertentu, akan lebih sulit untuk menggunakannya kembali di tempat lain dengan lokasi yang berbeda, atau dengan jumlah ruang yang tersedia berbeda. Ini juga berarti bahwacomposable non-root yang dapat digunakan kembali harus menghindari ketergantungan pada informasi ukuran “global” secara implisit.

Mari kita lihat contohnya: Bayangkan composable bertingkat yang mengimplementasikan tata letak detail daftar yang mungkin menampilkan satu atau dua panel secara berdampingan.

Screenshot aplikasi yang menampilkan dua panel secara berdampingan

Screenshot aplikasi yang menampilkan daftar/tata letak detail umum. 1 adalah area daftar, 2 adalah area detail.

Kami ingin keputusan ini menjadi bagian dari tata letak keseluruhan untuk aplikasi, jadi kami meneruskan keputusan dari composable level root seperti yang kami lihat di atas:

@Composable
fun AdaptivePane(
    showOnePane: Boolean,
    /* ... */
) {
    if (showOnePane) {
        OnePane(/* ... */)
    } else {
        TwoPane(/* ... */)
    }
}

Bagaimana jika kami menginginkan composable dapat mengubah tata letaknya secara independen berdasarkan ruang yang tersedia? Misalnya, kartu yang ingin menampilkan detail tambahan jika ruangnya memungkinkan. Kami ingin menjalankan beberapa logika berdasarkan ukuran yang tersedia, tetapi ukuran mana yang spesifik?

Contoh dua kartu yang berbeda: kartu sempit yang hanya menampilkan ikon dan judul, serta kartu yang lebih lebar yang menampilkan ikon, judul, dan deskripsi singkat

Seperti yang kita lihat di atas, kita harus menghindari mencoba menggunakan ukuran layar perangkat yang sebenarnya. Ini tidak akan akurat untuk beberapa layar, dan juga tidak akan akurat jika aplikasi tidak dalam mode layar penuh.

Karena composable ini bukan composable level root, kita juga tidak boleh menggunakan metrik jendela saat ini secara langsung untuk memaksimalkan penggunaan kembali. Jika komponen ditempatkan dengan padding (seperti untuk inset), atau jika terdapat komponen seperti kolom samping navigasi atau panel aplikasi, jumlah ruang yang tersedia untuk composable mungkin berbeda secara signifikan dari keseluruhan ruang yang tersedia untuk aplikasi.

Oleh karena itu, kita harus menggunakan lebar yang benar-benar disediakan composable untuk merendernya sendiri. Kita memiliki dua opsi untuk mendapatkan lebar tersebut:

Jika Anda ingin mengubah lokasi atau cara konten apa pun akan ditampilkan, Anda dapat menggunakan koleksi pengubah atau tata letak khusus agar tata letaknya responsif. Ini dapat semudah memiliki beberapa turunan yang mengisi semua ruang yang tersedia, atau menata letak turunan dengan beberapa kolom jika ada cukup ruang.

Jika ingin mengubah item yang ditampilkan, Anda dapat menggunakan BoxWithConstraints sebagai alternatif yang lebih efektif. Composable ini memberikan batasan pengukuran yang dapat Anda gunakan untuk memanggil composable yang berbeda berdasarkan ruang yang tersedia. Namun, hal ini dikenakan biaya, karena BoxWithConstraints menangguhkan komposisi hingga fase Tata Letak, saat batasan ini diketahui, sehingga menyebabkan lebih banyak pekerjaan yang harus dilakukan selama tata letak.

@Composable
fun Card(/* ... */) {
    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                Image(/* ... */)
                Title(/* ... */)
            }
        } else {
            Row {
                Column {
                    Title(/* ... */)
                    Description(/* ... */)
                }
                Image(/* ... */)
            }
        }
    }
}

Pastikan semua data tersedia untuk ukuran yang berbeda-beda

Saat memanfaatkan ruang layar tambahan, pada layar besar Anda dapat menyediakan ruang untuk menampilkan lebih banyak konten kepada pengguna daripada di layar kecil. Saat mengimplementasikan komponen dengan perilaku ini, Anda mungkin ingin menjadi efisiensi, dan memuat data sebagai efek samping ukuran saat ini.

Namun, hal ini bertentangan dengan prinsip aliran data searah, dengan data dapat diangkat dan hanya diberikan ke komponen untuk dirender dengan tepat. Data yang cukup harus diberikan ke composable agar composable selalu memiliki apa yang diperlukannya untuk ditampilkan di berbagai ukuran, meskipun beberapa bagian data mungkin tidak selalu digunakan.

@Composable
fun Card(
    imageUrl: String,
    title: String,
    description: String
) {
    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                Image(imageUrl)
                Title(title)
            }
        } else {
            Row {
                Column {
                    Title(title)
                    Description(description)
                }
                Image(imageUrl)
            }
        }
    }
}

Berdasarkan contoh Card, perhatikan bahwa kita selalu meneruskan description ke Card. Meskipun description hanya digunakan saat lebar mengizinkan untuk menampilkannya, Card selalu memerlukannya, terlepas dari lebar yang tersedia.

Selalu meneruskan data akan menyederhanakan tata letak adaptif dengan membuatnya kurang stateful, dan menghindari pemicu efek samping saat beralih antar-ukuran (yang dapat terjadi karena perubahan ukuran jendela, perubahan orientasi, atau lipatan dan lipatan ).

Prinsip ini juga memungkinkan untuk mempertahankan status di seluruh perubahan tata letak. Dengan menarik informasi yang mungkin tidak digunakan di semua ukuran, kita dapat mempertahankan status pengguna saat ukuran tata letak berubah. Misalnya, kita dapat mengangkat flag Boolean showMore sehingga status pengguna dipertahankan saat perubahan ukuran menyebabkan tata letak beralih antara menyembunyikan dan menampilkan deskripsi:

@Composable
fun Card(
    imageUrl: String,
    title: String,
    description: String
) {
    var showMore by remember { mutableStateOf(false) }

    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                Image(imageUrl)
                Title(title)
            }
        } else {
            Row {
                Column {
                    Title(title)
                    Description(
                        description = description,
                        showMore = showMore,
                        onShowMoreToggled = { newValue ->
                            showMore = newValue
                        }
                    )
                }
                Image(imageUrl)
            }
        }
    }
}

Pelajari lebih lanjut

Untuk mempelajari tata letak kustom di Compose lebih lanjut, lihat referensi tambahan berikut.

Aplikasi contoh

  • JetNews. menunjukkan cara mendesain aplikasi yang menyesuaikan UI-nya untuk memanfaatkan ruang yang tersedia

Video