Farklı ekran boyutlarına yönelik destek, en fazla sayıda kullanıcının ve en fazla çeşitli cihazın uygulamanıza erişmesini sağlar.
Mümkün olduğunca çok sayıda 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 bir kullanıcı deneyimi sunar. Böylece uygulamanız telefonlar, tabletler, katlanabilir cihazlar, ChromeOS cihazlar, 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, uygulamanızı benzersiz durumlar için optimize etme esnekliğiyle 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, biri 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 mevcut yükseklikten daha önemlidir. Bu nedenle, genişlik pencere boyutu sınıfı muhtemelen uygulamanızın kullanıcı arayüzüyle daha alakalıdır.


Şekillerde görselleştirildiği gibi, ayrılma noktaları, düzenler üzerinde cihaz ve yapılandırmalar üzerine düşünmeye devam etmenize olanak tanır. 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 size yardımcı bir referans çerçevesi olabilir.
Beden sınıfı | Kesme noktası | Cihaz temsili |
---|---|---|
Kompakt 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 büyük, katlanmamış iç ekranlar |
Genişletilmiş genişlik | genişlik ≥ 840 dp | tabletlerin% 97,22'si yatay,
yatay olarak katlanmış büyük iç mekandaki sergiler |
Kompakt yükseklik | yükseklik < 480 dp | Telefonların% 99,78'i yatay modda |
Orta boy | 480 dp ≤ yükseklik < 900 dp | Tabletlerin% 96,56'sı yatay,
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 cihazlar olarak görselleştirilmesi faydalı olabilir ancak pencere boyutu sınıfları, cihaz ekranının boyutuna göre açıkça belirlenmez. Pencere boyutu sınıfları, isTablet türü mantık için tasarlanmamıştır. Bunun yerine, pencere boyutu sınıfları uygulamanın çalıştığı cihaz 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. Bölünmüş ekran modu, mobil cihazlarda 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 ayrı ayrı erişilebilir ve cihaz katlanabilir veya açılabilir.
Pencere boyutu sınıfı, uygulamanızın kullanım ömrü boyunca değişebilir. Uygulamanız çalışırken cihaz yönü değişikliği, çoklu görev 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ıyla eşleşir. Ek ekran alanından yararlanmak için 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.
Jetpack WindowManager kitaplığı tarafından sağlanan WindowSizeClass#compute()
işlevini kullanarak geçerli WindowSizeClass
değerini 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 almayla 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özlemledikten sonra, düzeninizi mevcut pencere boyutu sınıfına göre değiştirmeye başlayabilirsiniz.
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 ekranlara yönelik 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çerikler ve kullanıcı arayüzü değişiklikleri için daha fazla alan sağlamasıdır. Ardından, orta genişlikli beden sınıfı için hangi düzenin anlamlı olacağına karar verin; özel bir düzen ekleyebilirsiniz.
Sonraki adımlar
Duyarlı/uyarlanabilir düzenler oluşturmak üzere pencere boyutu sınıflarını kullanma hakkında daha fazla bilgi edinmek için aşağıdakilere bakın:
Oluştur tabanlı düzenler için: Uyarlanabilir düzenler oluşturma
Görünüme dayalı düzenler için: Görünümle uyumlu/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 makalelere bakın: