Standart düzenler, çeşitli form faktörlerinde optimum kullanıcı deneyimi sağlayan, kanıtlanmış ve çok yönlü düzenlerdir.
Standart düzenler, küçük ekranlı telefonların yanı sıra tabletleri, katlanabilir cihazları ve ChromeOS cihazları destekler. Materyal Tasarım rehberliğinden türetilen düzenler hem estetik hem de işlevseldir.
Android çerçevesi, düzenlerin uygulanmasını kolay ve güvenilir hale getiren özel bileşenler içerir.
Kanonik düzenler, harika uygulamaların temelini oluşturan, ilgi çekici ve üretkenliği artıran kullanıcı arayüzleri oluşturur.
Uyarlanabilir uygulama kanonik düzenleri hakkında bilginiz varsa ancak hangi Android API'lerin kullanılacağından emin değilseniz uygulamanızın kullanım alanları için hangi düzenin doğru olduğunu belirleme konusunda yardım almak üzere Uygulanabilirlik bölümüne gidin.
Liste-ayrıntı
Liste-ayrıntı düzeni, kullanıcıların açıklayıcı, açıklayıcı veya diğer ek bilgileri (öğe ayrıntısı) içeren öğe listelerini keşfetmesini sağlar.
Düzen, uygulama penceresini yan yana iki bölmeye ayırır: biri liste, diğeri ayrıntı için. Kullanıcılar, öğe ayrıntılarını görüntülemek için listeden öğe seçer. Ayrıntı bölümündeki derin bağlantılar, ayrıntı bölmesinde ek içerik gösterir.
Genişletilmiş genişlikteki ekranlar (bkz. Pencere boyutu sınıflarını kullanma) hem listeyi hem de ayrıntıları aynı anda gösterir. Bir liste öğesinin seçilmesiyle ayrıntılar bölmesi, seçilen öğeyle ilgili içeriği gösterecek şekilde güncellenir.
Orta ve küçük genişlikteki ekranlarda, uygulamayla kullanıcı etkileşimine bağlı olarak liste veya ayrıntı gösterilir. Yalnızca liste görünür olduğunda, bir liste öğesinin seçilmesiyle liste yerine ayrıntı gösterilir. Yalnızca ayrıntı görünürken geri düğmesine basıldığında liste yeniden gösterilir.
Cihaz yönü değişiklikleri veya uygulama penceresi 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ı düzeni, uygulama durumunu koruyarak buna göre yanıt verir:
- Hem liste hem de ayrıntılar bölmelerini gösteren genişletilmiş bir ekran, orta veya kompakt genişliğe daralırsa ayrıntılar bölmesi görünür kalır ve liste bölmesi gizlenir.
- Orta veya kompakt genişlikteki bir ekranda yalnızca ayrıntı bölmesi görünür durumdayken pencere boyutu sınıfı genişletilmiş olarak genişlerse liste ve ayrıntı birlikte gösterilir ve listede, ayrıntı bölmesindeki içeriğe karşılık gelen öğenin seçildiği belirtilir.
- Orta veya kompakt genişlikteki bir ekranda yalnızca liste bölmesi görünür durumdayken genişletilmiş görünümde liste ve yer tutucu ayrıntı bölmesi birlikte gösterilir.
Liste-ayrıntı, mesajlaşma uygulamaları, kişi yöneticileri, etkileşimli medya tarayıcıları veya içeriğin ek bilgiler gösteren öğe listesi olarak düzenlenebileceği tüm uygulamalar için idealdir.
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 hangi teknolojinin en uygun olduğuna karar verme konusunda yardım almak üzere Uygulanabilirlik bölümüne bakın.
SlidingPaneLayout kitaplığı, görünümlere veya parçalara dayalı liste-ayrıntı düzenleri uygulamak için tasarlanmıştır.
Öncelikle, XML düzeninizin kök öğesi olarak bir SlidingPaneLayout tanımlayın.
Ardından, liste ve ayrıntı içeriğini temsil eden iki alt öğeyi (görüntü veya parça) 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ı depolayabilmesi ve yapılandırma değişikliklerine dayanabilmesi nedeniyle önerilir.
SlidingPaneLayout, listenin ve ayrıntının birlikte mi yoksa ayrı ayrı mı gösterileceğini otomatik olarak belirler. Her ikisini de barındıracak kadar 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österilir.
Örnek uygulama için Kayan bölmeli 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 yığın halinde (biri diğeriyle çakışıyor) görüntülemesini sağlamak için etkinlik yerleştirmeyi kullanın. Uygulamanız, liste ayrıntısı düzeninin listesini ve ayrıntısını ayrı etkinliklerde uyguluyorsa etkinlik yerleştirme, kod yeniden düzenlemesi yapmadan veya çok az kod yeniden düzenlemesi yaparak liste ayrıntısı düzeni oluşturmanıza olanak tanır.
XML yapılandırma dosyası kullanarak görev penceresi bölme belirtip etkinlik yerleştirme işlemini uygulayın. Bölme, bölmeyi başlatan birincil etkinliği ve ikincil bir etkinliği tanımlar. Pencere boyutu sınıfı kesme noktalarını kullanarak bölme için minimum görüntü genişliği belirtin. Görüntü genişliği minimum kesme noktasının altına düştüğünde etkinlikler birbirinin üzerine binecek şekilde gösterilir. Örneğin, minimum ekran genişliği 600 dp ise etkinlikler kompakt ekranlarda birbirinin üzerine binecek şekilde, orta ve genişletilmiş ekranlarda ise yan yana gösterilir.
Etkinlik yerleştirme, 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 bağlı olarak liste etkinliğinin veya ayrıntı etkinliğinin uygulama penceresinin tamamını kaplamasına neden olur.
Daha fazla bilgi için Etkinlik yerleştirme başlıklı makaleyi inceleyin.
Örnek uygulama için Etkinlik yerleştirme içeren liste ayrıntısı örneğine bakın.
Feed
Feed düzeni, eşdeğer içerik öğelerini yapılandırılabilir bir ızgarada düzenleyerek çok miktarda içeriğin hızlı ve kolay bir şekilde görüntülenmesini sağlar.
Boyut ve konum, içerik öğeleri arasında ilişkiler oluşturur.
İçerik grupları, öğelerin aynı boyutta olması ve birlikte konumlandırılmasıyla oluşturulur. Öğeler, yakındaki öğelerden daha büyük yapılarak dikkat çekilir.
Kartlar ve listeler, feed düzenlerinin yaygın bileşenleridir.
Feed düzeni, ızgara tek bir kaydırılabilir sütundan çok sütunlu kaydırılabilir bir içerik feed'ine uyarlanabildiği için neredeyse her boyuttaki ekranı destekler.
Feed'ler özellikle haber ve sosyal medya uygulamaları için uygundur.
Uygulama
RecyclerView, tek bir sütunda çok sayıda öğeyi verimli bir şekilde oluşturur. GridLayoutManager, öğeleri bir ızgara şeklinde düzenler ve öğe boyutlarının ve aralıkları yapılandırmanıza olanak tanır.
Öğeler için izin verilen minimum genişliği ayarlamak amacıyla ızgara sütunlarını mevcut 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ğerlerinden daha belirgin hale getirmek için aralığı ayarlayın.
Yalnızca bir sütun için yeterli alana sahip kompakt genişlikteki ekranlarda GridLayoutManager yerine LinearLayoutManager kullanın.
Örnek uygulama için Görüntüleme içeren feed örneğine bakın.
Destek bölmesi
Destekleyici bölme düzeni, uygulama içeriğini birincil ve ikincil ekran alanları şeklinde düzenler.
Birincil görüntüleme alanı, uygulama penceresinin büyük bir bölümünü (genellikle yaklaşık üçte ikisini) 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çerikleri sunan bir bölmedir.
Desteklenen bölme düzenleri, yatay yönde genişletilmiş genişlikteki ekranlarda iyi çalışır (bkz. Pencere boyutu sınıflarını kullanma). Orta veya kompakt genişlikteki ekranlar, içerik daha dar ekran alanlarına uyarlanabiliyorsa ya da ek içerik, menü veya düğme gibi bir kontrol aracılığıyla erişilebilen alt veya yan sayfada başlangıçta gizlenebiliyorsa hem birincil hem de ikincil ekran alanlarının gösterilmesini destekler.
Destek bölmesi düzeni, birincil ve ikincil içerik ilişkisi açısından liste-ayrıntı 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 araç penceresi tek başına alakasızdır. Ancak liste-ayrıntı düzeninin ayrıntı bölmesindeki ek içerik, birincil içerik olmadan da anlamlıdır. Örneğin, ürün listelemesindeki bir ürünün açıklaması.
Destek bölmesinin kullanım alanları şunlardır:
- Üretkenlik uygulamaları: Destekleyici bir bölmede inceleyen yorumlarının yer aldığı bir doküman veya e-tablo
- Medya uygulamaları: Destekleyici bir bölmede alakalı videoların listesiyle desteklenen bir akışlı video veya bir oynatma listesiyle desteklenen bir müzik albümünün tasviri
- Araçlar ve ayarlar: Destek bölmesinde paletler, efektler ve diğer ayarların bulunduğu bir medya düzenleme aracı
Uygulama
Destekleyici bölme düzeni, LinearLayout veya ConstraintLayout gibi bir yardımcı düzen kullanılarak uygulanır. Pencere boyutu sınıflarını belirleme
kullanabileceğiniz yatay görüntüleme alanını
üç kategori: 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ı
layoutklasörüne, destekleyici bölmeyi ana içeriğin altına veya alt sayfanın içine yerleştiren içerikleri yerleştirin. - Aracı:
layout-w600dpklasöründe, destekleyici bölme içeriğini sağlayın. ana içerik ve destekleyici bölmenin yan yana oluşturulmasına neden olur. yatay ekran alanı eşit olarak bölünüyor - Genişletilmiş:
layout-w840dpklasörüne destekleyici bölme içeriğini ekleyin Böylece, ana içerik ve destekleyici bölmenin yan yana oluşturulması sağlanmış olur. Ancak destekleyici bölme yatay alanın yalnızca% 30'unu kaplar. %70'ini ana içeriğe bırakın.
Ana içerik ileViewModel
ya da bunların bir kombinasyonu kullanılarak destekleyici bölmede gösterilir.
Uygulama örnekleri için aşağıdaki örneklere bakın:
Geçerlilik
Standart düzenler, kolay erişim ve derinlemesine keşif için içeriğin çok yönlü sunumlarını oluşturur. Uygulamanızın kullanım alanları için en uygun düzen ve uygulama stratejisini belirlemek üzere 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.
Ek kaynaklar
- Materyal Tasarım — Standart düzenler