Pencere boyutu sınıfları

Pencere boyutu sınıfları, bir dizi incelenmiş görüntü alanı ayrılma noktalarından oluşan bir kümedir. duyarlı/uyarlanabilir düzenler tasarlama, geliştirme ve test etme. Kesme noktaları bakiyesi Sade bir düzen basitliği ve uygulamanızı benzersiz durumlar için optimize etme esnekliği.

Pencere boyutu sınıfları, uygulamanızın kullanabileceği görüntüleme alanını aşağıdaki gibi sınıflandırır: kompakt, orta veya genişletilmiş. Kullanılabilir genişlik ve yükseklik sınıflandırılır ayrı ayrı, örneğin herhangi bir anda, uygulamanızın iki farklı biri genişlik, diğeri yükseklik için bir arada. Kullanılabilir genişlik genellikle daha fazladır Dikey kaydırmanın yaygın kullanımı nedeniyle mevcut yükseklikten daha önemlidir. genişlik pencere boyutu sınıfı muhtemelen uygulamanızın kullanıcı arayüzüyle daha alakalıdır.

Şekil 1. Genişliğe dayalı pencere boyutu sınıflarının temsilleri.
'nı inceleyin.
Şekil 2. Yüksekliğe dayalı pencere boyutu sınıflarının temsilleri.

Şekillerde görselleştirildiği gibi, ayrılma noktaları, sonraki durumlarda düşünmeye cihazlar ve yapılandırmalar konusunda düzen hakkında. Her boyut sınıfı ayrılma noktası tipik cihaz senaryolarında çoğunlukla tasarımı hakkında düşündüğünüzde, her bir referans karesine düzenler.

Beden sınıfı Kesme noktası Cihaz temsili
Kompakt genişlik genişlik < 600dp Telefonların% 99,96'sı dikey
Orta genişlik 600 dp ≤ genişlik < 840dp Tabletlerin% 93,73'ü dikey modda,

dikey olarak en büyük açılmış iç ekranlar

Genişletilmiş genişlik genişlik ≥ 840 dp tabletlerin% 97,22'si yatay

yatay en büyük açılmış iç ekranlar

Kompakt yükseklik yükseklik < 480dp Yatay telefonların% 99,78'i
Orta yükseklik 480 dp ≤ yükseklik < 900dp Tabletlerin% 96,56'sı yatay

Telefonların% 97,59'u dikey

Genişletilmiş yükseklik yükseklik ≥ 900 dp Tabletlerin% 94,25'i dikey modda

Boyut sınıflarını fiziksel cihazlar olarak görselleştirmek yararlı olsa da, pencere boyutu sınıfları açıkça cihaz ekranının boyutuna göre belirlenmez. Pencere boyut sınıfları, isTablet türü mantığı için tasarlanmamıştır. Bunun yerine, boyut sınıfları, uygulamanızda kullanılabilen pencere boyutuna göre belirlenir uygulamanın çalıştığı cihaz türünden bağımsız olarak, iki önemli çıkarım:

  • Fiziksel cihazlar, belirli bir pencere boyutu sınıfını garanti etmez. İlgili içeriği oluşturmak için kullanılan uygulamanızın kullanabileceği ekran alanı, uygulamanızın ekran boyutundan farklı olabilir pek çok nedene bağlı. Mobil cihazlarda bölünmüş ekran modu ekranı iki uygulama arasında böler. Android uygulamaları ChromeOS'te isteğe bağlı olarak yeniden boyutlandırılabilen serbest biçimli pencerelerde sunulmalıdır. Katlanabilir cihazlarda farklı boyutlarda iki ekrana ayrı ayrı erişilebilir dokunarak veya açarak yapabilirsiniz.

  • Pencere boyutu sınıfı, uygulamanızın kullanım ömrü boyunca değişebilir. Uygulamanız çalışırken cihazın yönü değişir, çoklu görev ve Katlama/açma özelliği, mevcut ekran alanı miktarını değiştirebilir. Kullanıcı pencere boyutu sınıfı dinamiktir ve uygulamanızın kullanıcı arayüzünün buna göre hazırlar.

Pencere boyutu sınıfları, penceredeki kompakt, orta ve genişletilmiş ayrılma noktalarına eşlenir. Materyal Tasarım düzeni bakın. Üst düzey uygulama düzeni kararları almak için pencere boyutu sınıflarını kullanın örneğin, ek ekran alanı sağlar.

Mevcut WindowSizeClass değerini şunu kullanarak hesaplayın: currentWindowAdaptiveInfo() işlevine ait üst düzey androidx.compose.material3.adaptive kitaplığı. İşlev, windowSizeClass içeren WindowAdaptiveInfo örneği. İlgili içeriği oluşturmak için kullanılan aşağıdaki örnekte, pencere boyutu sınıfının nasıl hesaplanacağı ve daha yüksek dönüşüm hacmi elde etmek için pencere boyutu sınıfı her değiştiğinde güncellenir:

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

Pencere boyutu sınıflarıyla düzenleri yönetme

Pencere boyutu sınıfları, uygulamanızın düzenini görüntüleme alanı olarak değiştirmenize olanak tanır Örneğin bir cihaz katlandığında veya açıldığında cihaz yönü değiştiğinde veya uygulama penceresi çoklu pencerede yeniden boyutlandırıldığında yatırım yapmanız önemlidir.

Pencere boyutunu ileterek görüntü boyutu değişikliklerini işleme mantığını yerelleştirin tüm uygulama durumlarında olduğu gibi, "iç içe yerleştirilmiş" composable'lara kadar farklı sınıflar bulunuyor:

@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,
        /* ... */
    )
}

Pencere boyutu sınıflarını test etme

Düzen değişiklikleri yaparken düzen davranışını tüm pencere boyutlarında, özellikle küçük, orta ve genişletilmiş ayrılma noktası genişliklerinde kullanılabilir.

Kompakt ekranlar için mevcut bir düzeniniz varsa önce düzeninizi optimize edin genişletilmiş genişlik boyut sınıfı için uygundur. Çünkü bu boyut sınıfı en fazla alanı sağlar. göz atın. Ardından, hangi düzenin orta genişlikte boyut sınıfı; özel bir düzen eklemeyi düşünün.

Sonraki adımlar

Duyarlı/uyarlanabilir reklam oluşturmak için pencere boyutu sınıflarını kullanma hakkında daha fazla bilgi edinmek için aşağıdaki öğeleri inceleyin:

Bir uygulamayı tüm cihazlarda ve ekran boyutlarında mükemmel kılan özellikler hakkında daha fazla bilgi edinmek için bkz: