Kullanıcı arayüzünüzü duyarlı düzenlere taşıma

Android uygulamalarının, sürekli olarak genişleyen bir cihaz form faktörü ekosistemini desteklemesi gerekir. Bir uygulamanın kullanıcı arayüzü, farklı ekran boyutlarına, farklı yönlere ve cihaz durumlarına uyacak şekilde duyarlı olmalıdır.

Duyarlı kullanıcı arayüzü, esneklik ve süreklilik ilkelerini temel alır.

Esneklik, mevcut alandan en iyi şekilde yararlanan ve mevcut alan değiştiğinde düzenlenebilen düzenleri ifade eder. Düzenlemeler pek çok farklı biçimde olabilir: tek bir görünümün boyutunu büyütme, görünümleri daha erişilebilir konumlarda olacak şekilde yeniden konumlandırma, ek görünümler gösterme veya gizleme ya da bunların bir birleşimi.

Devamlılık, bir pencere boyutundan diğerine geçiş sırasında sorunsuz bir kullanıcı deneyimi sunmayı ifade eder. Kullanıcının gerçekleştirdiği deneyim ne olursa olsun kesintisiz devam etmelidir. Boyuttaki bir değişiklik tüm görünüm hiyerarşisinin yok edilmesi ve yeniden oluşturulması ile birlikte görülebileceğinden, kullanıcının konumunu veya verilerini kaybetmemesi önemlidir.

Kaçınılması gerekenler

Düzenle ilgili kararlar alırken fiziksel, donanım değerleri kullanmaktan kaçının. Kararlarınızı sabit bir değere göre vermek cazip gelebilir, ancak birçok durumda bu değerler kullanıcı arayüzünüzün çalışabileceği alanı belirlemek için kullanışlı olmaz.

Uygulamalar çoklu pencere modunda, pencere içinde pencere veya serbest biçimli pencerelerde (ör. ChromeOS) çalışırken pencere yeniden boyutlandırmasıyla karşılaşabilir. Hatta birden fazla fiziksel ekran da olabilir (ör. katlanabilir veya birden fazla ekranı olan cihazlar). Tüm bu durumlarda, içeriğin nasıl görüntüleneceğine karar vermek için fiziksel ekran boyutu geçerli değildir.

Farklı boyutlarda uygulama pencereleri gösteren birden fazla cihaz
Şekil 1. Pencere boyutları, fiziksel cihaz veya görüntü boyutundan farklı olabilir.

Aynı nedenle, uygulamanızı belirli bir yöne veya en boy oranına kilitlemekten kaçının. Cihaz belirli bir yönde olsa da uygulamanız yalnızca penceresinin boyutuna bağlı olarak farklı bir yönde olabilir. Örneğin, çoklu pencere modunu kullanan yatay bir tablette, bir uygulama genişliğinden uzun olduğu için dikey olabilir.

Ayrıca cihazın telefon mu tablet mi olduğunu belirlemeye çalışmamalısınız. Tablet olarak nitelendirilen şey biraz özneldir: Belirli bir boyuta mı, en boy oranına mı yoksa en boy oranı kombinasyonuna mı bağlı? Yeni form faktörleri ortaya çıktıkça bu varsayımlar da değişebilir ve bu varsayımlar arasındaki farkın önemi azalır.

Önceki stratejilerden herhangi birini denemek yerine ayrılma noktaları ve pencere boyutu sınıflarını kullanın.

Kesme noktaları ve pencere boyutu sınıfları

Ekranın uygulamanıza ayrılan asıl kısmı uygulama penceresidir. Ekranın tamamını veya bir kısmını kaplayabileceği için uygulamanızın düzeniyle ilgili üst düzey kararlar alırken pencere boyutunu kullanın.

Birden fazla form faktörü için tasarım yaparken bu üst düzey kararların farklı yönlerden ayrıldığı eşik değerlerini bulun. Bu amaçla, Malzeme Tasarımı duyarlı düzen ızgarası genişlik ve yükseklik için ayrılma noktaları sağlar. Bu sayede, ham boyutları pencere boyutu sınıfları olarak adlandırılan ayrı, standartlaştırılmış gruplar halinde eşleyebilirsiniz. Dikey kaydırmanın çok yaygın olması nedeniyle, çoğu uygulama öncelikle genişlik boyutu sınıflarına önem verir. Bu nedenle çoğu uygulama, yalnızca birkaç ayrılma noktasıyla tüm ekran boyutları için optimize edilebilir. (Pencere boyutu sınıfları hakkında daha fazla bilgi için Pencere boyutu sınıfları bölümüne bakın.)

Kalıcı kullanıcı arayüzü öğeleri

Materyal Tasarım düzen yönergelerinde uygulama çubukları, gezinme ve içerik için bölgeler tanımlanır. Genellikle ilk ikisi, görünüm hiyerarşisinin kökündeki (veya çok yakınında bulunan) kalıcı kullanıcı arayüzü öğeleridir. "Kalıcı" ifadesinin, görüntülemenin her zaman görünür olacağı anlamına gelmez. Aynı zamanda, diğer içerik görüntüleme sayıları hareket edebilir veya değişebilir. Örneğin, bir gezinme öğesi ekranın dışında bir kayan çekmecede olabilir, ancak çekmece her zaman oradadır.

Kalıcı öğeler duyarlı olabilir ve genellikle pencerenin tam genişliğini veya tam yüksekliğini kaplar. Bu nedenle, öğelerin nereye yerleştirileceğine karar vermek için boyut sınıfları kullanmayı tercih edin. Bu, içerik için kalan alanı tanımlar. Aşağıdaki snippet'te etkinlik, kompakt ekranlar için bir alt çubuğu, büyük ekranlar için bir üst uygulama çubuğu kullanmaktadır. Uygun düzenler, daha önce açıklandığı gibi genişlik ayrılma noktaları kullanır.

<!-- res/layout/main_activity.xml -->

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- content view(s) -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        ... />
</androidx.constraintlayout.widget.ConstraintLayout>


<!-- res/layout-w600dp/main_activity.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        ... />

    <!-- content view(s) -->
</androidx.constraintlayout.widget.ConstraintLayout>

İçerik

Kalıcı kullanıcı arayüzü öğelerinizi konumlandırdıktan sonra kalan içerik alanını kullanın (örneğin, uygulamanızın gezinme grafiğinle NavHostFragment kullanarak). Dikkat edilmesi gereken diğer hususlar için Duyarlı kullanıcı arayüzleri için gezinme bölümüne bakın.

Tüm verilerin farklı boyutlar için sunulduğundan emin olun

Günümüzde çoğu uygulama çerçevesi, kullanıcı arayüzüne katkıda bulunan Android bileşenlerinden (Etkinlikler, Parçalar ve Görünümler) ayrılmış bir veri modeli kullanır. Jetpack ile bu rol genellikle ViewModel'ler tarafından gerçekleştirilir. Bu da, yapılandırma değişikliklerinde hayatta kalma avantajı sağlar (daha fazla bilgi için ViewModel'e Genel Bakış bölümüne bakın).

Farklı boyutlara uyum sağlayan bir düzen uygularken mevcut boyuta göre farklı bir veri modeli kullanmak cazip gelebilir. Ancak bu, tek yönlü veri akışı ilkesine aykırıdır. Verilerin, Görünümler'e ve kullanıcı etkileşimleri gibi etkinliklerin de yukarıya gitmesi gerekir. Veri modelinin kullanıcı arayüzü katmanının yapılandırmasına bağlı olduğu diğer yönde bir bağımlılık oluşturmak, bunu büyük ölçüde karmaşık hale getirir. Uygulamanın boyutu değiştiğinde bir veri modelinden diğerine dönüşüm gerçekleştirdiğinizi hesaba katmanız gerekir.

Bunun yerine, veri modelinizin en büyük boyut sınıfını barındırmasına izin verin. Böylece, mevcut boyut sınıfına uyum sağlamak için kullanıcı arayüzündeki içeriği seçerek gösterebilir, gizleyebilir veya yeniden konumlandırabilirsiniz. Aşağıda, boyut sınıfları arasında geçiş yaparken düzeninizin nasıl davranması gerektiğine karar verirken kullanabileceğiniz birkaç strateji verilmiştir.

İçeriği genişlet

Standart düzenler: Feed

Genişletilmiş alan, içeriğinizi büyütmeniz ve daha erişilebilir hale getirmek için yeniden biçimlendirmeniz için bir fırsat olabilir.

Koleksiyonları büyütün. Birçok uygulama, RecyclerView veya ScrollView gibi kayan bir kapsayıcıda bir öğe koleksiyonu gösterir. Kapsayıcının otomatik olarak daha büyük hale gelmesi, daha fazla içeriğin gösterilebileceği anlamına gelir. Bununla birlikte, kapsayıcıdaki içeriğin aşırı genişletilmemiş veya bozulmamış olmasına dikkat edin. Örneğin, bir RecyclerView ile genişlik küçük olmadığında GridLayoutManager, StaggeredGridLayoutManager veya FlexboxLayout gibi farklı bir düzen yöneticisi kullanabilirsiniz.

Katlanmış ve açılmış bir cihaz, farklı düzen yöneticilerinin genişlik boyutu sınıfına göre uygulamayı nasıl farklı yerleştirdiğini gösteriyor.
Şekil 2. Farklı pencere boyutu sınıfları için farklı düzen yöneticileri.

Bağımsız öğeler, daha fazla içerik görüntülemek ve öğe sınırlarını daha kolay ayırt etmek için farklı bir boyut veya şekil de kullanabilir.

Çarpıcı bir öğeyi vurgulayın. Düzende resim veya video gibi belirli bir odak noktası varsa kullanıcının ilgisini korumak için uygulama penceresi büyüdüğünde bunu genişletin. Diğer destekleyici öğeler, hero görünümün etrafında veya altında yeniden düzenlenebilir.

Böyle bir düzen oluşturmanın birçok yolu vardır ancak ConstraintLayout, bir alt görünümün boyutunu sınırlamak ya da en boy oranını uygulamak dahil olmak üzere pek çok yöntem sunduğundan ve alt öğelerini kendisine ya da diğer çocuklara göre konumlandırmak için özellikle bu amaca uygundur. Tüm bu özellikler hakkında daha fazla bilgiyi ConstraintLayout ile Duyarlı Kullanıcı Arayüzü Oluşturma bölümünde bulabilirsiniz.

Varsayılan olarak daraltılabilir içeriği gösterin. Yeterli yer olduğunda, normalde yalnızca dokunma, kaydırma veya hareketler gibi ek kullanıcı etkileşimleri aracılığıyla erişilebilen içerikleri gösterin. Örneğin, küçük boyuta sahipken sekmeli arayüzde görünen içerik, daha fazla alan olduğunda sütunlara veya liste halinde yeniden düzenlenebilir.

Kenar boşluklarını genişletin. Alan, tüm içeriğinizi kullandıktan sonra bile ilgi çekici bir uyum bulamayacağınız kadar büyükse içeriğin ortada kalması ve ayrı ayrı görünümler arasında doğal boyutlar ve boşluklar olması için düzenin kenar boşluklarını genişletin.

Alternatif olarak, bir tam ekran bileşeni, kayan iletişim kutusu kullanıcı arayüzüne dönüşebilir. Bu, özellikle ilgili bileşenin e-posta oluşturma veya takvim etkinliği oluşturma gibi acil bir kullanıcı görevini yerine getirmek için özel olarak odaklanmayı gerektirdiği durumlarda çok uygundur.

İletişim kutusunu tam ekran gösteren standart telefon ve kayan pencereyle aynı iletişim kutusunu gösteren açılmış katlanabilir bir telefon.
Şekil 3. Orta boyda ve genişletilmiş genişlikte standart bir iletişim kutusuna dönüşen tam ekran iletişim kutusu.

İçerik ekle

Standart düzenler: Destek bölmesi, Liste ayrıntısı görünümü

Destekleyici bölme kullanın. Destekleyici bölme, bir dokümandaki yorumlar veya oynatma listesindeki öğeler gibi birincil içerikle ilişkili ek içerikler veya bağlamsal işlemler sunar. Bunlar genellikle genişletilmiş yükseklik için ekranın alttan üçte birlik kısmını, genişletilmiş genişlik için takip eden üçte birlik kısmını kullanır.

Bölmenin gösterilmesi için yeterli alan olmadığında bu içeriğin nereye yerleştirileceği, üzerinde düşünülmesi gereken önemli bir noktadır. Keşfedebileceğiniz birkaç alternatif:

  • Son kenarda DrawerLayout kullanılarak yan çekmece
  • BottomSheetBehavior kullanılarak alt çekmece
  • Bir menü simgesine dokunarak erişilebilen menü veya pop-up pencere
Şekil 4. Destek bölmesinde ek içerik sunmanın alternatif yolları.

İki bölmeli bir düzen oluşturun. Büyük ekranlarda normalde daha küçük ekranlarda ayrı ayrı görünen özelliklerin bir kombinasyonu gösterilebilir. Birçok uygulamada sık karşılaşılan bir etkileşim kalıbı, kişiler veya arama sonuçları gibi bir öğe listesi göstermek ve öğe seçildiğinde öğenin ayrıntısına geçmektir. Listeyi daha büyük ekranlar için genişletmek yerine, her iki özelliği iki bölmeli bir düzende yan yana göstermek için liste ayrıntısı görünümünü kullanın. Destek bölmesinden farklı olarak, liste ayrıntıları görünümünün ayrıntı bölmesi, daha küçük ekranlarda bağımsız olarak gösterilebilen bağımsız bir öğedir.

Liste ayrıntıları görünümü uygulamak için SlidingPaneLayout'e özel widget'ı kullanın. Bu widget, iki bölme için belirtilen layout_width değerine dayanarak her iki bölmeyi birlikte görüntülemek için yeterli alan olup olmadığını otomatik olarak hesaplar ve kalan alan, layout_weight kullanılarak dağıtılabilir. Yeterli alan olmadığında, her bir bölme düzenin tam genişliğini kullanır ve ayrıntı bölmesi, ekrandan dışarı veya liste bölmesinin üstüne kaydırılır.

Geniş ekrana sahip bir cihazdaki liste ayrıntısı düzeninin her iki bölmesini de gösteren SlidingPaneLayout.
5. Şekil. Genişletilmiş genişlikte iki bölme ve en kompakt genişlikte bir bölme gösteren SlidingPaneLayout.

İki bölmeli düzen oluşturun bölümünde SlidingPaneLayout kullanımıyla ilgili daha fazla ayrıntı bulabilirsiniz. Bu kalıbın, gezinme grafiğinizi yapılandırma şeklinizi etkileyebileceğini de unutmayın (Duyarlı kullanıcı arayüzleri için gezinme konusuna bakın).

Ek kaynaklar