Duyarlı/uyarlanabilir düzenler, ekran boyutundan bağımsız olarak optimize edilmiş bir kullanıcı deneyimi sunar. Görünüme dayalı uygulamanızın tüm ekran boyutlarını, yönlerini ve yapılandırmalarını (çoklu pencere modu gibi yeniden boyutlandırılabilir yapılandırmalar dahil) desteklemesini sağlamak için duyarlı/uyarlanabilir düzenler uygulayın.
Duyarlı tasarım
Çeşitli cihaz form faktörlerini desteklemenin ilk adımı, uygulamanızın kullanabileceği ekran alanı miktarındaki değişikliklere duyarlı bir düzen oluşturmaktır.
ConstraintLayout
Duyarlı bir düzen oluşturmanın en iyi yolu, kullanıcı arayüzünüz için temel düzen olarak
ConstraintLayout
kullanmaktır. ConstraintLayout, düzen içindeki diğer görünümlerle olan uzamsal ilişkilere göre her görünümün konumunu ve boyutunu belirtmenize olanak tanır. Böylece, ekran alanı değiştikçe tüm görünümler birlikte taşınabilir ve yeniden boyutlandırılabilir.
ConstraintLayout ile düzen oluşturmanın en kolay yolu Android Studio'daki Düzen Düzenleyici'yi kullanmaktır. Layout Editor, yeni görünümleri düzene sürüklemenize, üst ve eşdüzey görünümlere göre kısıtlamalar uygulamanıza ve görünüm özelliklerini ayarlamanıza olanak tanır. Tüm bunları herhangi bir XML'yi manuel olarak düzenlemeden yapabilirsiniz.
ConstraintLayout gösteriliyor.
Daha fazla bilgi için ConstraintLayout ile Duyarlı Kullanıcı Arayüzü Oluşturma başlıklı makaleyi inceleyin.
Duyarlı genişlik ve yükseklik
Düzeninizin farklı ekran boyutlarına duyarlı olmasını sağlamak için görünüm bileşenlerinin genişliği ve yüksekliği için sabit kodlanmış değerler yerine wrap_content, match_parent veya 0dp (match constraint) kullanın:
wrap_content: Görünüm, boyutunu içerdiği içeriğe uyacak şekilde ayarlar.match_parent: Görünüm, üst görünüm içinde mümkün olduğunca genişler.0dp (match constraint):ConstraintLayoutiçinde,match_parentile benzer şekilde. Görünüm, görünümün kısıtlamaları dahilindeki tüm alanı kaplar.
Örneğin:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
Şekil 4'te, cihaz yönü değiştiğinde ekran genişliği değişirken TextView öğesinin genişliğinin ve yüksekliğinin nasıl ayarlandığı gösterilmektedir.
TextView.
TextView, genişliğini tüm kullanılabilir alanı dolduracak şekilde (match_parent), yüksekliğini ise içerdiği metnin yüksekliğinin gerektirdiği alan kadar (wrap_content) ayarlar. Bu sayede görünüm, farklı ekran boyutlarına ve farklı miktarlardaki metinlere uyum sağlayabilir.
LinearLayout kullanıyorsanız görünüm ağırlığına göre alt görünümleri de genişletebilirsiniz. Böylece görünümler, mevcut alanı orantılı olarak doldurur. Ancak, iç içe yerleştirilmiş bir LinearLayout içinde ağırlık kullanılması, sistemin her görünümün boyutunu belirlemek için birden fazla düzen geçişi yapmasını gerektirir ve bu da kullanıcı arayüzü performansını yavaşlatır.
ConstraintLayout, LinearLayout ile mümkün olan düzenlerin neredeyse tamamını performans etkisine yol açmadan oluşturabilir. Bu nedenle, iç içe yerleştirilmiş LinearLayout öğelerinizi ConstraintLayout öğelerine dönüştürün. Ardından kısıtlama zincirleriyle ağırlıklı düzenler tanımlayabilirsiniz.
Uyarlanabilir tasarım
Uygulamanızın düzeni, farklı ekran boyutlarına her zaman duyarlı olmalıdır. Ancak duyarlı bir düzen bile her cihazda veya çok pencereli mod ekranında en iyi kullanıcı deneyimini sunamaz. Örneğin, telefon için tasarladığınız kullanıcı arayüzü, tablette muhtemelen optimum kullanıcı deneyimi sunmaz. Uyarlanabilir tasarım, farklı ekran boyutları için optimize edilmiş alternatif düzenler sunar.
Liste-ayrıntı düzenleri için SlidingPaneLayout
Liste-ayrıntı düzeni kullanıcı arayüzü genellikle farklı boyutlardaki ekranlarda farklı bir kullanıcı deneyimi sunar. Büyük ekranlarda liste ve ayrıntı bölmeleri genellikle yan yanadır. Listedeki bir öğe seçildiğinde, kullanıcı arayüzü değiştirilmeden ayrıntı bölmesinde öğe bilgileri gösterilir. İki bölme yan yana kalır. Ancak küçük ekranlarda iki bölme ayrı ayrı gösterilir ve her bölme ekran alanının tamamını kaplar. Liste bölmesindeki bir öğe seçildiğinde, ayrıntı bölmesi (seçili öğenin bilgilerini içerir) liste bölmesinin yerini alır. Geri gezinme, ayrıntı bölmesini liste ile değiştirir.
SlidingPaneLayout
İki kullanıcı deneyiminden hangisinin geçerli pencere boyutu için uygun olduğunu belirleme mantığını yönetir:
<?xml version="1.0" encoding="utf-8"?>
<androidx.slidingpanelayout.widget.SlidingPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
<androidx.fragment.app.FragmentContainerView
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:defaultNavHost="true"
app:navGraph="@navigation/item_navigation" />
</androidx.slidingpanelayout.widget.SlidingPaneLayout>
SlidingPaneLayout içinde yer alan iki görünümün layout_width ve layout_weight özellikleri, SlidingPaneLayout davranışını belirler. Örnekte, pencere her iki görünümü de gösterecek kadar büyükse (en az 580 dp genişliğinde) panolar yan yana gösterilir. Ancak pencere genişliği 580 dp'den küçükse paneller, uygulama penceresinin tamamını ayrı ayrı kaplamak için birbirinin üzerine kayar.
Pencere genişliği, belirtilen toplam minimum genişlikten (580 dp) büyükse iki bölmeyi orantılı olarak boyutlandırmak için layout_weight değerleri kullanılabilir. Örnekte, ağırlığı olmadığı için liste bölmesi her zaman 280 dp genişliğindedir.
Ancak görünümün layout_weight ayarı nedeniyle ayrıntı bölmesi, 580 dp'nin ötesindeki yatay alanı her zaman doldurur.
Alternatif düzen kaynakları
Kullanıcı arayüzü tasarımınızı çok farklı ekran boyutlarına uyarlamak için kaynak niteleyicileri ile tanımlanan alternatif düzenleri kullanın.
Uygulamanızın kaynak kodunda ek res/layout/ dizinler oluşturarak uyarlanabilir, ekrana özel düzenler sağlayabilirsiniz. Farklı bir düzen gerektiren her ekran yapılandırması için bir dizin oluşturun. Ardından, layout dizin adına bir ekran yapılandırması niteleyicisi ekleyin (örneğin, 600 dp kullanılabilir genişliğe sahip ekranlar için layout-w600dp).
Yapılandırma niteleyicileri, uygulamanızın kullanıcı arayüzü için kullanılabilen görünür ekran alanını temsil eder. Sistem, uygulamanızın düzenini seçerken sistem süslemelerini (ör. gezinme çubuğu) ve pencere yapılandırma değişikliklerini (ör. çoklu pencere modu) dikkate alır.
Android Studio'da alternatif düzenler oluşturmak için Görünümlerle kullanıcı arayüzü geliştirme bölümündeki Farklı ekranlar için optimizasyon yapmak üzere düzen varyantlarını kullanma başlıklı makaleyi inceleyin.
En küçük genişlik niteleyicisi
En küçük genişlik ekran boyutu niteleyicisi, yoğunluktan bağımsız pikseller (dp) cinsinden ölçülen minimum genişliğe sahip ekranlar için alternatif düzenler sağlamanıza olanak tanır.
Android, ekran boyutunu dp ölçüsü olarak tanımlayarak farklı piksel yoğunlukları konusunda endişelenmeden belirli ekran boyutları için tasarlanmış düzenler oluşturmanıza olanak tanır.
Örneğin, farklı dizinlerde dosyanın farklı sürümlerini oluşturarak telefonlar ve tabletler için optimize edilmiş main_activity adlı bir düzen oluşturabilirsiniz:
res/layout/main_activity.xml # For phones (smaller than 600dp smallest width) res/layout-sw600dp/main_activity.xml # For 7" tablets (600dp wide or wider)
En küçük genişlik niteleyicisi, cihazın mevcut yönünden bağımsız olarak ekranın iki tarafının en küçüğünü belirtir. Bu nedenle, düzeniniz için kullanılabilen genel görüntü boyutunu belirtmenin bir yoludur.
Diğer en küçük genişlik değerlerinin tipik ekran boyutlarıyla nasıl eşleştiğini aşağıda görebilirsiniz:
- 320 dp: Küçük telefon ekranı (240x320 ldpi, 320x480 mdpi, 480x800 hdpi vb.)
- 480 dp: Büyük telefon ekranı ~5 inç (480x800 mdpi)
- 600 dp: 7 inç tablet (600x1024 mdpi)
- 720 dp: 10 inç tablet (720x1280 mdpi, 800x1280 mdpi vb.)
Aşağıdaki şekilde, farklı ekran genişliklerinin farklı ekran boyutları ve yönleriyle nasıl eşleştiği daha ayrıntılı olarak gösterilmektedir.
En küçük genişlik niteleyicisi için değerler dp'dir. Çünkü önemli olan, sistemin piksel yoğunluğunu hesaba katmasından sonra kullanılabilir ekran alanının miktarıdır (ham piksel çözünürlüğü değil).
En küçük genişlik gibi kaynak niteleyicileri kullanarak belirttiğiniz boyutlar gerçek ekran boyutları değildir. Bunun yerine, boyutlar uygulamanızın penceresinde kullanılabilen dp birimlerindeki genişliği veya yüksekliği belirtir. Android sistemi, ekranın bir kısmını sistem kullanıcı arayüzü için kullanabilir (ör. ekranın altındaki sistem çubuğu veya üstteki durum çubuğu). Bu nedenle, ekranın bir kısmı düzeniniz için kullanılamayabilir. Uygulamanız çoklu pencere modunda kullanılıyorsa yalnızca uygulamayı içeren pencerenin boyutuna erişebilir. Pencere yeniden boyutlandırıldığında, yeni pencere boyutuyla birlikte yapılandırma değişikliği tetiklenir. Bu değişiklik, sistemin uygun bir düzen dosyası seçmesini sağlar. Bu nedenle, bildirdiğiniz kaynak niteleyici boyutları yalnızca uygulamanızın ihtiyaç duyduğu alanı belirtmelidir. Sistem, düzeniniz için alan sağlarken sistem kullanıcı arayüzü tarafından kullanılan tüm alanları hesaba katar.
Kullanılabilir genişlik niteleyicisi
Düzeni ekranın en küçük genişliğine göre değiştirmek yerine, kullanılabilir genişlik veya yüksekliğe göre değiştirmek isteyebilirsiniz. Örneğin, ekranın en az 600 dp genişlik sağladığı durumlarda iki panelli bir düzen kullanmak isteyebilirsiniz. Bu genişlik, cihazın yatay veya dikey yönde olmasına bağlı olarak değişebilir. Bu durumda, mevcut genişlik niteleyicisini aşağıdaki gibi kullanmanız gerekir:
res/layout/main_activity.xml # For phones (smaller than 600dp available width)
res/layout-w600dp/main_activity.xml # For 7" tablets or any screen with 600dp available width
# (possibly landscape phones)
Uygulamanızda kullanılabilir yükseklik önemliyse kullanılabilir yükseklik niteleyicisini kullanabilirsiniz. Örneğin, layout-h600dp ekran yüksekliği en az 600 dp olan ekranlar için.
Yön niteleyicileri
Yalnızca en küçük genişlik ve kullanılabilir genişlik niteleyicilerinin kombinasyonlarını kullanarak tüm boyut varyasyonlarını destekleyebilseniz de kullanıcı dikey ve yatay yön arasında geçiş yaptığında kullanıcı deneyimini de değiştirmek isteyebilirsiniz.
Bunun için düzen dizini adlarınıza port veya land niteleyicilerini ekleyebilirsiniz. Yalnızca yön niteleyicilerinin boyut niteleyicilerinden sonra geldiğinden emin olun.
Örneğin:
res/layout/main_activity.xml # For phones res/layout-land/main_activity.xml # For phones in landscape res/layout-sw600dp/main_activity.xml # For 7" tablets res/layout-sw600dp-land/main_activity.xml # For 7" tablets in landscape
Tüm ekran yapılandırma niteleyicileri hakkında daha fazla bilgi için Uygulama kaynaklarına genel bakış başlıklı makaleyi inceleyin.
Pencere boyutu sınıfları
Pencere boyutu sınıfları, uyarlanabilir düzenler oluşturmanıza yardımcı olan görüntü alanı kesme noktalarıdır. Ayrılma noktaları, uygulamanızın kullanabileceği ekran alanını compact (sıkıştırılmış), medium (orta) veya expanded (genişletilmiş) olarak tanımlar. Genişlik ve yükseklik ayrı ayrı belirtilir. Bu nedenle, uygulamanızın her zaman genişlik için bir pencere boyutu sınıfı ve yükseklik için bir pencere boyutu sınıfı vardır.
Uyarlanabilir düzenleri programatik olarak uygulamak için aşağıdakileri yapın:
- Pencere boyutu sınıfı kesme noktalarına göre düzen kaynakları oluşturma
- Jetpack WindowManager kitaplığındaki
WindowSizeClass#compute()işlevini kullanarak uygulamanızın genişlik ve yükseklik pencere boyutu sınıflarını hesaplayın. - Mevcut pencere boyutu sınıfları için düzen kaynağını genişletir.
Daha fazla bilgi için Pencere boyutu sınıfları başlıklı makaleyi inceleyin.
Parçaları kullanarak modüler hale getirilmiş kullanıcı arayüzü bileşenleri
Uygulamanızı birden fazla ekran boyutu için tasarlarken kullanıcı arayüzü davranışını etkinlikler arasında gereksiz yere kopyalamadığınızdan emin olmak için kullanıcı arayüzü mantığınızı ayrı bileşenlere ayırmak üzere parçalar kullanın. Ardından, büyük ekranlarda çok panelli düzenler oluşturmak için parçaları birleştirebilir veya küçük ekranlarda parçaları ayrı etkinliklere yerleştirebilirsiniz.
Örneğin, liste-ayrıntı kalıbı (yukarıdaki SlidingPaneLayout bölümüne bakın) listeyi içeren bir parça ve liste öğesi ayrıntılarını içeren başka bir parça ile uygulanabilir. Büyük ekranlarda parçalar yan yana, küçük ekranlarda ise ekranı dolduracak şekilde ayrı ayrı gösterilebilir.
Daha fazla bilgi edinmek için Parçalar'a genel bakış başlıklı makaleyi inceleyin.
Etkinlik yerleştirme
Uygulamanız birden fazla etkinlikten oluşuyorsa etkinlik yerleştirme, kolayca uyarlanabilir bir kullanıcı arayüzü oluşturmanıza olanak tanır.
Etkinlik yerleştirme, bir uygulamanın görev penceresinde aynı anda birden fazla etkinliği veya aynı etkinliğin birden fazla örneğini gösterir. Büyük ekranlarda etkinlikler yan yana, küçük ekranlarda ise üst üste gösterilebilir.
Sistem tarafından, görüntü boyutuna göre uygun sunumu belirlemek için kullanılan bir XML yapılandırma dosyası oluşturarak uygulamanızın etkinliklerini nasıl göstereceğini belirlersiniz. Alternatif olarak, Jetpack WindowManager API çağrıları yapabilirsiniz.
Etkinlik yerleştirme, cihaz yönlendirme değişikliklerini ve katlanabilir cihazları, cihaz döndürüldüğünde veya katlanıp açıldığında etkinlikleri üst üste yerleştirmeyi ve üst üste yerleştirilmiş etkinlikleri kaldırmayı destekler.
Daha fazla bilgi için Etkinlik yerleştirme başlıklı makaleyi inceleyin.
Ekran boyutları ve en boy oranları
Kullanıcı arayüzünüzün doğru şekilde ölçeklendiğinden emin olmak için uygulamanızı çeşitli ekran boyutlarında ve en-boy oranlarında test edin.
Android 10 (API düzeyi 29) ve sonraki sürümler, geniş bir en boy oranı aralığını destekler. Katlanabilir form faktörleri, katlandığında 21:9 gibi uzun ve dar ekranlardan açıldığında 1:1 kare en boy oranına kadar değişebilir.
Uygulamalarınızın mümkün olduğunca çok cihazla uyumlu olmasını sağlamak için aşağıdaki ekran en-boy oranlarının mümkün olduğunca çoğunda test edin:
Test etmek istediğiniz tüm farklı ekran boyutlarına sahip cihazlara erişiminiz yoksa Android Emulator'ı kullanarak neredeyse tüm ekran boyutlarını taklit edebilirsiniz.
Gerçek bir cihazda test yapmayı tercih ediyorsanız ancak cihazınız yoksa Google veri merkezindeki cihazlara erişmek için Firebase Test Lab'i kullanabilirsiniz.
Ek kaynaklar
- Materyal Tasarım — Düzeni anlama