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 uzamsal ilişkilere göre her bir görünümün konumunu ve boyutunu belirtmenize olanak tanır. Daha sonra görüntüleme alanı değiştikçe tüm görünümler birlikte hareket edebilir ve yeniden boyutlandırılabilir.

ConstraintLayout ile bir düzen oluşturmanın en kolay yolu Android Studio'da 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 Düzen Düzenleyici'de `ConstraintLayout` gösteriliyor.

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ı görüntü boyutlarına duyarlı olmasını sağlamak amacıyla görünüm 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 benzeri, ConstraintLayout içinde. Görünüm, görünümün kısıtlamaları dahilinde tüm kullanılabilir alanı kaplar.

Örneğin:

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

Şekil 4'te, görüntü genişliği cihaz yönü değiştikçe 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 de içeren metnin yüksekliği (wrap_content) için gereken alan kadar olacak şekilde ayarlar. Bu da görünümün farklı görüntüleme boyutlarına ve farklı miktarlardaki metinlere uyum sağlamasına olanak tanır.

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. Bununla birlikte, iç içe yerleştirilmiş bir LinearLayout öğesinde ağırlıkların kullanılması, sistemin her bir görünümün boyutunu belirlemek için birden fazla düzen geçişi yapmasını gerektirir. Bu da kullanıcı arayüzü performansını yavaşlatır.

ConstraintLayout, LinearLayout ile mümkün olan neredeyse tüm düzenleri performans açısından olumsuz bir şekilde oluşturabilir. Bu nedenle, iç içe yerleştirilmiş LinearLayout öğenizi ConstraintLayout biçimine 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 her zaman farklı ekran boyutlarına duyarlı olmalıdır. Ancak, duyarlı bir düzen bile her cihazda veya çoklu pencere modundaki ekranlarda en iyi kullanıcı deneyimini sağlayamaz. Örneğin, bir telefon için tasarladığınız kullanıcı arayüzü, muhtemelen tablette optimum kullanıcı deneyimi sunmaz. 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ılarına sahip bir 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 yana bulunur. 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 iki bölme, görüntüleme alanının tamamını kaplayacak şekilde ayrı ayrı gösterilir. Liste bölmesindeki bir öğe seçildiğinde, ayrıntı bölmesi (seçili öğenin bilgilerini içeren) liste bölmesinin yerini 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 kapsamındaki 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, uygulama penceresinin tamamını tek tek kaplamak için birbirlerinin üzerinden kaydırılır.

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, liste bölmesi bir ağırlığı olmadığı için her zaman 280 dp genişliğindedir. Ancak ayrıntı bölmesi, görünümün layout_weight ayarı nedeniyle her zaman 580 dp'den sonraki yatay alanları 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.** Aynı uygulama, farklı ekran boyutları için farklı düzenler kullanıyor.

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ı 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 görüntüleme alanını temsil eder. Sistem, uygulamanızın düzenini seçerken 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 niteleyici

En küçük genişlik ekran boyutu niteleyici, minimum genişliği yoğunluktan bağımsız pikseller (dp) cinsinden ölçülen ekranlar için alternatif düzenler sunmanı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 niteleyici, cihazın mevcut yönünden bağımsız olarak ekranın iki tarafından en küçük olanı belirtir. Bu nedenle, düzeniniz için kullanılabilecek genel ekran boyutunu belirtmenin bir yoludur.

Diğer 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)
720dp: 10 inç tablet (720x1280 mdpi, 800x1280 mdpi vb.)

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

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

En küçü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 ekranın bir kısmını (ekranın alt kısmındaki sistem çubuğu veya üstteki durum çubuğu gibi) kullanabilir. Bu yüzden, 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 boyutuna sahip bir yapılandırma değişikliği tetiklenir. Bu durum, sistemin uygun 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üzeniniz için alan sağlarken sistem kullanıcı arayüzü tarafından kullanılan tüm alanı dikkate alır.

Kullanılabilir genişlik niteleyici

Düzeni, ekranın en küçük genişliğine göre değiştirmek yerine, düzeninizi kullanılabilen genişliğin veya yüksekliğin boyutuna göre değiştirebilirsiniz. Örneğin, ekranda en az 600 dp genişlik sağlandığında iki bölmeli bir 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şeniz varsa 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ı destekleyebilecek olsanız da, 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 niteleyicilerini ekleyebilirsiniz. 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ı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ı olarak belirtildiği için uygulamanızda her zaman genişlik için pencere boyutu sınıfı ve yükseklik için 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şirme

Pencere boyutu sınıfları hakkında daha fazla bilgi için Farklı ekran boyutlarını destekleme başlıklı makaleye bakın.

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

Uygulamanızı birden fazla ekran boyutu için tasarlarken, etkinlikler arasında kullanıcı arayüzü davranışını gereksiz yere tekrarlamadığınızdan emin olmak amacıyla, kullanıcı arayüzü mantığınızı ayrı bileşenlere çıkarmak için parçalar kullanın. Daha sonra, parçaları birleştirerek büyük ekranlarda çok bölmeli düzenler oluşturabilir veya küçük ekranlarda ayrı etkinliklere yer verebilirsiniz.

Ö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 tek tek ekranı dolduracak şekilde görüntülenebilirdi.

Daha fazla bilgi edinmek için Parçalar'a genel bakış konusuna göz atın.

Etkinlik yerleştirme

Uygulamanızda birden fazla etkinlik varsa etkinlik yerleştirme, uyarlanabilir kullanıcı arayüzünü kolayca 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 çok örneğini görüntüler. Büyük ekranlarda etkinlikler yan yana, küçük ekranlarda ise üst üste yığılmış olarak gösterilebilir.

Sistemin, görüntü 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üğünde veya katlanıp katlanırken çeşitli etkinlikleri yığınlar ve yığınlardan çıkarır.

Daha fazla bilgi için Etkinlik yerleştirme bölümüne 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 (ör. katlandığında 21:9), katlandığında 1:1 kare en boy oranına kadar değişiklik gösterebilir.

Mümkün olduğunca çok sayıda 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ına sahip cihazlara erişiminiz yoksa neredeyse her ekran boyutuna emülasyon yapmak için Android Emülatörü'nü kullanabilirsiniz.

Gerçek bir cihazda test etmeyi tercih etmenize rağmen cihaza sahip değilseniz Google veri merkezindeki cihazlara erişmek için Firebase Test Lab'i kullanabilirsiniz.

Ek kaynaklar

Materyal Tasarım — Düzeni anlama