Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Duyarlı/uyarlanabilir düzenler, ekran boyutundan bağımsız olarak optimize edilmiş bir kullanıcı deneyimi sunar. Görünüm tabanlı uygulamanızın, çoklu pencere modu gibi yeniden boyutlandırılabilir yapılandırmalar da dahil olmak üzere tüm ekran boyutlarını, yönlerini ve yapılandırmasını 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 görüntüleme alanı miktarındaki değişikliklere duyarlı bir düzen oluşturmaktır.

Sınırlama Düzeni

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üzendeki diğer görünümlerle olan mekansal ilişkilere göre her bir görünümün konumunu ve boyutunu belirleyebilmenizi sağlar. Tüm görünümler, görüntüleme alanı değiştikçe birlikte taşınabilir ve yeniden boyutlandırılabilir.

ConstraintLayout ile bir düzen oluşturmanın en kolay yolu, Android Studio'daki Düzen Düzenleyici'yi kullanmaktır. Düzen Düzenleyici, elle herhangi bir XML düzenlemeden yeni görünümleri düzene sürüklemenize, üst ve kardeş görünümlere göre kısıtlamalar uygulamanıza ve görünüm özelliklerini ayarlamanıza olanak tanır.

**Şekil 3.** Android Studio'daki bir `ConstraintLayout` gösteren Düzen Düzenleyici.

Daha fazla bilgi için ConstraintLayout ile Duyarlı Kullanıcı Arayüzü Oluşturma bölümüne bakın.

Duyarlı genişlik ve yükseklik

Düzeninizin farklı ekran boyutlarına duyarlı olmasını sağlamak amacıyla görüntüleme bileşenlerinin genişliği ve yüksekliği için sabit kodlu değerler yerine wrap_content, match_parent veya 0dp (match constraint) kullanın:

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üm içinde mümkün olduğunca genişler.
0dp (match constraint): match_parent ile benzer şekilde ConstraintLayout içinde. Görünüm, görünümün kısıtlamalarındaki tüm kullanılabilir alanı kaplar.

Örnek:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/lorem_ipsum" />

Şekil 4'te, ekran genişliği cihaz yönüyle değiştiğinde TextView genişliğinin ve yüksekliğinin nasıl değiştiği gösterilmektedir.

TextView, genişliğini mevcut tüm alanı (match_parent) dolduracak şekilde ve yüksekliğini, içerdiği metnin (wrap_content) yüksekliği için gereken kadar alan olacak şekilde ayarlar. Böylece, görünüm farklı görüntüleme boyutlarına ve farklı metin miktarlarına uyum sağlayabilir.

LinearLayout kullanıyorsanız görünümlerin mevcut alanı orantılı olarak doldurması için alt görüntüleme sayılarını düzen ağırlığına göre de genişletebilirsiniz. Ancak iç içe yerleştirilmiş bir LinearLayout öğesinde ağırlıkların kullanılması, sistemin her görüntülemenin boyutunu belirlemek için birden fazla düzen geçişi gerçekleştirmesini gerektirir. Bu da kullanıcı arayüzü performansını yavaşlatır.

ConstraintLayout, performans üzerinde herhangi bir etkisi olmadan LinearLayout ile mümkün olan neredeyse tüm düzenleri oluşturabilir. Bu nedenle iç içe yerleştirilmiş LinearLayout öğenizi ConstraintLayout biçimine dönüştürün. Daha sonra, sınırlama zincirleriyle ağırlıklı düzenleri tanımlayabilirsiniz.

Uyarlanabilir tasarım

Uygulamanızın düzeni her zaman farklı ekran boyutlarına duyarlı olmalıdır. Ancak duyarlı bir düzen bile her cihazda veya çok pencereli moddaki ekranlarda en iyi kullanıcı deneyimini sunamaz. Örneğin, bir telefon için tasarladığınız kullanıcı arayüzü, muhtemelen tablette en iyi kullanıcı deneyimini sunmamaktadır. Uyarlanabilir tasarım, farklı görüntüleme boyutları için optimize edilmiş alternatif düzenler sağlar.

Liste ayrıntısı kullanıcı arayüzleri için SlidingPaneLayout

Liste ayrıntısı kullanıcı arayüzü, genellikle farklı boyutlu ekranlarda farklı bir kullanıcı deneyimi sağlar. 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örüntülenir. İki bölme yan yana kalır. Ancak küçük ekranlarda bu iki bölme, her bir bölme görüntüleme alanının tamamını kaplayacak şekilde ayrı ayrı gösterilir. Liste bölmesinde bir öğe seçildiğinde, liste bölmesinin yerini ayrıntı paneli (seçilen öğenin bilgilerini içerir) alır. Geri gezinme, ayrıntı bölmesini listeyle değiştirir.

SlidingPaneLayout, iki kullanıcı deneyiminden hangisinin mevcut 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 öğesindeki 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) bölmeler yan yana gösterilir. Ancak, pencere genişliği 580 dp'den küçükse bölmeler, ayrı ayrı tüm uygulama penceresini kaplayacak şekilde birbirinin üzerine kaydırılır.

Pencere genişliği, belirtilen toplam minimum genişlikten (580 dp) daha büyükse iki bölmeyi orantılı olarak boyutlandırmak için layout_weight değerleri kullanılabilir. Örnekte, liste bölmesinin ağırlığı olmadığı için her zaman 280 dp genişliğindedir. Bununla birlikte, ayrıntı bölmesi görünümün layout_weight ayarı nedeniyle, 580 dp'den sonraki yatay alanları her zaman doldurur.

Alternatif düzen kaynakları

Kullanıcı arayüzü tasarımınızı çok çeşitli ekran boyutlarına uyarlamak için kaynak niteleyicileri tarafından tanımlanan alternatif düzenleri kullanın.

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

Uygulamanızın kaynak kodunda ek res/layout/ dizinleri 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ı niteleyici 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 görüntüleme alanını temsil eder. Sistem, uygulamanızın düzenini seçerken tüm sistem süslemelerini (gezinme çubuğu gibi) ve pencere yapılandırması değişikliklerini (çoklu pencere modu gibi) dikkate alır.

Android Studio'da alternatif düzenler oluşturmak için Görünümler ile kullanıcı arayüzü geliştirme başlıklı makaledeki Farklı ekranlar için optimizasyon yapmak üzere düzen varyantlarını kullanma bölümüne bakın.

En küçük genişlik niteleyicisi

En küçük genişlik ekran boyutu niteleyicisi, minimum genişliği yoğunluktan bağımsız piksellerle (dp) ölçülen ekranlar için alternatif düzenler sağlamanızı sağlar.

Android, ekran boyutunu dp ölçüsü olarak açıklayarak farklı piksel yoğunluklarını dert etmeden belirli ekran boyutları için tasarlanmış düzenler oluşturmanızı sağlar.

Ö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 geçerli yönü ne olursa olsun ekranın iki tarafından en küçük olanı belirtir. Bu nedenle, düzeniniz için kullanılabilecek genel ekran boyutunu belirtmenin bir yoludur.

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:

320dp: Küçük telefon ekranı (240x320 ldpi, 320x480 mdpi, 480x800 hdpi vb.)
480dp: Büyük telefon ekranı ~5 inç (480x800 mdpi)
600 dp: 7 inç tablet (600x1024 mdpi)
720dp: 10 inç tablet (720x1280 mdpi, 800x1280 mdpi vb.)

Aşağıdaki şekilde, farklı ekran dp genişliklerinin farklı ekran boyutları ve yönlerine nasıl karşılık geldiği daha ayrıntılı bir şekilde gösterilmektedir.

**Şekil 6.** Farklı ekran boyutlarını desteklemek için önerilen genişlik ayrılma noktaları.

En düşük genişlik niteleyicisi için değerler dp'dir; çünkü önemli olan, sistem piksel yoğunluğunu hesaba kattıktan sonra (ham piksel çözünürlüğü değil) kullanılabilir görüntü alanı miktarıdır.

En küçük genişlik gibi kaynak niteleyicileri kullanarak belirttiğiniz boyutlar gerçek ekran boyutları değildir. Boyutlar, genişliği veya yüksekliği uygulamanızın penceresinde kullanılabilen dp birimleri cinsinden belirtir. Android sistemi, sistem kullanıcı arayüzü için bazı ekranları (ekranın altındaki sistem çubuğu veya üstteki durum çubuğu gibi) kullanabilir. Bu nedenle, ekranın bir kısmı düzeniniz için kullanılamıyor olabilir. Uygulamanız çoklu pencere modunda kullanılıyorsa uygulamanın yalnızca uygulamayı içeren pencerenin boyutuna erişimi olur. Pencere yeniden boyutlandırıldığında yeni pencere boyutunda bir yapılandırma değişikliği tetiklenir. Bu değişiklik, sistemin uygun bir düzen dosyası seçmesini sağlar. Dolayısıyla, bildirdiğiniz kaynak niteleyici boyutları yalnızca uygulamanızın ihtiyaç duyduğu alanı belirtmelidir. Sistem, düzeninize alan sağlanırken sistem kullanıcı arayüzü tarafından kullanılan tüm alanları dikkate alır.

Kullanılabilir genişlik niteleyicisi

Düzeni ekranın en küçük genişliğine göre değiştirmek yerine, düzeninizi ne kadar genişlik veya yükseklik olduğuna göre değiştirmek isteyebilirsiniz. Örneğin, ekran en az 600 dp genişlik sağladığında iki bölmeli düzen kullanmak isteyebilirsiniz. Bu düzen, cihazın yatay veya dikey yönde olmasına bağlı olarak değişebilir. Bu durumda, kullanılabilir 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ızın yüksekliği ile ilgili endişe duyuyorsanız kullanılabilir yükseklik niteleyicisini kullanabilirsiniz. Örneğin, en az 600 dp ekran yüksekliğine sahip ekranlar için layout-h600dp.

Yön niteleyicileri

Yalnızca en küçük genişlik ve kullanılabilir genişlik niteleyicilerinin kombinasyonlarını kullanarak tüm boyut varyasyonlarını destekleyebilirsiniz. Bununla birlikte, kullanıcı dikey ve yatay yönler arasında geçiş yaptığında kullanıcı deneyimini değiştirmek de isteyebilirsiniz.

Bunun için düzen dizini adlarınıza port veya land niteleyicileri ekleyebilirsiniz. Yön niteleyicilerinin boyut niteleyicilerinden sonra geldiğinden emin olun. Ö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

Tüm ekran yapılandırması niteleyicileri hakkında daha fazla bilgi için Uygulama kaynaklarına genel bakış bölümüne bakın.

Pencere boyutu sınıfları

Pencere boyutu sınıfları, uyarlanabilir düzenler oluşturmanıza yardımcı olan görüntü alanı ayrılma noktalarıdır. Ayrılma noktaları, uygulamanız için kullanılabilen görüntüleme alanını kompakt, orta veya genişletilmiş olarak tanımlar. Genişlik ve yükseklik ayrı ayrı belirtilir. Böylece, uygulamanızda genişlik için her zaman bir pencere boyutu sınıfı ve yükseklik için bir pencere boyutu sınıfı olur.

Uyarlanabilir düzenleri programatik 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
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ı şişirir

Daha fazla bilgi için Pencere boyutu sınıfları bölümüne bakın.

Parçalar kullanan modülerleştirilmiş kullanıcı arayüzü bileşenleri

Uygulamanızı birden fazla görüntülü reklam boyutuna göre tasarlarken, kullanıcı arayüzü davranışının etkinlikler arasında gereksiz yere tekrarlanmasını önlemek için parçaları kullanarak kullanıcı arayüzü mantığınızı ayrı bileşenlere ayırın. Daha sonra, büyük ekranlarda çok bölmeli düzenler oluşturmak için parçaları birleştirebilir veya küçük ekranlarda ayrı etkinliklere yer verebilirsiniz.

Örneğin, list‐detail kalıbı (yukarıdaki SlidingPaneLayout'a 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 tek tek ekranı dolduracak şekilde görüntülenebilir.

Daha fazla bilgi edinmek için Parçalara genel bakış konusuna bakın.

Etkinlik yerleştirme

Uygulamanız birden fazla etkinlikten oluşuyorsa etkinlik yerleştirme, kolayca uyarlanabilir bir kullanıcı arayüzü oluşturmanızı sağlar.

Etkinlik yerleştirme, bir uygulamanın görev penceresinde aynı anda birden fazla etkinliği veya aynı etkinliğin birden çok örneğini görüntüler. Büyük ekranlarda etkinlikler yan yana, küçük ekranlarda ise üst üste üst üste olacak şekilde görüntülenebilir.

Sistemin ekran boyutuna göre uygun sunuyu belirlemek için kullandığı bir XML yapılandırma dosyası oluşturarak uygulamanızın etkinliklerini nasıl görüntüleyeceğini belirlersiniz. Alternatif olarak Jetpack WindowManager API çağrıları yapabilirsiniz.

Etkinlik yerleştirme özelliği, cihazın yön değişikliklerini ve katlanabilir cihazları destekler. Cihaz döndükçe veya katlanır ya da açılırken etkinliklerin gruplanması ve yığılması işlemleri de bu kapsamda yer alır.

Daha fazla bilgi için Etkinlik yerleştirme konusuna bakın.

Ekran boyutları ve en boy oranları

Kullanıcı arayüzünüzün doğru ölçeklendirildiğ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 çok çeşitli en boy oranlarını destekler. Katlanabilir form faktörleri uzun ve dar ekranlardan (katlandığında 21:9 gibi) ve katlandığında 1:1 kare en boy oranına kadar değişiklik gösterebilir.

Mümkün olduğunca fazla cihazla uyumluluğu sağlamak için uygulamalarınızı aşağıdaki ekran en boy oranlarından mümkün olduğunca çok test edin:

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

Test etmek istediğiniz farklı ekran boyutlarındaki cihazlara erişiminiz yoksa neredeyse tüm ekran boyutlarını emüle etmek için Android Emülatör'ü kullanabilirsiniz.

Cihaza sahip değilseniz gerçek bir cihazda test yapmayı tercih ediyorsanız, ancak bir Google veri merkezindeki cihazlara erişmek için Firebase Test Lab'i kullanabilirsiniz.

Ek kaynaklar

Materyal Tasarım — Düzeni anlama