Android uygulamalarının, cihaz form faktörlerinin sürekli genişleyen bir ekosistemini desteklemesi gerekir. Bir uygulamanın kullanıcı arayüzü, çok çeşitli ekran boyutlarının yanı sıra farklı yönler ve cihaz durumlarına uyacak şekilde duyarlı olmalıdır.
Duyarlı 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. Düzenlemeler 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 sunmayı ifade eder. Kullanıcının katıldığı deneyim ne olursa olsun, kesintisiz devam etmelidir. Boyuttaki değişiklik, görünüm hiyerarşisinin tamamının yok edilmesi ve yeniden oluşturulması ile sonuçlanabileceğinden, kullanıcının yerini veya verilerini kaybetmemesi önemlidir.
Kaçınılması gerekenler
Düzenle ilgili kararlar verirken fiziksel, donanım değerleri kullanmaktan kaçının. Sabit bir değere göre 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. Hatta birden fazla fiziksel ekran da olabilir (ör. katlanabilir cihazlar veya birden fazla ekranı olan cihazlar). Tüm bu durumlarda, fiziksel ekran boyutu içeriğin nasıl görüntüleneceğine karar verirken dikkate alınmaz.
Aynı nedenle, uygulamanızı belirli bir yöne 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 durumdaki bir tablette, uygulama genişliğinden fazla olduğu için dikey olabilir.
Ayrıca, cihazın telefon mu tablet mi olduğunu belirlemeye çalışmaktan kaçının. Tablet olarak nitelendirilebilecek özellikle neler biraz özneldir: 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 bu ayrım önemini yitirir.
Yukarıdaki 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 asıl olarak uygulamanıza ayrılan kısmı, uygulamanın penceresidir. Tam ekranı veya ekranın bir kısmını kaplayabilir. Bu nedenle, uygulamanızın düzeniyle ilgili üst düzey kararlar verirken pencere boyutunu kullanın.
Birden fazla form faktörü için tasarım yaparken bu üst düzey kararların farklı yönlerde kollandığı eşik değerlerini bulun. Bu amaçla, Material Design 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ış gruplarla eşleyebilirsiniz. Dikey kaydırmanın yaygınlığı nedeniyle çoğu uygulama ağırlıklı olarak 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ünü inceleyin.)
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üntüleme sayısı hareket ederken veya değişirken ekranda kalır. Örneğin, bir gezinme öğesi ekran dışındaki bir sürgülü ç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ı nereye yerleştireceğinize 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 alt çubuk, büyük ekranlar için ü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 hususlar 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 kullanır. Jetpack ile bu rol genellikle ViewModel'ler tarafından karşılanır. Bu, yapılandırma değişiklikleri genelinde hayatta kalabilme avantajını da sunar (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 göre farklı bir veri modeli kullanmak cazip gelebilir. Ancak bu, tek yönlü veri akışı ilkesine aykırıdır. Verilerin aşağı doğru Görünümler'e akması ve kullanıcı etkileşimleri gibi etkinliklerin yukarı doğru akması 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 bu durumu önemli ölçüde karmaşık hale getirir. Uygulamanın boyutu değiştiğinde, bir veri modelinden diğerine dönüştürmeyi 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, bazı öğeleri büyütmek ve daha erişilebilir hale gelecek şekilde içeriğinizi yeniden biçimlendirmek için bir fırsat olabilir.
Koleksiyonları büyütün. Birçok uygulama, RecyclerView veya ScrollView gibi bir kaydırma kapsayıcısında öğ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şletilmediğine veya bozulmadığına dikkat edin. Örneğin, RecyclerView ile genişlik yüksek olmadığında GridLayoutManager, StaggeredGridLayoutManager veya FlexboxLayout gibi farklı bir düzen yöneticisi kullanabilirsiniz.
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 şekilde de kullanılabilir.
Çarpıcı bir öğe 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 bunu genişletin. Diğer destekleyici öğeler, hero görünümünün çevresinde 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 ile veya en boy oranını zorunlu kılmak dahil) ve alt öğelerini kendine veya diğer alt öğelere göre konumlandırmak için birçok yol sağladığından bu amaç için özellikle uygundur. ConstraintLayout ile Duyarlı Kullanıcı Arayüzü Oluşturma bölümünde tüm bu özellikler hakkında daha fazla bilgi edinin.
Varsayılan olarak daraltılabilir içeriği gösterin. Yeterli alan olduğunda, normalde yalnızca dokunma, kaydırma veya hareketler gibi ek kullanıcı etkileşimleri yoluyla erişilebilen içeriği gösterin. Örneğin, sekmeli arayüzde kompakt olduğunda görünen içerik, daha fazla alan kullanılabilir olduğunda sütunlar veya bir liste şeklinde yeniden düzenlenebilir.
Kenar boşluklarını genişlet. Alan, içeriğinizin tamamını kullanmanıza rağmen ilgi çekici bir eşleşme bulamayacağınız kadar büyükse, düzenin kenar boşluklarını genişleterek içeriğin ortada kalmasını ve tek tek görünümler arasında doğal boyutlar ve boşluklar olmasını sağlayın.
Alternatif olarak, tam ekran bileşeni, kayan iletişim kutusu kullanıcı arayüzüne dönüşebilir. Bu uygulama özellikle, e-posta oluşturma veya takvim etkinliği oluşturma gibi kullanıcının anında gerçekleştirebileceği bir görevi yerine getirmek için özellikle odaklanmayı gerektiren bileşende oldukça uygundur.
İçerik ekle
Standart düzenler: Destek bölmesi, Liste ayrıntısı görünümü
Destekleyici bölme kullanın. Destekleyici bölmeler, birincil içerikle ilgili ek içerik veya bağlamsal işlemler (bir dokümandaki yorumlar veya bir oynatma listesindeki öğeler gibi) 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.
Bölmeyi göstermek için yeterli alan olmadığında bu içeriğin nereye yerleştirileceği önemli bir konudur. Keşfedebileceğiniz birkaç alternatif şu şekildedir:
DrawerLayoutkullanarak son kenarda yan çekmeceBottomSheetBehaviorkullanan alt çekmece- Menü simgesine dokunarak erişilebilen menü veya pop-up pencere
İki bölmeli bir düzen oluşturun. Büyük ekranlar, normalde daha küçük ekranlarda ayrı ayrı görünen özelliklerin bir kombinasyonunu gösterebilir. Birçok uygulamada yaygın olarak kullanılan etkileşim kalıbı, kişiler veya arama sonuçları gibi öğelerin listesini göstermek ve öğe seçildiğinde öğenin ayrıntısına geçmektir. Daha büyük ekranların listesini 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'e özel widget'ı kullanın. Bu widget, iki bölme için belirtilen layout_width değerine göre 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 bölme, düzenin tam genişliğini kullanır ve ayrıntı bölmesi ya ekrandan ya da liste bölmesinin üst kısmına kayar.
İki bölmeli düzen oluştur seçeneği, SlidingPaneLayout öğesinin kullanımıyla ilgili daha fazla ayrıntı içerir. 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
- Materyal Tasarım — Düzeni uygulama