Görünümlerle duyarlı/uyarlanabilir tasarım

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.

Şekil 3. Android Studio'daki Düzen Düzenleyici'de 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): ConstraintLayout iç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.

Şekil 4. Duyarlı bir 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.

Şekil 5. Farklı ekran boyutları için farklı düzenler kullanan aynı uygulama.

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.

Şekil 6. Farklı alanları desteklemek için önerilen genişlik ayrılma noktaları ekran boyutlarına bağlı.

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
ziyaret edin.

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:

Şekil 7. Çeşitli ekran en boy oranları.

İ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