Büyük ekran standart düzenleri

Büyük ekran standart düzenleri, büyük ekranlı cihazlarda optimum kullanıcı deneyimi sağlayan, kanıtlanmış ve çok yönlü uygulama düzenleridir.

Standart düzenleri gösteren büyük ekranlı cihazların tasviri.

Standart düzenler duyarlı ve uyarlanabilirdir. Küçük ekranlı telefonları, tabletleri, katlanabilir telefonları ve ChromeOS cihazları destekler. Materyal Tasarım rehberliğinden türetilen, sayfa düzenleri hem estetik hem de işlevseldir.

Android çerçevesi, görünümler veya Jetpack Compose'u kullanarak düzenlerin uygulanmasını basit ve güvenilir hale getiren özel bileşenler içerir.

Standart düzenler, mükemmel uygulamaların temelini oluşturan ilgi çekici ve üretkenliği artıran kullanıcı arayüzleri oluşturur.

Büyük ekran standart düzenlerini zaten biliyorsanız ancak uygulamanız için hangi Android API'lerini kullanacağınızdan emin değilseniz, uygulamanızın kullanım alanları için hangi düzenin doğru olduğunu belirleme konusunda yardım almak üzere aşağıdaki Uygulanabilirlik bölümüne gidin.

Büyük ekranlara yönelik kullanıcı deneyimi tasarımları

Uygulamanızın büyük ekranlarda daha ne kadar olabileceğini keşfedin.

Büyük ekran düzenlerinden oluşan özenle seçilmiş bir koleksiyonu görmek için büyük ekran galerisini ziyaret edin.

Tura katılın
Çeşitli düzenler gösteren büyük ekranlı cihazlar.

Liste ayrıntısı

Liste ayrıntıları düzeninin tel çerçevesi.

Liste ayrıntısı düzeni, kullanıcıların açıklayıcı, açıklayıcı veya diğer tamamlayıcı bilgilere (öğe ayrıntısı) sahip öğe listelerini keşfetmelerine olanak tanır.

Düzen, uygulama penceresini biri liste ve diğeri ayrıntılar için olmak üzere yan yana iki bölmeye ayırır. Kullanıcılar öğe ayrıntılarını görüntülemek için listeden öğe seçer. Ayrıntıdaki derin bağlantılar, ayrıntı bölmesinde ek içeriği ortaya çıkarır.

Genişletilmiş genişlikli ekranlar (bkz. pencere boyutu sınıfları) hem listeyi hem de ayrıntıları aynı anda barındırır. Bir liste öğesi seçimi, seçilen öğeyle ilgili içeriği göstermek için ayrıntı bölmesini günceller.

Orta ve kompakt genişlikli ekranlarda, kullanıcının uygulamayla etkileşimine bağlı olarak liste veya ayrıntı gösterilir. Yalnızca liste görünür olduğunda bir liste öğesi seçildiğinde listenin yerine ayrıntı gösterilir. Yalnızca ayrıntı görünürken geri düğmesine basıldığında liste yeniden görüntülenir.

Cihaz yönü veya uygulama pencere boyutu değişiklikleri gibi yapılandırma değişiklikleri, ekranın pencere boyutu sınıfını değiştirebilir. Liste ayrıntısı düzeni, uygun şekilde yanıt vererek uygulama durumunu korur:

  • Hem liste hem de ayrıntı bölmelerini gösteren genişletilmiş genişlikli bir ekran, orta veya küçük bölme olarak daralırsa ayrıntı bölmesi görünür kalır ve liste bölmesi gizlenir
  • Orta veya kompakt bir ekranda yalnızca ayrıntı bölmesi görünür durumdaysa ve pencere boyutu sınıfı genişletilecek şekilde genişliyorsa liste ve ayrıntı birlikte gösterilir ve listede, ayrıntı bölmesinde içeriğe karşılık gelen öğenin seçildiği belirtilir.
  • Orta veya kompakt bir ekranda yalnızca liste bölmesi görünür ve genişletilirse liste ve yer tutucu ayrıntı bölmesi birlikte gösterilir

Liste ayrıntısı; mesajlaşma uygulamaları, kişi yöneticileri, dosya tarayıcıları veya içeriğin, ek bilgileri ortaya çıkaran bir öğe listesi olarak düzenlenebildiği tüm uygulamalar için idealdir.

Şekil 1. Görüşmelerin listesini ve seçilen bir görüşmenin ayrıntılarını gösteren mesajlaşma uygulaması.

Uygulama

Liste ayrıntıları düzeni; Oluşturma, görünümler ve etkinlik yerleştirme (eski uygulamalar için) gibi çeşitli teknolojilerle oluşturulabilir. Uygulamanız için en uygun teknolojiye karar verme konusunda yardım almak üzere aşağıdaki Uygulanabilirlik bölümüne bakın.

Oluştur

Oluştur'un bildirimsel paradigması, liste ve ayrıntı bölmelerinin aynı anda mı (genişlik pencere boyutu sınıfı genişletildiğinde) yoksa yalnızca liste veya ayrıntı bölmesinin mi (genişlik pencere boyutu sınıfı orta ya da kompakt olduğunda) gösterileceğini belirleyen pencere boyutu sınıf mantığını destekler.

Tek yönlü veri akışı sağlamak için tüm composable'ların verilere erişebilmesi ve doğru şekilde oluşturulabilmesi için geçerli pencere boyutu sınıfı ve seçili öğenin ayrıntıları (varsa) dahil olmak üzere tüm durumu kaldırın.

Küçük pencere boyutlarında yalnızca ayrıntı bölmesini gösterirken, ayrıntı bölmesini kaldırmak ve yalnızca liste bölmesini görüntülemek için bir BackHandler ekleyin. İşleyici, pencere boyutu sınıfına ve seçilen ayrıntı durumuna bağlı olduğundan BackHandler, uygulamada genel gezinmenin bir parçası değildir.

Örnek uygulama için Oluşturma ile List-detail örneğine bakın.

Görünümler ve parçalar

SlidingPaneLayout kitaplığı, görünümlere veya parçalara dayalı liste ayrıntısı düzenlerinin kolayca uygulanması için tasarlanmıştır.

Öncelikle SlidingPaneLayout öğesini XML düzeninizin kök öğesi olarak tanımlayın. Daha sonra, listeyi ve ayrıntı içeriğini temsil eden iki alt öğeyi (görünümler veya parçalar) ekleyin.

Liste ayrıntısı görünümleri veya parçaları arasında veri aktarmak için bir iletişim metodolojisi uygulayın. ViewModel, iş mantığını depolayabilme ve yapılandırma değişikliklerine dayanabilmesi nedeniyle önerilir.

SlidingPaneLayout, listenin ve ayrıntıların birlikte mi yoksa ayrı ayrı mı gösterileceğini otomatik olarak belirler. Hem liste hem de ayrıntılar için yeterli yatay alan olan bir pencerede liste ve ayrıntılar yan yana görünür. Yeterli alan bulunmayan bir pencerede, kullanıcının uygulamayla etkileşimine bağlı olarak liste veya ayrıntı gösterilir.

Örnek uygulama için Görünümleri olan List-detail örneğine bakın.

Etkinlik yerleştirme

Birden çok etkinlik içeren eski uygulamaların, iki etkinliği aynı ekranda yan yana veya üst üste yığılmış olarak görüntülemesini sağlamak için etkinlik yerleştirme özelliğini kullanın. Uygulamanız liste ayrıntıları düzeninin listesini ve ayrıntılarını ayrı etkinliklerde uyguluyorsa etkinlik yerleştirme, kod yeniden düzenlemesi çok az veya hiç olmadan liste ayrıntıları düzenini kolayca oluşturmanıza olanak tanır.

XML yapılandırma dosyası kullanıp bölünmüş bir görev penceresi belirterek etkinlik yerleştirmeyi uygulayın. Bu bölme, bölünmeyi başlatan birincil etkinliği ve ikincil bir etkinliği tanımlar. Pencere boyutu sınıfı ayrılma noktalarını kullanarak bölme için minimum görüntüleme genişliğini belirtin. Ekran genişliği minimum ayrılma noktasının altına düştüğünde etkinlikler üst üste görüntülenir. Örneğin, minimum görüntü genişliği 600 dp ise etkinlikler, kompakt ekranlarda üst üste, orta ve genişletilmiş ekranlarda yan yana görüntülenir.

Etkinlik yerleştirme özelliği, Android 12L (API düzeyi 32) ve sonraki sürümlerde desteklenir ancak cihaz üreticileri tarafından uygulanırsa daha düşük API düzeylerinde de kullanılabilir. Bir cihazda etkinlik yerleştirme kullanılamadığında, yedek davranış, kullanıcının uygulamayla etkileşimine dayalı olarak tüm uygulama penceresini kaplayan liste etkinliğiyle veya ayrıntı etkinliğiyle sonuçlanır.

Daha fazla bilgi için Etkinlik yerleştirme bölümüne bakın.

Örnek uygulama için Etkinlik yerleştirmeyle List-detail örneğine bakın.

Feed

Feed düzeninin tel çerçevesi.

Feed düzeni, eşdeğer içerik öğelerini yapılandırılabilir bir ızgarada düzenleyerek büyük miktarda içeriğin hızlı ve kolay bir şekilde görüntülenmesini sağlar.

Boyut ve konum, içerik öğeleri arasındaki ilişkileri oluşturur.

İçerik grupları, öğelerin aynı boyutta oluşturulup birlikte konumlandırılmasıyla oluşturulur. Öğeler, yakındaki öğelerden daha büyük oldukları için dikkat çeker.

Kartlar ve listeler, feed düzenlerinin yaygın bileşenleridir.

Izgara, tek bir kayan sütundan çok sütunlu kaydırmalı bir içerik feed'ine uyum sağlanabileceğinden, feed düzeni hemen hemen her boyuttan görüntüleri destekler.

Feed'ler, özellikle haber ve sosyal medya uygulamaları için uygundur.

Şekil 2. Farklı boyutlardaki kartlarda yayınlar gösteren sosyal medya uygulaması.

Uygulama

Oluştur

Feed, bir ızgara içine yerleştirilmiş dikey kaydırma kapsayıcısında çok sayıda içerik öğesinden oluşur. Geç listeler, sütun veya satırlarda çok sayıda öğeyi verimli bir şekilde oluşturur. Geç ızgaralar, öğeleri ızgaralar halinde oluşturarak öğe boyutlarının ve aralıkların yapılandırmasını destekler.

Izgara öğeleri için izin verilen minimum genişliği ayarlamak amacıyla ızgara düzeninin sütunlarını kullanılabilir görüntüleme alanına göre yapılandırın. Izgara öğelerini tanımlarken, bazı öğeleri diğerlerine göre vurgulamak için sütun aralıklarını ayarlayın.

Bölüm başlıkları, ayırıcılar veya feed'in tam genişliğini kaplayacak şekilde tasarlanmış diğer öğelerde, düzenin tam genişliğini kaplayacak şekilde maxLineSpan kullanın.

Birden fazla sütun göstermek için yeterli alanı olmayan kompakt genişlikli ekranlarda LazyVerticalGrid, bir LazyColumn gibi davranır.

Örnek uygulama için Oluşturma İçeren Feed örneğine bakın.

Görünümler ve parçalar

RecyclerView, tek bir sütunda çok sayıda öğeyi etkili bir şekilde oluşturur. GridLayoutManager, öğeleri bir ızgara üzerine yerleştirerek öğe boyutlarını ve aralıklarının yapılandırılmasına olanak tanır.

Öğeler için izin verilen minimum genişliği ayarlamak amacıyla ızgara sütunlarını, kullanılabilir görüntüleme alanının boyutuna göre yapılandırın.

Öğe başına bir kapsam olan GridLayoutManager varsayılan kapsam stratejisi, özel bir SpanSizeLookup oluşturularak geçersiz kılınabilir. Bazı öğeleri diğerlerine göre vurgulamak için aralığı ayarlayın.

Yalnızca bir sütun için yeterli alana sahip kompakt genişlikli ekranlarda GridLayoutManager yerine LinearLayoutManager değerini kullanın.

Örnek uygulama için Görünümleri olan feed örneğine bakın.

Destek bölmesi

Destekleyici bölme düzeninin tel çerçevesi.

Destekleyici bölme düzeni, uygulama içeriğini birincil ve ikincil görüntüleme alanları olarak düzenler.

Birincil görüntüleme alanı, uygulama penceresinin büyük bir kısmını kaplar (genellikle üçte ikisi) ve ana içeriği barındırır. İkincil görüntüleme alanı, uygulama penceresinin geri kalanını kaplayan ve ana içeriği destekleyen içeriğin sunulduğu bir bölmedir.

Destekleyici bölme düzenleri, genişletilmiş genişlikli ekranlarda yatay yönde iyi sonuç verir (bkz. Pencere boyutu sınıfları). İçerik daha dar görüntü alanlarına uyarlanabiliyorsa veya ek içerik başlangıçta menü ya da düğme gibi bir kontrolle erişilebilen bir alt veya yan sayfada gizlenebiliyorsa, orta veya kompakt genişlikli ekranlar hem birincil hem de ikincil görüntüleme alanlarının gösterilmesini destekler.

Destekleyici bölme düzeni, birincil ve ikincil içeriğin ilişkisi açısından liste ayrıntısı düzeninden farklıdır. İkincil bölme içeriği yalnızca birincil içerikle ilişkili olarak anlamlıdır; örneğin, destekleyici bölme aracı penceresi kendi başına alakasızdır. Ancak liste ayrıntısı düzeninin ayrıntı bölmesindeki ek içerik, birincil içerik (örneğin, bir ürün listelemesindeki bir ürünün açıklaması) olmadığında bile anlamlıdır.

Destek bölmesi için kullanım örnekleri şunlardır:

  • Verimlilik uygulamaları: Destek bölmesinde incelemeci yorumlarıyla birlikte bir doküman veya e-tablo
  • Medya uygulamaları: Destekleyici bölmedeki ilgili videoların listesiyle desteklenen bir video akışı veya oynatma listesiyle desteklenen bir müzik albümünün tasviri
  • Uygulama arama ve referans: Destek bölmesindeki sonuçları gösteren bir sorgu giriş formu
Şekil 3. Destek bölmesinde ürün açıklamaları bulunan alışveriş uygulaması.

Uygulama

Oluştur

Oluşturma, hem ana içeriğin hem de destekleyici içeriğin aynı anda gösterilip gösterilmeyeceğini veya destekleyici içeriğin alternatif bir konuma yerleştirilip yerleştirilmeyeceğini belirlemenize olanak tanıyan pencere boyutu sınıf mantığını destekler.

Mevcut pencere boyutu sınıfı ve ana içerik ile destekleyici içerikteki verilerle ilgili bilgiler de dahil olmak üzere tüm durumları kaldır.

Kompakt genişlikte ekranlar için, destekleyici içeriği ana içeriğin altına veya bir alt sayfanın içine yerleştirin. Orta ve genişletilmiş genişliklerde, destekleyici içeriği ana içeriğin yanına, içeriğe ve kullanılabilir alana göre uygun boyutta olacak şekilde yerleştirin. Orta düzeyde genişlikte ekran alanını ana ve destekleyici içerik arasında eşit bir şekilde bölün. Genişletilmiş genişlik için alanın% 70'ini ana içeriğe, %30'unu destekleyici içeriğe ayırın.

Örnek uygulama için Oluşturma örneği içeren Destek bölmesi bölümüne bakın.

Görünümler ve parçalar

Destek bölmesi düzeni, LinearLayout veya ConstraintLayout gibi bir yardımcı düzen kullanılarak uygulanır. Uygulamanızın yatay görüntüleme alanını üç kategoriye bölen pencere boyutu sınıflarını belirleyin: kompakt (< 600 dp), orta (>= 600 dp) ve genişletilmiş (>= 840 dp).

Her pencere boyutu sınıfı için düzenleri aşağıdaki gibi tanımlayın:

  • Kompakt: Uygulama kaynakları layout klasörüne, destek bölmesini ana içeriğin altına veya alt sayfanın içine yerleştiren içeriği yerleştirin
  • Orta: layout-w600dp klasöründe, ana içeriğin ve destekleyici bölmenin oluşturulmasını yan yana (yatay görüntüleme alanını eşit bir şekilde bölerek) destekleyici bölme içeriğini sağlayın.
  • Genişletilmiş: layout-w840dp klasörüne, ana içeriği ve destek bölmesi oluşturmayı yan yana gösteren destek bölmesi içeriğini ekleyin. Ancak, destekleyici bölme yatay alanın yalnızca% 30'unu kaplayarak kalan% 70'lik kısmını ana içeriğe bırakın.

Görünümleri, parçaları veya bir kombinasyonu kullanarak ana içerik ile destek bölmesi arasında iletişim kurmak için ViewModel kullanın.

Uygulama örnekleri için aşağıdaki örneklere bakın:

Uygulanabilirlik

Standart düzenler, kolay erişim ve ayrıntılı keşif için çok yönlü içerik sunumları oluşturur. Uygulamanızın kullanım alanlarına en uygun düzen ve uygulama stratejisini belirlemek için aşağıdaki akış şemasından yararlanın.

Farklı uygulama türlerinde uygulanan standart düzen örnekleri için büyük ekran galerisine bakın.

Şekil 4. Büyük ekran standart düzen karar ağacı.

Ek kaynaklar