Farklı ekran boyutlarını destekleme

Farklı ekran boyutlarına yönelik destek, uygulamanıza en geniş cihaz yelpazesi ve en fazla sayıda kullanıcı tarafından erişim sağlar.

Mümkün olduğunca çok ekran boyutunu desteklemek için uygulama düzenlerinizi duyarlı ve uyarlanabilir olacak şekilde tasarlayın. Duyarlı/uyarlanabilir düzenler, ekran boyutundan bağımsız olarak optimize edilmiş bir kullanıcı deneyimi sunar. Böylece uygulamanız telefonlara, tabletlere, katlanabilir cihazlara, ChromeOS cihazlara, dikey ve yatay yönlere ve çoklu pencere modu gibi yeniden boyutlandırılabilir yapılandırmalara uyum sağlayabilir.

Pencere boyutu sınıfları

Pencere boyutu sınıfları, duyarlı/uyarlanabilir düzenler tasarlamanıza, geliştirmenize ve test etmenize yardımcı olan özenli görüntü alanı ayrılma noktalarıdır. Ayrılma noktaları, düzen sadeliğini ve uygulamanızı benzersiz durumlar için optimize etme esnekliğini 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ılabilen genişlik ve yükseklik ayrı olarak sınıflandırılır. Bu nedenle, uygulamanız herhangi bir zamanda biri genişlik, diğeri yükseklik için olmak üzere iki pencere boyutu sınıfına sahiptir. 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.

Şekil 1. Genişliğe dayalı pencere boyutu sınıflarının gösterimleri.
Şekil 2. Yüksekliğe dayalı pencere boyutu sınıflarının gösterimleri.

Ş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, ayrılma noktasına dayalı düzenlerinizin tasarımı üzerine düşünürken yararlı 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ın fiziksel cihaz olarak görselleştirilmesi 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ümlendirebilir. ChromeOS'te Android uygulamaları, rastgele şekilde yeniden boyutlandırılabilir olan serbest biçimli pencerelerde sunulabilir. Katlanabilir cihazlarda iki farklı boyutta ekrana ve cihaz katlayarak veya açarak ayrı ayrı 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ştiğinde, çoklu görev gerçekleştirme ve katlama/açma, kullanılabilir ekran alanı miktarını değiştirebilir. Bunun sonucunda, pencere boyutu sınıfı dinamik olur ve uygulamanızın kullanıcı arayüzü buna göre uyarlanmalıdır.

Pencere boyutu sınıfları, Materyal Tasarım duyarlı düzen ızgarasındaki düzen ayrılma noktalarına eşlenir. 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.

Geçerli WindowSizeClass değerini, Jetpack WindowManager kitaplığı tarafından sağlanan WindowSizeClass#compute() işlevini kullanarak hesaplayabilirsiniz. Aşağıda, pencere boyutu sınıfının nasıl hesaplanacağı ve pencere boyutu sınıfı değiştiğinde güncelleme alma ile ilgili bir örnek 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.
    }
}

Uygulamanızdaki pencere boyutu sınıflarını gözlemlemeye başladıktan sonra, düzeninizi mevcut pencere boyutu sınıfına göre değiştirmeye hazırsınız demektir.

Düzenler ve pencere boyutu sınıfları

Düzen değişiklikleri yaparken, tüm pencere boyutlarında, özellikle de kompakt, orta ve genişletilmiş ayrılma noktası genişliklerinde 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 çünkü bu boyut sınıfı ek içerik ve kullanıcı arayüzü değişiklikleri için en fazla alanı sağlar. Ardından, orta genişlikli beden 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ı kullanma hakkında daha fazla bilgi için aşağıdakilere bakın:

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