Pencere boyutu sınıfları, duyarlı/uyarlanabilir düzenler tasarlamanıza, geliştirmenize ve test etmenize yardımcı olan, önceden belirlenmiş bir dizi görüntü alanı kesme noktasıdır. Kesme noktaları, düzenin basitliğini uygulamanızı benzersiz durumlar için optimize etme esnekliğiyle dengeler.
Pencere boyutu sınıfları, uygulamanızın kullanabileceği ekran alanını kompakt, orta veya genişletilmiş olarak sınıflandırır. Kullanılabilir genişlik ve yükseklik ayrı olarak sınıflandırılır. Bu nedenle, uygulamanızda her zaman biri genişlik, diğeri yükseklik için olmak üzere iki pencere boyutu sınıfı bulunur. Dikey kaydırma özelliğinin yaygın olması nedeniyle kullanılabilir genişlik genellikle kullanılabilir yükseklikten daha önemlidir. Bu nedenle, genişlik pencere boyutu sınıfı, uygulamanızın kullanıcı arayüzüyle daha alakalı olabilir.
Şekillerde görüldüğü gibi, kesme noktaları, düzenleri cihazlar ve yapılandırmalar açısından düşünmeye devam etmenize olanak tanır. Her boyut sınıfı kesme noktası, tipik cihaz senaryoları için çoğunluk durumunu temsil eder. Bu, kesme noktasına dayalı düzenlerinizin tasarımını düşünürken faydalı bir referans çerçevesi olabilir.
| Beden sınıfı | Kesme noktası | Cihaz temsili |
|---|---|---|
| Kompakt genişlik | genişlik < 600 dp | Dikey moddaki telefonların% 99,96'sı |
| Orta genişlik | 600 dp ≤ genişlik < 840 dp | Tabletlerin% 93,73'ü dikey,
Portre modunda en büyük katlanmamış iç ekranlar |
| Genişletilmiş genişlik | genişlik ≥ 840 dp | Tabletlerin% 97,22'si yatay,
yatay olarak açılmış en büyük iç ekranlar |
| Kompakt yükseklik | yükseklik < 480 dp | Telefonların% 99,78'i yatay |
| 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ı fiziksel cihazlar olarak görselleştirmek yararlı olsa da pencere boyutu sınıfları, cihaz ekranının boyutuna göre 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ın türüne bakılmaksızın uygulamanızın kullanabileceği pencere boyutuna göre belirlenir. Bu durum iki önemli sonucu doğurur:
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ölebilmektedir. ChromeOS'te Android uygulamaları, isteğe bağlı olarak yeniden boyutlandırılabilen masaüstü tipi pencerelerde sunulabilir. Katlanabilir cihazlarda, cihazı katlayarak veya açarak ayrı ayrı erişilebilen iki farklı boyutta ekran bulunabilir.
Pencere boyutu sınıfı, uygulamanızın kullanım ömrü boyunca değişebilir. Uygulamanız çalışırken cihaz yönü değişiklikleri, çoklu görev yürütme ve katlama/açma işlemleri, kullanılabilir ekran alanını değiştirebilir. Sonuç olarak, pencere boyutu sınıfı dinamiktir 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 yönergelerindeki kompakt, orta ve genişletilmiş ara noktalarla eşlenir. 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ı almak için pencere boyutu sınıflarını kullanın.
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
Sayfa düzeninde değişiklik yaparken düzen davranışını tüm pencere boyutlarında, özellikle de kompakt, orta ve genişletilmiş kesme noktası genişliklerinde test edin.
Kompakt ekranlar için mevcut bir düzeniniz varsa düzeninizi önce genişletilmiş genişlik boyut sınıfı için optimize edin. 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şlik boyut sınıfı için hangi düzenin uygun olduğuna karar verin. Özel bir düzen ekleyebilirsiniz.
Sonraki adımlar
Duyarlı/uyarlanabilir düzenler oluşturmak için pencere boyutu sınıflarının nasıl kullanılacağı hakkında daha fazla bilgi edinmek için aşağıdakilere bakın:
Oluşturma tabanlı düzenler için: Farklı ekran boyutlarını destekleme
Görüntüleme tabanlı düzenler için: Görüntüleme sayısına sahip duyarlı/uyarlanabilir tasarım
Bir uygulamanın tüm cihaz ve ekran boyutlarında mükemmel olmasını sağlayan özellikler hakkında daha fazla bilgi edinmek için: