Duyarlı/uyarlanabilir düzenler, ne olursa olsun optimize edilmiş bir kullanıcı deneyimi sağlar. ekran boyutu. Dinamik Arama Ağı Reklamları için duyarlı/uyarlanabilir düzenler tüm ekran boyutlarını, yönlerini destekleyen ve görüntülemeye dayalı çoklu pencere gibi yeniden boyutlandırılabilir yapılandırmalar dahil mod'u seçin.
Duyarlı tasarım
Çeşitli cihaz form faktörlerini desteklemenin ilk adımı, kullanılabilir görüntüleme alanı miktarındaki farklılıklara duyarlı bir düzene sahip olur ekleyin.
Sınırlama Düzeni
Duyarlı düzen oluşturmanın en iyi yolu
ConstraintLayout
kullanmanızı öneririz. ConstraintLayout, reklam öğelerinin
görünümün diğerleriyle uzamsal ilişkilere göre
inceleyebilirsiniz. Daha sonra tüm görünümler, ilk hâliyle birlikte
alan değişikliklerini görüntüleyin.
ConstraintLayout ile bir düzen oluşturmanın en kolay yolu Düzen kullanmaktır
Android Studio'daki düzenleyici. Düzen Düzenleyici, yeni görünümleri şuraya sürüklemenizi sağlar:
düzeni, üst ve kardeş görünümlere göre kısıtlamalar uygulama ve görünümü ayarlama
XML'yi manuel olarak düzenlemeden
tüm özelliklerini kullanabilirsiniz.
ConstraintLayout
Daha fazla bilgi için şununla Duyarlı Kullanıcı Arayüzü Oluşturmak: ConstraintLayout (Kısıtlama Düzeni) olarak ayarlayın.
Duyarlı genişlik ve yükseklik
Düzeninizin farklı görüntülü reklam boyutlarına duyarlı olmasını sağlamak için
Genişlik ve için wrap_content, match_parent veya 0dp (match constraint)
sabit kodlu değerler yerine görünüm bileşenlerinin yüksekliğini bulun:
wrap_content: Görünüm, boyutunu görünümün içerdiği içeriğe sığacak şekilde ayarlar.match_parent: Görünüm, üst görünümde mümkün olduğunca genişler.0dp (match constraint):ConstraintLayoutiçinde, şuna benzer:match_parent. Görünüm, görünümün görünümündeki tüm mevcut alanı kısıtlar.
Örnek:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum" />
Şekil 4'te, TextView genişliğinin ve yüksekliğinin ekran olarak nasıl ayarlandığı gösterilmektedir
cihaz yönüne göre genişlik değişiklikleri.
TextView.
TextView, genişliğini mevcut tüm alanı (match_parent) dolduracak şekilde ayarlar ve
yüksekliğinin, içerdiği mevcut alanın yüksekliğinin gerektirdiği kadar boşluk
görünümün farklı ekranlara uyarlanmasını sağlayan metin (wrap_content)
ve farklı miktarlarda metin sığdırır.
LinearLayout kullanıyorsanız:
çocuklar için görüntüleme sayısını düzene göre
ağırlık da ekleyin. Böylece, görüntülemeler orantılı olarak
kullanılabilir alan. Bununla birlikte, iç içe yerleştirilmiş LinearLayout öğesinde ağırlık kullanmak için
boyutu belirlemek için sistemin birden çok düzen geçişi gerçekleştirmesi
kullanıcı arayüzü performansını yavaşlatır.
ConstraintLayout, mümkün olan neredeyse tüm düzenleri
Performans üzerindeki etkisi olmadan LinearLayout. Bu nedenle, iç içe yerleştirilmiş öğelerinizi
LinearLayout -
ConstraintLayout. Ardından
kısıtlama ile ağırlıklı düzenleri tanımlayabilir
zincirler.
Uyarlanabilir tasarım
Uygulamanızın düzeni, farklı ekran boyutlarına her zaman duyarlı olmalıdır. Ancak duyarlı bir düzen bile Google Ads'de en iyi kullanıcı deneyimini her cihazda veya çoklu pencere modu ekranında kullanabilirsiniz. Örneğin, kullandığınız bir Android telefon için tasarlanmışsa, büyük olasılıkla tablete yerleştiriyoruz. Uyarlanabilir tasarım, farklı ağlar için optimize edilmiş alternatif düzenler sağlar. görüntüleme boyutları.
Liste ayrıntıları kullanıcı arayüzleri için SlidingPaneLayout
Liste ayrıntısı kullanıcı arayüzü, genellikle boyutlarda ekranlar. Büyük ekranlarda, liste ve ayrıntı bölmeleri genellikle yan yanadır. Listedeki bir öğe seçildiğinde öğe bilgileri kullanıcı arayüzü değiştirilmeden ayrıntı bölmesinde gösterilir; iki bölme yan yana gösterilir. Ancak küçük ekranlarda iki bölme ayrı ayrı gösterilir. her bölme, görüntüleme alanının tamamını kaplar. Liste bölmesindeki bir öğe seçili öğenin bilgilerini içeren ayrıntı bölmesi, yeni bir iletişim kutusu görüntülenir. Geri gezinme, ayrıntı bölmesini listeyle değiştirir.
SlidingPaneLayout
hangi iki kullanıcı deneyiminden hangisinin etkili olduğunu
mevcut pencere boyutuna uygun:
<?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>
Bu iki görünümün layout_width ve layout_weight özellikleri
SlidingPaneLayout davranışını SlidingPaneLayout belirler. Örnekte,
Pencere her iki görünümün de gösterileceği kadar büyükse (en az 580 dp genişlikte)
bölmeler yan yana görüntülenir. Ancak pencere genişliği
580 dp, bölmeler uygulamanın tamamını ayrı ayrı kaplayacak şekilde birbirlerinin üzerine kaydırılır
penceresini kapatın.
Pencere genişliği, belirtilen toplam minimum genişlikten (580 dp) daha büyükse
layout_weight değerleri, iki bölmeyi orantılı olarak boyutlandırmak için kullanılabilir.
Örneğin, liste bölmesi, bir ağırlığa sahip olmadığı için her zaman 280 dp genişliğindedir.
Ancak ayrıntı bölmesi 580 dp dışındaki yatay alanları her zaman doldurur.
görünümün layout_weight ayarına benzer.
Alternatif düzen kaynakları
Kullanıcı arayüzü tasarımınızı çok çeşitli ekran boyutlarına uyarlamak için alternatif düzenler kullanın kaynak tarafından niteleyicileri dahil edin.
Ek öğeler oluşturarak uyarlanabilir, ekrana özgü düzenler sağlayabilirsiniz.
Uygulamanızın kaynak kodunda res/layout/ dizin. Her biri için bir dizin oluşturun
gerektiren başka bir ekran yapılandırması. Ardından bir ekran ekleyin
layout dizin adına bir yapılandırma niteleyicisi (örneğin,
600 dp kullanılabilir genişliğe sahip ekranlar için layout-w600dp).
Yapılandırma niteleyicileri, her bir öğenin kullanılabilecek görünür görüntüleme alanını en iyi uygulamaları paylaşacağız. Sistem, herhangi bir sistem süslemesini (örneğin, gezinme çubuğu) ve pencere yapılandırma değişiklikleri (ör. çoklu pencere) mod) tıklayın.
Android Studio'da alternatif düzenler oluşturmak için Düzen varyantlarını kullanarak optimize etmek için kullanabileceğiniz Views ile kullanıcı arayüzü geliştirme.
En küçük genişlik niteleyici
En küçük genişlik ekran boyutu niteleyicisi, çeşitli seçenekler için yoğunluktan bağımsız olarak ölçülen minimum genişliğe sahip ekranlara yönelik düzenler piksel (dp).
Android, ekran boyutunu dp ölçüsü olarak tanımlayarak reklam oluşturmanıza olanak tanır. özel ekran boyutları için tasarlanmış ekran ve reklam düzenlerinin yoğunlukları vardır.
Örneğin, main_activity adlı ve şunun için optimize edilmiş bir düzen oluşturabilirsiniz:
dosyaların farklı versiyonlarını oluşturarak telefonların ve tabletlerin
dizinler:
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, ekranın iki kenarından en küçüğünü belirtir. cihazın mevcut yönünden bağımsız olarak, cihaz kaymasının genel ekran boyutunu artırabilirsiniz.
En küçük genişlik değerlerinin tipik ekran boyutlarına nasıl karşılık geldiği aşağıda açıklanmıştır:
- 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 dp'lerinin nasıl olduğuyla ilgili daha ayrıntılı bir görünüm gösterilmektedir farklı ekran boyutlarına ve yönlerine karşılık geldiğini gösterir.
En küçük genişlik niteleyicisinin değerleri dp'dir, çünkü önemli olan sistem piksel yoğunluğunu hesaba kattıktan sonra kullanılabilen görüntüleme alanı miktarı (ham piksel çözünürlüğü değil).
En küçük genişlik gibi kaynak niteleyicileri kullanarak belirttiğiniz boyutlar gerçek ekran boyutlarıyla örtüşmemelidir. Bunun yerine boyutlar, genişliği veya yüksekliği uygulamanızın penceresinde kullanılabilen dp birimleri. Android sistemi kullanıcı arayüzü ekranlarının bir kısmına (örneğin, ekranın veya üstteki durum çubuğunu kullanın), dolayısıyla ekranın bir kısmı kullanabilirsiniz. Uygulamanız çoklu pencere modunda kullanılıyorsa uygulamasının yalnızca uygulamayı içeren pencerenin boyutuna erişimi vardır. yeniden boyutlandırıldığında, bir yapılandırmayı tetikler. yeni pencere boyutuyla değiştirin. sistemin uygun bir düzen dosyası seçmesini sağlar. Bu nedenle, Tanımladığınız niteleyici boyutları, yalnızca uygulamanızın ihtiyaç duyduğu alanı belirtmelidir. Sistem, sisteme alan sağlamak için sistem kullanıcı arayüzünün kullandığı herhangi bir alanı dikkate alır. emin olabilirsiniz.
Kullanılabilir genişlik niteleyici
Düzeni ekranın en küçük genişliğine göre değiştirmek yerine kullanılabilir genişlik veya yüksekliğe bağlı olarak düzeninizi değiştirmek isteyebilirsiniz. Örneğin, ekranda her zaman iki bölmeli bir sayfa düzenini kullanmak isteyebilirsiniz. en az 600 dp genişlik sağlar. Bu değer, Cihaz yatay veya dikey yönde. Bu durumda, kullanılabilir genişlik niteleyiciyi aşağıdaki gibi tanımlar:
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)
Yükseklik sizin için bir sorun teşkil ediyorsa
kullanılabilir yükseklik niteleyicisine sahip olmalıdır. Örneğin, şuna sahip ekranlar için layout-h600dp:
en az 600 dp ekran yüksekliğinde olmalıdır.
Yön niteleyiciler
Yalnızca en küçük genişlik ve kullanılabilir genişlik niteleyicilerinin kombinasyonlarını kullanarak Ayrıca, kullanıcı dikey görünüm arasında geçiş yaptığında ve yatay yönlerde çalışır.
Bunun için düzen dizininize port veya land niteleyicileri ekleyebilirsiniz.
gösterir. Yön niteleyicilerin boyut niteleyicilerden sonra geldiğinden emin olmanız yeterlidir.
Örnek:
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
Ekran yapılandırması niteleyicilerinin tümü hakkında daha fazla bilgi için Uygulama kaynaklara genel bakış bölümüne bakın.
Pencere boyutu sınıfları
Pencere boyutu sınıfları, uyarlanabilir ekran oluşturmanıza yardımcı olan görüntü alanı ayrılma noktalarıdır. düzenler. Kesme noktaları, uygulamanızın kullanabileceği görüntüleme alanını kompakt, orta veya genişletilmiş. Genişlik ve yükseklik ayrı ayrı belirtilir. Böylece uygulamanız her zaman genişlik için bir pencere boyutu sınıfı ve yükseklik.
Uyarlanabilir düzenleri programlı olarak uygulamak için aşağıdakileri yapın:
- Pencere boyutu sınıfı ayrılma noktalarına göre düzen kaynakları oluşturma
- Uygulamanızın genişlik ve yükseklik pencere boyutu sınıflarını
WindowSizeClass#compute()Jetpack WindowManager işlevindeki işlev kütüphane - Mevcut pencere boyutu sınıfları için düzen kaynağını şişir
Daha fazla bilgi için Pencere boyutu"na bakın sınıfları hakkında daha fazla bilgi edinin.
Parçalar kullanan modülerleştirilmiş kullanıcı arayüzü bileşenleri
Uygulamanızı birden fazla ekran boyutu için tasarlarken sonuçları ayıklamak için parçaları kullanın kullanıcı arayüzü mantığınızı ayrı bileşenlere ayırarak tüm işlemler arasında kullanıcı arayüzü davranışları yineleniyor. Daha sonra parçaları birleştirerek büyük ekranlarda çok bölmeli düzenler oluşturabilir veya parçaları ve küçük ekranlarda ayrı işlemler yapmanıza olanak tanır.
Örneğin, liste-ayrıntı kalıbı (bkz. SlidingPaneLayout) önceki slaytlardaki gibi listeyi ve liste öğesini içeren başka bir parçayı içeren parça bolca fırsat sunuyor. Parçalar büyük ekranlarda yan yana görüntülenebilir. açık küçük ekranları tek tek dolduruyor.
Daha fazla bilgi edinmek için Parçalara genel bakış bölümüne bakın.
Etkinlik yerleştirme
Uygulamanız birden fazla etkinlikten oluşuyorsa etkinlik yerleştirme özelliği sayesinde kullanıcı arayüzünü kolayca oluşturabilirsiniz.
Etkinlik yerleştirme, birden fazla etkinliği veya bir uygulamanın görev penceresinde aynı anda işlemesini sağlar. Büyük ekranlarda tüm etkinlikler yan yana görüntülenebilir. üst üste yığılmış şekilde küçük ekranlarda oluşturuyoruz.
Bir XML oluşturarak uygulamanızın etkinliklerini nasıl görüntüleyeceğini belirleyebilirsiniz ve sistemin, ilgili yapılandırma dosyasını belirlemek için kullandığı farklı ekran okuyucuları oluşturabilirsiniz. Alternatif olarak, Jetpack'i de WindowManager API'si çağrısının en iyi yolu.
Etkinlik yerleştirme özelliği, yön değişikliklerini ve katlanabilir cihazları destekler. Cihaz dönerken veya katlanırken ve açılırken üst üste yığma ve gruplandırmayı kaldırma etkinlikleri.
Daha fazla bilgi için bkz. Etkinlik yerleştirme.
Ekran boyutları ve en boy oranları
Kullanıcı arayüzünüzün doğru olduğundan emin olmak için uygulamanızı çeşitli ekran boyutlarında ve en boy oranlarında test edin. nasıl ölçeklendiğinden emin olun.
Android 10 (API düzeyi 29) ve sonraki sürümler çok çeşitli en boy oranlarını destekler. Katlanabilir form faktörleri uzun ve dar ekranlarda (ör. 21:9) açıldığında 1:1 kare en boy oranı elde eder.
Mümkün olduğunca çok cihazla uyumluluğu sağlamak için uygulamalarınızı mümkün olduğunca yapabildiğinizden emin olun:
İstediğiniz tüm farklı ekran boyutlarındaki cihazlara erişiminiz yoksa Android Emulator'ı kullanarak emülasyon hemen hemen tüm ekran boyutlarında.
Gerçek bir cihazda test etmek istiyorsanız ancak cihaza sahip değilseniz, erişmek için Firebase Test Lab'i veri merkezlerine taşımaya devam edin.
Ek kaynaklar
- Materyal Tasarım — Düzeni anlama