Pencere boyutu sınıfları, duyarlı/uyarlanabilir düzenler tasarlamanıza, geliştirmenize ve test etmenize yardımcı olan dikkatli görüntü alanı ayrılma noktalarıdır. Ayrılma noktaları, uygulamanızı benzersiz durumlar için optimize etme esnekliğiyle basitliği dengeler.
Pencere boyutu sınıfları, uygulamanızın kullanabileceği görüntüleme alanını kompakt, orta veya genişletilmiş olarak kategorilere ayırır. Kullanılabilir genişlik ve yükseklik ayrı olarak sınıflandırılır. Bu nedenle, herhangi bir zamanda uygulamanızda biri genişlik, diğeri yükseklik için olmak üzere iki pencere boyutu sınıfı bulunur. Dikey kaydırmanın yaygın olarak kullanılması nedeniyle, kullanılabilir genişlik genellikle kullanılabilir yükseklikten daha önemlidir. Bu nedenle, genişlik pencere boyutu sınıfı büyük olasılıkla uygulamanızın kullanıcı arayüzüyle daha alakalıdır.
Şekillerde görselleştirildiği gibi, ayrılma noktaları, cihaz ve yapılandırmalar açısından düzenleri düşünmeye devam etmenizi sağlar. Her boyut sınıfı ayrılma noktası, tipik cihaz senaryolarında çoğu durumu temsil eder. Bu da, ayrılma noktasına dayalı düzenlerinizin tasarımı üzerine düşünürken size yardımcı bir referans çerçevesi olabilir.
Beden sınıfı | Kesme noktası | Cihaz gösterimi |
---|---|---|
Küçük genişlik | genişlik < 600 dp | Telefonların% 99,96'sı dikey |
Orta genişlik | 600 dp ≤ genişlik < 840 dp | tabletlerin% 93,73'ü dikey,
Dikey olarak kullanılan en büyük katlanmamış iç ekranların |
Genişletildiği zaman sahip olduğu genişlik | genişlik ≥ 840 dp | Yatay kullanımdaki tabletlerin% 97,22'si,
yatay düzendeki en büyük katlanmamış iç ekranlar |
Küçük yükseklik | yükseklik < 480 dp | Telefonların% 99,78'i yatay |
Orta boy | 480 dp ≤ yükseklik < 900 dp | Tabletlerin% 96,56'sı,
Telefonların% 97,59'u dikey |
Genişletilmiş yükseklik | yükseklik ≥ 900 dp | Tabletlerin% 94,25'i dikey |
Boyut sınıflarını fiziksel cihaz olarak görselleştirmek faydalı olabilir, ancak pencere boyutu sınıfları açıkça cihaz ekranının boyutuna göre belirlenmez. Pencere boyutu sınıfları, isTablet türü mantık için tasarlanmamıştır. Pencere boyutu sınıfları, uygulamanın çalıştığı cihazın türünden bağımsız olarak uygulamanız tarafından kullanılabilen pencere boyutuna göre belirlenir. Bunun iki önemli etkisi vardır:
Fiziksel cihazlar belirli bir pencere boyutu sınıfını garanti etmez. Uygulamanızın kullanabileceği ekran alanı, birçok nedenden dolayı cihazın ekran boyutundan farklı olabilir. Mobil cihazlarda bölünmüş ekran modu, ekranı iki uygulama arasında bölüştürebilir. ChromeOS'te Android uygulamaları, rastgele şekilde yeniden boyutlandırılabilir olan serbest biçimli pencerelerde sunulabilir. Katlanabilir cihazlarda iki farklı boyutlu ekrana tek tek erişilebilir.
Pencere boyutu sınıfı, uygulamanızın kullanım ömrü boyunca değişebilir. Uygulamanız çalışırken cihaz yönü değişir, çoklu görevler ve katlama/açma işlevleri kullanılabilir ekran alanı miktarını değiştirebilir. Sonuç olarak, pencere boyutu sınıfı dinamik olur ve uygulamanızın kullanıcı arayüzü buna göre uyum sağlamalıdır.
Pencere boyutu sınıfları, Materyal Tasarım düzen kılavuzundaki kompakt, orta ve genişletilmiş ayrılma noktalarıyla uyumludur. Ek ekran alanından yararlanmak amacıyla belirli bir standart düzen kullanıp kullanmayacağınıza karar vermek gibi üst düzey uygulama düzeni kararları vermek için pencere boyutu sınıflarını kullanın.
Mevcut WindowSizeClass
değerini, JetpackWindowManager kitaplığı tarafından sağlanan WindowSizeClass#compute()
işlevini kullanarak hesaplayabilirsiniz. Aşağıdaki örnekte, pencere boyutu sınıfının nasıl hesaplanacağı ve pencere boyutu sınıfı değiştiğinde nasıl güncelleme alınacağı gösterilmektedir:
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. } }
Pencere boyutu sınıflarını test edin
Düzen değişiklikleri yaparken, özellikle kompakt, orta ve genişletilmiş ayrılma noktası genişlikleri olmak üzere tüm pencere boyutlarında düzen davranışını test edin.
Kompakt ekranlar için mevcut bir düzeniniz varsa öncelikle düzeninizi genişletilmiş genişlik boyut sınıfı için optimize edin. Bunun nedeni, bu boyut sınıfının ek içerik ve kullanıcı arayüzü değişiklikleri için en fazla alanı sağlamasıdır. Ardından, orta genişlikli sınıf için hangi düzenin anlamlı olacağına karar verin. Özel bir düzen eklemeyi düşünün.
Sonraki adımlar
Duyarlı/uyarlanabilir düzenler oluşturmak üzere pencere boyutu sınıflarının nasıl kullanılacağı hakkında daha fazla bilgi için aşağıdakilere bakın:
Oluşturma tabanlı düzenler için: Farklı ekran boyutlarını destekleme
Görünüme dayalı düzenler için: Görünümlerle duyarlı/uyarlanabilir tasarım
Bir uygulamayı tüm cihazlarda ve ekran boyutlarında mükemmel kılan özellikler hakkında daha fazla bilgi edinmek için aşağıdaki makaleleri inceleyin: