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, başarısı kanıtlanmış, ç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 cihazları ve ChromeOS cihazları destekler. Materyal Tasarım yönergelerinden elde edilen düzenler, 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, etkileyici ve üretkenliği artıran kullanıcı arayüzleri oluşturarak harika uygulamaların temelini oluşturur.

Büyük ekran standart düzenleri hakkında zaten bilginiz varsa ancak uygulamanız için hangi Android API'lerini kullanacağınızı bilmiyorsanız aşağıdaki Uygulanabilirlik bölümüne giderek uygulamanızın kullanım alanlarına en uygun düzenin belirlenmesine yardımcı olabilirsiniz.

Liste-ayrıntısı

Liste ayrıntısı düzeninin şablonu.

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şfetmesini sağlar.

Düzen, uygulama penceresini yan yana iki bölmeye böler: Liste için bir tane, ayrıntı için bir tane. 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 gösterir.

Genişletilmiş genişlikte ekranlar (pencere boyutu sınıflarına bakın) hem listeye hem de ayrıntılara aynı anda uyum sağlar. Bir liste öğesinin seçilmesi, ayrıntı bölmesini seçili öğeyle ilgili içeriği gösterecek şekilde günceller.

Orta ve kompakt genişlikli ekranlarda, kullanıcının uygulamayla etkileşimine bağlı olarak listeyi veya ayrıntıyı gösterir. Yalnızca liste göründüğünde, bir liste öğesinin seçilmesi listenin yerine ayrıntıyı gösterir. Yalnızca ayrıntı görünür olduğunda 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 detayı düzeni, uygulama durumunu koruyarak uygun şekilde yanıt verir:

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

List-detail mesajlaşma uygulamaları, kişi yöneticileri, dosya tarayıcıları veya içeriğin ek bilgileri gösteren bir öğe listesi şeklinde düzenlenebildiği tüm uygulamalar için idealdir.

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

Uygulama

Liste ayrıntılarına sahip bir düzen; Oluştur, görünümler ve etkinlik yerleştirme (eski uygulamalar için) gibi çeşitli teknolojilerle oluşturulabilir. Uygulamanıza en uygun teknolojinin hangisi olduğuna karar vermenize yardımcı olması için aşağıdaki Uygulanabilirlik bölümünü inceleyin.

Oluştur

Compose'un bildirim temelli paradigması, listenin 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 veya kompakt olduğunda) gösterileceğini belirleyen pencere boyutu sınıfı mantığını destekler.

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

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, genel uygulama gezinmesinin bir parçası değildir.

Örnek uygulama için List-detail with Compose örneğini inceleyin.

Görünümler ve parçalar

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

Öncelikle, bir 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 yöntemi uygulayın. ViewModel, iş mantığını depolayabilme ve yapılandırma değişikliklerinden ayakta kalabilmesi nedeniyle önerilir.

SlidingPaneLayout, listenin ve ayrıntıların birlikte mi yoksa ayrı olarak mı gösterileceğini otomatik olarak belirler. İkisini de kapsayacak yeterli yatay alana sahip bir pencerede liste ve ayrıntı 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örüntülenir.

Örnek uygulama için List-detail with view örneğine bakın.

Etkinlik yerleştirme

Etkinlik yerleştirmeyi kullanarak eski, çok etkinlikli uygulamaların iki etkinliği aynı ekranda yan yana veya üst üste yığılmış olarak görüntülemesini sağlayabilirsiniz. Uygulamanız, liste ayrıntıları düzeninin listesini ve ayrıntılarını ayrı etkinliklerde uyguluyorsa etkinlik yerleştirme, çok az kod yeniden düzenlemesi yaparak veya hiç kod yeniden düzenleme yapmadan kolayca liste ayrıntısı düzenini oluşturabilmenizi sağlar.

XML yapılandırma dosyası kullanıp görev penceresi bölmesi belirterek etkinlik yerleştirmeyi uygulayın. Bölme, bölmeyi 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ği belirtin. Görüntü genişliği minimum ayrılma noktasının altına düştüğünde etkinlikler üst üste gösterilir. Örneğin, minimum görüntüleme genişliği 600 dp ise etkinlikler, kompakt ekranlarda üst üste yan yana ancak orta ve genişletilmiş ekranlarda yan yana gösterilir.

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

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

Örnek uygulama için Etkinlik yerleştirmeyle liste ayrıntısı örneğine bakın.

Feed

Feed düzeni tel çerçevesi.

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

Boyut ve konum içerik öğeleri arasında ilişkiler kurar.

İçerik grupları, öğelerin aynı boyutta olup birlikte konumlandırılmasıyla oluşturulur. Dikkati çeken öğeler, yakındaki öğelerden daha büyük olur.

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

Tablo, tek bir kayan sütundan çok sütunlu bir kaydırma içerik feed'ine uyarlanabildiği için feed düzeni hemen hemen her boyuttaki ekranları destekler.

Özet akışları özellikle haber ve sosyal medya uygulamaları için çok uygundur.

Şekil 2. Yayınları çeşitli boyutlardaki kartlarda gösteren sosyal medya uygulaması.

Uygulama

Oluştur

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

Izgara öğeleri için izin verilen minimum genişliği ayarlamak üzere ı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 kapsamlarını ayarlayın.

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

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

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

Görünümler ve parçalar

RecyclerView, çok sayıda öğeyi tek bir sütunda verimli bir şekilde oluşturur. GridLayoutManager, öğeleri bir ızgaranın üzerinde yerleştirerek öğe boyutlarının ve kapsamlarının yapılandırılmasına olanak tanır.

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

Öğe başına bir aralık olan GridLayoutManager varsayılan kapsam stratejisi, özel bir SpanSizeLookup oluşturularak geçersiz kılınabilir. Bazı öğeleri diğerlerinden daha fazla 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üm içeren feed örneğine bakın.

Destek bölmesi

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

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

Birincil görüntüleme alanı, uygulama penceresinin büyük bir kısmını (genellikle yaklaşık üçte ikisi) kaplar 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çerik sunan bir bölmedir.

Destekleyici bölme düzenleri, yatay yönlü genişletilmiş genişlikli ekranlarda (pencere boyutu sınıflarına bakın) iyi sonuç verir. İçerik daha dar görüntüleme alanlarına uyarlanabilirse veya ek içerik başlangıçta menü ya da düğme gibi bir kontrol aracılığıyla erişilebilen bir alt veya yan sayfada gizlenebilirse, orta veya kompakt genişlikli ekranlar hem birincil hem de ikincil görüntüleme alanlarını 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, bir destek bölmesi araç penceresi tek başına alakasızdır. Bununla birlikte, 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ı) olmadan da anlamlıdır.

Bölmeyi desteklemek için kullanım alanlarından bazıları şunlardır:

  • Üretkenlik uygulamaları: Destekleyici bölmede yorumcu yorumlarının eşlik ettiği bir doküman veya e-tablo
  • Medya uygulamaları: Destekleyici bir bölmede ilgili videoların listesiyle desteklenen bir video yayını veya bir oynatma listesiyle tamamlanmış müzik albümünün tasviri
  • Arama ve referans uygulamaları: Destekleyici bölmede sonuçların yer aldığı bir sorgu giriş formu
Şekil 3. Destekleyici bölmede ürün açıklamalarının yer aldığı alışveriş uygulaması.

Uygulama

Oluştur

Compose, hem ana içeriğin hem de destekleyici içeriğin aynı anda gösterilip gösterilmeyeceğini veya destekleyici içeriği alternatif bir konuma yerleştirip yerleştirmeyeceğinizi belirlemenizi sağlayan pencere boyutu sınıfı mantığını destekler.

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

Kompakt genişlikli ekranlarda, destekleyici içeriği ana içeriğin altına veya alt sayfanın içine yerleştirin. Orta ve genişletilmiş genişliklerde, destekleyici içeriği ana içeriğin yanına, mevcut içeriğe ve alana göre uygun şekilde boyutlandırılmış olarak yerleştirin. Orta 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 verin.

Örnek uygulama için Oluşturma ile Destek bölmesi örneğine bakın.

Görünümler ve parçalar

Destekleyici bölme düzeni, LinearLayout veya ConstraintLayout gibi bir yardımcı düzen kullanılarak uygulanır. Uygulamanızın kullanabileceği yatay görüntüleme alanı miktarını üç kategoriye ayıran pencere boyutu sınıflarını oluşturun: kompakt (< 600 dp), orta (>= 600 dp) ve genişletilmiş (>= 840 dp).

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

  • Kompakt: Uygulama kaynakları layout klasöründe, destek bölmesini oluşturan içeriği ana içeriğin altına veya alt sayfanın içine yerleştirin
  • Orta: layout-w600dp klasöründe, yatay görüntü alanını eşit şekilde bölerek ana içerikle sonuçlanan destekleyici bölme içeriğini ve destek bölmesini yan yana sağlayın
  • Genişletilmiş: layout-w840dp klasörüne, ana içerik ile destek bölmesinin yan yana oluşturulmasına neden olan destekleyici bölme içeriğini ekleyin. Ancak, destek bölmesi yatay alanın yalnızca% 30'unu kaplar ve kalan% 70'i ana içerikte bırakır

Görünümler, parçalar veya bir kombinasyon kullanarak ana içerik ve destek bölmesi arasında iletişim kurmak için bir 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ını kullanı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