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

Android uygulamalarının, cihaz form faktörlerinden oluşan ve sürekli genişleyen bir ekosistemi desteklemesi gerekir. Uygulamaların kullanıcı arayüzü, çeşitli ekran boyutlarına, farklı yönlere ve cihaz durumlarına uyum sağlayabilecek şekilde duyarlı olmalıdır.

Uyumlu kullanıcı arayüzü, esneklik ve süreklilik ilkelerine odaklanır.

Esneklik, mevcut alandan en iyi şekilde yararlanan ve kullanılabilir alan değiştiğinde ayarlama yapan düzenleri ifade eder. Ayarlamalar birçok 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ümleri gösterme veya gizleme veya bunların bir birleşimini.

Süreklilik, bir pencere boyutundan diğerine geçiş yaparken sorunsuz bir kullanıcı deneyimi yaşamayı ifade eder. Kullanıcının içinde bulunduğu deneyim ne olursa olsun kesintisiz bir şekilde devam etmelidir. Boyuttaki bir değişiklik, tüm görünüm hiyerarşisinin yıkılıp yeniden oluşturulmasıyla birlikte olabileceğinden kullanıcının yerini veya verilerini kaybetmemesi önemlidir.

Kaçınılması gerekenler

Düzenle ilgili kararlar alırken fiziksel, donanım değerleri kullanmaktan kaçının. Sabit bir değeri temel alarak karar vermek cazip gelebilir, ancak birçok durumda bu değerler kullanıcı arayüzünüzün birlikte çalışabileceği alanı belirlemek için faydalı değildir.

Tabletlerde bir uygulama çoklu pencere modunda çalışıyor olabilir. Bu, uygulamanın ekranı başka bir uygulamayla paylaştığı anlamına gelir. ChromeOS'te bir uygulama, yeniden boyutlandırılabilir bir pencerede olabilir. Katlanabilir cihaz veya birden fazla ekranı olan bir cihaz gibi birden fazla fiziksel ekran bile olabilir. Tüm bu durumlarda, içeriğin nasıl görüntüleneceğine karar verirken fiziksel ekran boyutu dikkate alınmaz.

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

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

Ayrıca, cihazın telefon mu tablet mi olduğunu belirlemeye çalışmaktan kaçının. Tablet olarak nitelenen şey biraz öznel olan bir konu: Belirli bir boyuta mı, en boy oranına mı, yoksa boyut ve en boy oranı kombinasyonuna mı bağlı? Yeni form faktörleri ortaya çıktıkça bu varsayımlar değişebilir ve ayrım önemini kaybeder.

Önceki stratejilerin 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ı, uygulamanın penceresidir. Tam ekranı veya ekranın bir kısmını kaplayabileceğinden, uygulamanızın düzeniyle ilgili üst düzey kararlar verirken pencere boyutunu kullanın.

Birden fazla form faktörü için tasarlarken bu üst düzey kararların farklı yönlerde kollandığı eşik değerlerini bulun. Bu amaçla, Malzeme Tasarımı duyarlı düzen ızgarası, ham boyutları pencere boyutu sınıfları olarak adlandırılan ayrı, standartlaştırılmış gruplarla eşlemenize olanak tanıyan genişlik ve yükseklik ayırma noktaları sağlar. Dikey kaydırmanın yaygınlığı nedeniyle, çoğu uygulama esas olarak genişlik boyutu sınıflarına önem verir. Bu nedenle çoğu uygulama, yalnızca birkaç ayrılma noktası işlenerek tüm ekran boyutları için optimize edilebilir. (Pencere boyutu sınıfları hakkında daha fazla bilgi için Farklı ekran boyutlarını destekleme bölümüne bakın.)

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

Materyal Tasarım düzen yönergeleri uygulama çubukları, gezinme ve içerik için bölgeleri tanımlar. Genellikle ilk ikisi, görünüm hiyerarşisinin kökündeki (veya çok yakınlarındaki) kalıcı kullanıcı arayüzü öğeleridir. "Kalıcı" ifadesi, görünümün her zaman görünür olduğu anlamına gelmez. Bunun yerine, diğer içerik görünümleri taşınırken veya değişirken görünüm yerinde kalır. Örneğin, bir gezinme öğesi ekranın dışındaki kayan bir çekmecenin içinde olabilir, ancak çekmece her zaman oradadır.

Kalıcı öğeler duyarlı olabilir ve genellikle pencerenin tam genişliğini veya yüksekliğini kaplarlar. Bu nedenle, bunların nereye yerleştirileceğine karar vermek için boyut sınıflarını 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 ve büyük ekranlar için bir üst uygulama çubuğu kullanır. Uygun düzenler, daha önce açıklandığı gibi genişlik ayırma noktalarını 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, içerik için kalan alanı kullanın. Örneğin, uygulamanızın gezinme grafiğiyle bir NavHostFragment kullanabilirsiniz. Dikkat edilmesi gereken diğer noktalar için Duyarlı kullanıcı arayüzleri için gezinme bölümüne bakın.

Tüm verilerin farklı boyutlar için kullanılabildiğinden 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ı bir veri modeli kullanmaktadır. Jetpack ile bu rol genellikle ViewModels tarafından karşılanır. Bu da yapılandırma değişiklikleri genelinde hayatta kalma avantajına sahiptir (daha fazla bilgi için ViewModel'e Genel Bakış bölümüne bakın).

Farklı boyutlara uyum sağlayan bir düzen uygularken, geçerli boyuta dayalı farklı bir veri modeli kullanmak cazip gelebilir. Ancak bu durum, tek yönlü veri akışı ilkesine aykırıdır. Veriler, Görünümler'e doğru ve kullanıcı etkileşimleri gibi etkinlikler yukarı doğru akmalıdır. 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, bu süreci büyük ölçüde karmaşık hale getirir. Uygulamanın boyutu değiştiğinde, bir veri modelinden diğerine dönüştürmeyi de hesaba katmanız gerekir.

Bunun yerine, veri modelinizin en büyük boyut sınıfını barındırmasına izin verin. Ardından, geçerli boyut sınıfına uyum sağlamak için kullanıcı arayüzünde 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, bir şeyleri büyütmek ve içeriğinizi daha erişilebilir olacak şekilde yeniden biçimlendirmek için bir fırsat olabilir.

Koleksiyonları büyütün. Birçok uygulama, kaydırma kapsayıcısında RecyclerView veya ScrollView gibi bir öğe koleksiyonu gösterir. Bir kapsayıcının otomatik olarak daha büyük hale gelmesi, daha fazla içeriğin gösterilebileceği anlamına gelir. Ancak kapsayıcıdaki içeriğin aşırı genişlememesine veya bozulmamasına dikkat edin. Örneğin, RecyclerView kullanırken genişlik kompakt 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ı şekilde yerleştirdiğini gösteriyor.
Şekil 2. Farklı pencere boyutu sınıfları için farklı düzen yöneticileri.

Tek tek öğ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 şekilde de kullanılabilir.

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

Bu tür bir düzen oluşturmanın birçok yolu vardır ancak ConstraintLayout, özellikle bu amaç için uygundur. Çünkü bu araç, bir çocuk görünümünün boyutunu sınırlandırmak (yüzde cinsinden veya en boy oranını zorunlu kılmak dahil) ve alt öğelerini kendisine veya diğer çocuklara göre konumlandırmak için birçok yol sağladığından bu amaç için uygundur. ConstraintLayout ile Duyarlı Kullanıcı Arayüzü Oluşturma bölümünde tüm bu özellikler hakkında daha fazla bilgi edinebilirsiniz.

Varsayılan olarak daraltılabilir içerik gösterilir. Yeterli alan olduğunda, normalde yalnızca dokunma, kaydırma veya hareketler gibi ek kullanıcı etkileşimleri yoluyla erişebileceğiniz içerikleri gösterin. Örneğin, kompakt durumdayken sekmeli bir arayüzde görünen içerik, daha fazla alan olduğunda sütunlar veya bir liste halinde yeniden düzenlenebilir.

Kenar boşluklarını genişletme. Alan, içeriğinizin tamamından yararlandıktan sonra bile cazip bir yer bulamayacağınız kadar büyükse, düzenin kenar boşluklarını, içeriğin ortada kalması ve bağımsız görünümlerin aralarında doğal boyutlar ve boşluklar bulunması için genişletin.

Alternatif olarak, tam ekran bileşeni kayan iletişim kutusu kullanıcı arayüzüne dönüşebilir. Bu özellikle, söz konusu bileşen e-posta oluşturma veya takvim etkinliği oluşturma gibi kullanıcının anlık görevini yerine getirmek için özel odaklanma gerektiğinde özellikle uygundur.

Tam ekran iletişim kutusunu gösteren standart telefon ve katlanabilir telefon, kayan pencereyle aynı iletişim kutusunu gösteriyor.
Şekil 3. Orta ve genişletilmiş genişlikte standart bir iletişim kutusuna dönüştürülmüş 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 ilgili ek içerikler veya bağlamsal işlemler sunar. Tipik olarak bunlar, genişletilmiş yükseklik için ekranın alt üçte birlik kısmını veya genişletilmiş genişlik için sondaki üçte birlik kısmı kullanır.

Önemli bir nokta, bölmeyi göstermek için yeterli alan yoksa bu içeriğin nereye yerleştirileceğidir. Keşfedebileceğiniz birkaç alternatif şu şekildedir:

  • DrawerLayout kullanarak son kenarda yan çekmece
  • BottomSheetBehavior kullanan alt çekmece
  • Bir menü simgesine dokunarak erişilebilen menü veya pop-up pencere
Şekil 4. Destekleyici bölmede ek içerik sunmanın alternatif yolları.

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

Liste ayrıntısı görünümü uygulamak için SlidingPaneLayout ö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 alanlar layout_weight kullanılarak dağıtılabilir. Yeterli alan olmadığında, her bölme, düzenin tam genişliğini kullanır ve ayrıntı bölmesi ya ekrandan ya da liste bölmesinin en üstüne kaydırılır.

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

İki bölmeli düzen oluştur, SlidingPaneLayout işlevinin kullanımıyla ilgili daha fazla ayrıntı içerir. Ayrıca bu kalıbın, gezinme grafiğinizi yapılandırma şeklinizi etkileyebileceğini de unutmayın (bkz. Duyarlı kullanıcı arayüzleri için gezinme).

Ek kaynaklar