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 bütçenizi WindowSizeClass her bir arama terimi için WindowSizeClass#compute() Jetpack tarafından sağlanan işlev WindowManager kitaplığını tıklayın. Aşağıdaki örnek pencere boyutu sınıfının nasıl hesaplanacağını ve pencere boyutu sınıfı değişiklikleri:

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 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: