Class ukuran jendela adalah sekumpulan titik henti sementara area pandang tidak berubah yang membantu Anda mendesain, mengembangkan, dan menguji tata letak responsif/adaptif. Titik henti sementara menyeimbangkan kesederhanaan tata letak dengan fleksibilitas pengoptimalan aplikasi untuk kasus yang unik.
Class ukuran jendela mengategorikan area tampilan yang tersedia untuk aplikasi Anda sebagai ringkas, sedang, atau diperluas. Lebar dan tinggi yang tersedia diklasifikasikan secara terpisah, sehingga pada waktu tertentu aplikasi Anda akan memiliki dua class ukuran jendela—satu untuk lebar dan satu untuk tinggi. Lebar yang tersedia biasanya lebih penting daripada tinggi yang tersedia karena adanya scroll vertikal di mana saja, sehingga class ukuran jendela lebar mungkin lebih relevan dengan UI aplikasi Anda.
Seperti yang divisualisasikan dalam gambar, titik henti sementara memungkinkan Anda terus memikirkan tata letak dalam hal perangkat dan konfigurasi. Setiap titik henti sementara class ukuran merepresentasikan sebagian besar kasus untuk skenario perangkat biasa, yang dapat menjadi frame referensi yang berguna saat Anda memikirkan desain tata letak berbasis titik henti sementara.
Class ukuran | Titik henti sementara | Representasi perangkat |
---|---|---|
Lebar rapat | lebar < 600dp | 99,96% ponsel dalam mode potret |
Lebar sedang | 600dp ≤ lebar < 840dp | 93,73% tablet dalam mode potret,
tampilan bagian dalam paling besar yang dibentangkan dalam mode potret |
Lebar yang diluaskan | lebar ≥ 840dp | 97,22% tablet dalam mode lanskap,
tampilan bagian dalam paling besar yang dibentangkan dalam mode lanskap |
Tinggi rapat | tinggi < 480dp | 99,78% ponsel dalam mode lanskap |
Tinggi sedang | 480dp ≤ tinggi < 900dp | 96,56% tablet dalam mode lanskap,
97,59% ponsel dalam mode potret |
Tinggi diluaskan | tinggi ≥ 900dp | 94,25% tablet dalam mode potret |
Meskipun memvisualisasikan class ukuran sebagai perangkat fisik dapat berguna, class ukuran jendela secara eksplisit tidak ditentukan oleh ukuran layar perangkat. Class ukuran jendela tidak ditujukan untuk logika jenis isTablet. Sebaliknya, class ukuran jendela ditentukan oleh ukuran jendela yang tersedia untuk aplikasi Anda, terlepas dari jenis perangkat yang menjalankan aplikasi, yang memiliki dua implikasi penting:
Perangkat fisik tidak menjamin class ukuran jendela tertentu. Ruang layar yang tersedia untuk aplikasi Anda dapat berbeda dari ukuran layar perangkat karena berbagai alasan. Di perangkat seluler, mode layar terpisah dapat mempartisi layar antara dua aplikasi. Di ChromeOS, aplikasi Android dapat ditampilkan di jendela berformat bebas yang dapat diubah ukurannya secara arbitrer. Perangkat foldable dapat memiliki dua layar dengan ukuran berbeda yang diakses secara masing-masing dengan melipat atau membentangkan perangkat.
Class ukuran jendela dapat berubah sepanjang masa penggunaan aplikasi Anda. Saat aplikasi berjalan, perubahan orientasi perangkat, multitasking, dan lipatan/bentangkan dapat mengubah jumlah ruang layar yang tersedia. Akibatnya, class ukuran jendela bersifat dinamis, dan UI aplikasi Anda harus beradaptasi dengan semestinya.
Class ukuran jendela dipetakan ke titik henti sementara yang ringkas, sedang, dan diperluas dalam panduan tata letak Desain Material. Gunakan class ukuran jendela untuk membuat keputusan tata letak aplikasi tingkat tinggi, seperti memutuskan apakah akan menggunakan tata letak kanonis tertentu untuk memanfaatkan ruang layar tambahan.
Anda dapat menghitung
WindowSizeClass
saat ini
menggunakan
fungsi teratas
currentWindowAdaptiveInfo
dari
library
androidx.compose.material3.adaptive
. Contoh berikut menunjukkan cara menghitung class ukuran jendela dan
menerima pembaruan setiap kali class ukuran jendela berubah:
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
Mengelola tata letak dengan class ukuran jendela
Class ukuran jendela memungkinkan Anda mengubah tata letak aplikasi saat ruang tampilan yang tersedia untuk aplikasi berubah, misalnya, saat perangkat dilipat atau dibentangkan, orientasi perangkat berubah, atau ukuran jendela aplikasi diubah ukurannya dalam mode multi-aplikasi.
Lokalkan logika untuk menangani perubahan ukuran tampilan dengan meneruskan class ukuran jendela ke bawah sebagai status ke composable bertingkat seperti status aplikasi lainnya:
@OptIn(ExperimentalMaterial3AdaptiveApi::class) @Composable fun MyApp( windowSizeClass: WindowSizeClass = currentWindowAdaptiveInfo().windowSizeClass ) { // Perform logic on the size class to decide whether to show the top app bar. val showTopAppBar = windowSizeClass.windowHeightSizeClass != WindowHeightSizeClass.COMPACT // MyScreen knows nothing about window sizes, and performs logic based on a Boolean flag. MyScreen( showTopAppBar = showTopAppBar, /* ... */ ) }
Menguji class ukuran jendela
Saat Anda membuat perubahan tata letak, uji perilaku tata letak di semua ukuran jendela, terutama pada lebar titik henti sementara yang ringkas, sedang, dan diperluas.
Jika Anda sudah memiliki tata letak untuk layar yang ringkas, pertama-tama optimalkan tata letak untuk class ukuran lebar yang diperluas, karena class ukuran ini menyediakan ruang terbanyak untuk konten dan perubahan UI tambahan. Kemudian tentukan tata letak yang sesuai untuk class ukuran lebar sedang; pertimbangkan untuk menambahkan tata letak khusus.
Langkah berikutnya
Untuk mempelajari lebih lanjut cara menggunakan class ukuran jendela guna membuat tata letak responsif/adaptif, lihat artikel berikut:
Untuk tata letak berbasis Compose: Dukung berbagai ukuran layar
Untuk tata letak berbasis tampilan: Desain responsif/adaptif dengan tampilan
Untuk mempelajari lebih lanjut apa saja yang membuat aplikasi bagus di semua perangkat dan ukuran layar, lihat: