Class ukuran jendela adalah sekumpulan titik henti sementara area pandang tidak berubah yang membantu Anda mendesain, mengembangkan, dan menguji tata letak responsif/adaptif. Keseimbangan titik henti sementara kesederhanaan tata letak dengan fleksibilitas pengoptimalan aplikasi untuk kasus yang unik.
Kelas 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 ukuran jendela —satu untuk lebar, satu untuk tinggi. Lebar yang tersedia biasanya lebih lebih penting daripada tinggi yang tersedia karena scroll vertikal di mana-mana, jadi class ukuran jendela lebar mungkin lebih relevan dengan UI aplikasi Anda.
Seperti yang divisualisasikan dalam gambar, titik henti sementara memungkinkan Anda untuk terus berpikir tentang 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, ukuran jendela secara eksplisit tidak ditentukan oleh ukuran layar perangkat. Jendela class ukuran tidak ditujukan untuk logika jenis isTablet. Sebaliknya, jendela class ukuran ditentukan oleh ukuran jendela yang tersedia untuk aplikasi Anda terlepas dari jenis perangkat tempat aplikasi berjalan, yang memiliki dua hal penting implikasi:
Perangkat fisik tidak menjamin class ukuran jendela tertentu. Tujuan yang tersedia untuk aplikasi Anda bisa berbeda dari ukuran layar perangkat Anda karena berbagai alasan. Di perangkat seluler, mode layar terpisah dapat mempartisi layar antara dua aplikasi. Di ChromeOS, aplikasi Android dapat disajikan di jendela berformat bebas yang dapat diubah ukurannya secara arbitrer. Perangkat foldable dapat memiliki dua layar dengan ukuran berbeda yang diakses secara terpisah dengan melipat atau membentangkan perangkat.
Class ukuran jendela dapat berubah sepanjang masa penggunaan aplikasi Anda. Saat aplikasi Anda berjalan, orientasi perangkat berubah, multitasking, dan melipat/membentangkan dapat mengubah jumlah ruang layar yang tersedia. Sebagai seorang , class ukuran jendela akan dinamis, dan UI aplikasi Anda harus beradaptasi sebagaimana mestinya.
Class ukuran jendela dipetakan ke titik henti sementara yang ringkas, sedang, dan diperluas di Tata letak Desain Material panduan kami. 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 WindowSizeClass#compute()
yang disediakan oleh library Jetpack
WindowManager. Contoh berikut
menunjukkan cara menghitung class ukuran jendela dan menerima update setiap kali
class ukuran jendela berubah:
Kotlin
class MainActivity : Activity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// ...
// Replace with a known container that you can safely add a
// view to where the view won't affect the layout and the view
// won't be replaced.
val container: ViewGroup = binding.container
// Add a utility view to the container to hook into
// View.onConfigurationChanged(). This is required for all
// activities, even those that don't handle configuration
// changes. You can't use Activity.onConfigurationChanged(),
// since there are situations where that won't be called when
// the configuration changes. View.onConfigurationChanged() is
// called in those scenarios.
container.addView(object : View(this) {
override fun onConfigurationChanged(newConfig: Configuration?) {
super.onConfigurationChanged(newConfig)
computeWindowSizeClasses()
}
})
computeWindowSizeClasses()
}
private fun computeWindowSizeClasses() {
val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this)
val width = metrics.bounds.width()
val height = metrics.bounds.height()
val density = resources.displayMetrics.density
val windowSizeClass = WindowSizeClass.compute(width/density, height/density)
// COMPACT, MEDIUM, or EXPANDED
val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass
// COMPACT, MEDIUM, or EXPANDED
val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass
// Use widthWindowSizeClass and heightWindowSizeClass.
}
}
Java
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
// Replace with a known container that you can safely add a
// view to where the view won't affect the layout and the view
// won't be replaced.
ViewGroup container = binding.container;
// Add a utility view to the container to hook into
// View.onConfigurationChanged(). This is required for all
// activities, even those that don't handle configuration
// changes. You can't use Activity.onConfigurationChanged(),
// since there are situations where that won't be called when
// the configuration changes. View.onConfigurationChanged() is
// called in those scenarios.
container.addView(new View(this) {
@Override
protected void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
computeWindowSizeClasses();
}
});
computeWindowSizeClasses();
}
private void computeWindowSizeClasses() {
WindowMetrics metrics = WindowMetricsCalculator.getOrCreate()
.computeCurrentWindowMetrics(this);
int width = metrics.getBounds().width
int height = metrics.getBounds().height()
float density = getResources().getDisplayMetrics().density;
WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density)
// COMPACT, MEDIUM, or EXPANDED
WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass()
// COMPACT, MEDIUM, or EXPANDED
WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass()
// Use widthWindowSizeClass and heightWindowSizeClass.
}
}
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 Anda untuk class ukuran lebar yang diperluas, karena class ukuran ini menyediakan ruang paling banyak untuk konten tambahan dan perubahan UI. Kemudian tentukan tata letak apa yang masuk akal class ukuran lebar sedang; pertimbangkan untuk menambahkan tata letak khusus.
Langkah berikutnya
Untuk mempelajari lebih lanjut cara menggunakan class ukuran jendela untuk membuat respons/adaptif , lihat hal berikut:
Untuk tata letak berbasis Compose: Mendukung berbagai ukuran layar
Untuk tata letak berbasis tampilan: Desain responsif/adaptif dengan tampilan
Untuk mempelajari lebih lanjut tentang apa yang membuat sebuah aplikasi bagus di semua perangkat dan ukuran layar, lihat: