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

Android uygulamalarının sürekli olarak genişleyen bir cihaz biçimi ekosistemini desteklemesi gerekir faktörleri olur. Uygulamaların kullanıcı arayüzü, çeşitli ekran boyutlarına uyacak şekilde duyarlı olmalıdır farklı yönler ve cihaz durumları gösterilir.

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

Esneklik, mevcut alanı en iyi şekilde kullanan site düzenleridir. ayarlama yapabilirsiniz. Düzenlemeler birçok biçimde olabilir: tek bir görünümün boyutunu büyütüp görünümleri daha sonra tutarlı olacak şekilde ek görünümlerin gösterilmesi veya gizlenmesi ya da veya bunların kombinasyonudur.

Süreklilik, geçiş sırasında sorunsuz bir kullanıcı deneyimi sunmayı ifade eder başka bir pencere boyutundan başka bir boyuta geçirebilir. Kullanıcının etkileşimde bulunduğu deneyim ne olursa olsun kesintisiz olarak devam eder. Çünkü boyuttaki bir değişiklik tüm görünüm hiyerarşisinin yok edilmesi ve yeniden oluşturulmasıyla birlikte, kullanıcının yerini veya verilerini kaybetmemesi önemlidir.

Yapılmaması gerekenler

Düzenle ilgili kararlar alırken fiziksel, donanım değerleri kullanmaktan kaçının. Google sabit bir değere dayanarak karar vermek cazip gelebilir, ancak Bu değerlerin kullanıcı arayüzünüzün kapladığı alanı belirlemek için bazı kaynakları inceleyelim.

Uygulamalar, çoklu pencere modunda çalışırken pencere yeniden boyutlandırmasıyla karşılaşabilir. ChromeOS gibi serbest biçimli pencerelere sahiptir. Daha fazla fiziksel bir ekrandan daha fazladır (ör. katlanabilir veya birden fazla ekran. Her durumda, fiziksel ekran boyutu karar vermede son derece önemlidir.

Şekil 1. Pencere boyutları fiziksel cihazdan farklı olabilir veya görüntü boyutu.

Aynı nedenle, uygulamanızı belirli bir yönde kilitlemekten veya en boy oranı gibi). Cihaz belirli bir yönde olsa da boyutunu temel alarak uygulamanız farklı bir yönde olabilir. penceresini kapatın. Örneğin, yatay bir tablette çoklu pencere modunu kullanırken Boyu genişliğinden fazla olduğu için uygulama dikey modda da olabilir.

Ayrıca cihazın telefon mu tablet mi olduğunu belirlemeye çalışmamalısınız. Tablet olarak nitelendirilen özellik biraz özneldir: Tablet gibi belirli bir boyuta veya en boy oranına ya da boyut ve en boy kombinasyonuna sahip olma oranı nedir? Yeni form faktörleri ortaya çıktıkça bu varsayımlar da değişebilir. ayrım önemini yitirir.

Önceki stratejilerden herhangi birini denemek yerine, ayrılma noktalarını ve zaman aralıklarını beden sınıfları var.

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

Ekranın uygulamanıza ayrılan gerçek bölümü, uygulamanın penceresini kapatın. Ekranın tamamını veya bir kısmını kaplayabileceğinden karar verirken pencere boyutunuza göre oluşturabilirsiniz.

Birden fazla form faktörü için tasarlarken bunların şu konumlarda olduğu eşik değerlerini bulun: üst düzey kararların farklı yönlere ayrılmasını sağlar. Bu doğrultuda, Materyal Duyarlı düzen ızgarası tasarlayın genişlik ve yükseklik için ayrılma noktaları sağlar. Bu, ham boyutları eşlemenize olanak tanır adı verilen ayrı ve standartlaştırılmış gruplara ayırabiliriz. Kaynak: Dikey kaydırmanın bolluğu nedeniyle çoğu uygulama, öncelikli olarak genişliğine önem verir. Böylece çoğu uygulama, mobil cihazlardaki mevcut boyutlara göre tüm ekran boyutları için yalnızca birkaç ayrılma noktası var. (Pencere boyutu sınıfları hakkında daha fazla bilgi için Pencere boyutu sınıfları.)

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ımlayın. Genellikle ilk e-posta ikisi, görünümün kökündeki (veya çok yakınındaki) kalıcı kullanıcı arayüzü öğeleridir hiyerarşik olarak düzenlenmiştir. “Kalıcı” görünümün her zaman Ancak diğer içerik görüntüleme sayılarında herhangi bir değişiklik olmadan olabilir. Örneğin, bir gezinme öğesi kayan bir ancak her zaman orada olmayan bir çekmece var demektir.

Kalıcı öğeler duyarlı olabilir ve genellikle tam genişlikte veya pencerenin tam yüksekliğinde olmalıdır; bu nedenle, nereye yerleştireceğinize karar verir. Bu, içerik için kalan alanı tanımlar. Aşağıdaki snippet'te etkinlik, küçük ekranlar için bir alt çubuk ve Üst kısımda yer alan uygulama çubuğu. Uygun düzenler, genişlik ayrılma noktaları kullanır gerekir.

<!-- 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 alanı kullanın içerik için (ör. uygulamanızın gezinme işlevinde NavHostFragment kullanarak) grafiğe dönüştürülebilir. Görüntüleyin Duyarlı kullanıcı arayüzleri için gezinme göz önünde bulundurun.

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ı sağlayan Android bileşenleri (Etkinlikler, Parçalar ve Görüntüleme sayısı) tıklayın. Jetpack ile bu rolün genellikle iki veya daha fazla ek faydası (bkz. Daha fazla bilgi için ViewModel'e Genel Bakış ) ekleyin.

Farklı boyutlara uyum sağlayan bir düzen uygularken mevcut boyuta göre farklı bir veri modeli kullanmak cazip gelebilir. Ancak, veri akışı ilkesine aykırıdır. Veri akışı olmalıdır Görünümler'e veya kullanıcı etkileşimleri gibi etkinliklerin yukarıya doğru ilerlemesi gerekir. Veri modelinin bağımlı olduğu diğer yönde bir bağımlılık kullanıcı arayüzü katmanının yapılandırılması bunu önemli ölçüde karmaşık hale getirir. uygulamanın boyutu değiştiğinde bir veri modelinden başka bir tane.

Bunun yerine, veri modelinizin en büyük boyut sınıfını barındırmasına izin verin. kullanıcı arayüzündeki içerikleri seçmeli olarak gösterebilir, gizleyebilir veya yeniden konumlandırabilir. geçerli boyut sınıfı. Aşağıda, projenizin başarısının ne kadar önemli olduğuna karar verirken düzeninizin, boyut sınıfları arasında geçiş yaparken nasıl davranacağına karar verin.

İçeriği genişlet

Standart düzenler: Feed

Genişletilmiş alan, bir şeyleri büyütme ve yeniden biçimlendirme fırsatı olabilir. erişilebilir hale getirebilirsiniz.

Koleksiyonları büyütün. Birçok uygulama, bir öğe koleksiyonunu RecyclerView veya ScrollView gibi bir kaydırma kapsayıcısı kullanın. Bir otomatik olarak daha fazla içeriğin gösterilebileceği anlamına gelir. Ancak, kapsayıcının içindeki içeriğin gerilmiş veya bozuktur. Örneğin, bir RecyclerView ile şunları değerlendirebilirsiniz: gibi farklı bir düzen yöneticisi kullanarak GridLayoutManager, StaggeredGridLayoutManager, veya FlexboxLayout genişlik küçük olmamalıdır.

Şekil 2. Farklı pencere boyutları için farklı düzen yöneticileri sınıflar.

Ayrı ayrı öğeler, daha fazla öğe görüntülemek için farklı bir boyut veya şekil de kullanabilir ve öğe sınırlarını daha kolay bir şekilde ayırt edebiliriz.

Çarpıcı bir öğeyi vurgulayın. Düzende uygulama penceresi büyüdüğünde kullanıcının ilgi alanlarını korumak için dikkat edin. Diğer destekleyici öğeler, ekranın alt kısmındaki hero görünüm.

Böyle bir sayfa düzeni oluşturmanın birçok yolu vardır ancak ConstraintLayout bu amaç için uygundur çünkü bu yaklaşım, bir alt görünümün boyutunu kısıtlama (yüzde olarak veya bir özelliği zorunlu kılma dahil) ve alt öğelerini kendine veya diğer platformlara göre konumlandırmasını Tüm bu özelliklerle ilgili daha fazla bilgiyi şurada bulabilirsiniz: ConstraintLayout ile Duyarlı Kullanıcı Arayüzü oluşturun.

Varsayılan olarak daraltılabilir içeriği gösterin. Boş alan olduğunda normalde yalnızca ek kullanıcı yoluyla erişilebilen içerik dokunma, kaydırma veya hareketler gibi etkileşimler. Örneğin, olarak yeniden düzenlenebileceğinde sekmeli bir arayüzde görünür. sütunlar veya bir liste oluşturabilirsiniz.

Kenar boşluklarını genişletin. Alan çok büyükse, hitap etmek için uygun bir yararlandıktan sonra bile uyum sağlamanıza yardımcı olabilir. Ardından, Böylece, içerik ortalanmış olarak kalacak ve her görünüm, doğal boyutları ve aralıkları belirler.

Alternatif olarak, tam ekran bileşeni kayan iletişim kutusuna dönüşebilir Kullanıcı arayüzü. Bu seçenek, özellikle ilgili bileşen için benzersiz bir e-posta yazma veya e-posta yazma gibi bir takvim etkinliği oluşturarak.

Şekil 3. Tam ekran iletişim kutusu, standart iletişim kutusuna dönüştürüldü orta ve genişletilmiş genişlikte.

İçerik ekle

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

Destekleyici bölme kullanın. Destekleyici bölmede ek içerik veya birincil içerikle ilişkili bağlamsal işlemler (ör. bir doküman veya öğe olabilir. Bunlar genellikle sayfanın alt üçte birlik genişletilmiş genişlik için, sonraki üçte birlik ekranla değiştirin.

Dikkat edilmesi gereken en önemli hususlardan biri, uygun olmayan yeterli alan sağlar. 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

ziyaret edin.

ziyaret edin.

Şekil 4. Bir reklamda ek içerik sunmanın alternatif yolları bölmesini de kullanabilirsiniz.

İki bölmeli bir düzen oluşturun. Büyük ekranlarda Normalde daha küçük ekranlarda ayrı ayrı görünen özellikler. Yaygın bir uygulamadaki etkileşim kalıbı, kişiler veya uygulamalar gibi öğelerin bir listesini arama sonuçlarını görür ve öğe seçildiğinde öğenin ayrıntısına geçer. Listeyi daha büyük ekranlar için genişletmek yerine, liste ayrıntısı görünümünü kullanın iki bölmeli bir düzende yan yana gösterilecek. Bir liste ayrıntıları görünümünün ayrıntı bölmesi, bağımsız bir bağımsız olarak gösterilebilecek bir öğedir.

Şunu kullanın: SlidingPaneLayout özel widget'ı kullanarak birinci taraf verilerinizi Google'a gönderebilirsiniz. Bu widget'ı her ikisini de görüntülemek için yeterli alan olup olmadığını otomatik olarak hesaplar iki bölme için belirtilen layout_width değerine göre bölmeleri bir arada gösterir. ve kalan alan layout_weight kullanılarak dağıtılabilir. Bir özellik olduğunda bir bölme daha yoksa her bölme, düzenin tam genişliğini kullanır ve ya da liste bölmesinin üzerine veya ekranın dışına kaydırılır.

5. Şekil. Genişletilmiş olarak iki bölmenin gösterildiği SlidingPaneLayout en küçük pencere genişliğine sahip bir bölme.

İki bölmeli düzen oluştur, daha fazlasını içerir SlidingPaneLayout kullanımı hakkında ayrıntılı bilgi. Ayrıca bu kalıbın zaman içinde gezinme grafiğinizi nasıl yapılandıracağınızı etkiler (bkz. Duyarlı kullanıcı arayüzleri için gezinme).

Ek kaynaklar

• Materyal Tasarım — Düzen uygulama

ziyaret edin.