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.
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.
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.
İç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
İ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.
İ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
- Materyal Tasarım — Düzen uygulama
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- İki bölmeli düzen oluşturma
- Görünüm içeren duyarlı/uyarlanabilir tasarım
- Büyük ekran standart düzenleri