Standart düzenler

Standart düzenler, çeşitli form faktörlerinde optimum kullanıcı deneyimi sağlayan, kanıtlanmış ve çok yönlü düzenlerdir.

Kanonik düzenleri gösteren büyük ekranlı cihazların resmi.

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ısı düzeninin tel kafes modeli.

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.

Şekil 1. Mesajlaşma uygulamasında, görüşme listesi ve seçilen bir görüşmenin ayrıntıları gösteriliyor.

Uygulama

您可以使用各种技术创建列表-详情布局,包括 Compose、View 和 activity 嵌入(适用于旧版应用)。如需我们帮助您确定哪项技术最适用于您的应用,请参阅适用性部分。

SlidingPaneLayout 库旨在基于 View 或 fragment 实现列表详情布局。

首先,将 SlidingPaneLayout 声明为 XML 布局的根元素。接下来,添加两个子元素(View 或 fragment),用于表示列表和详情内容。

实现一种通信方法,以便在列表-详情 View 或 fragment 之间传递数据。建议使用 ViewModel,因为它能存储业务逻辑,并且可在配置更改后继续留存。

SlidingPaneLayout 会自动判断列表和详情应该同时显示还是单独显示。如果窗口的横向空间足够同时容纳列表和详情,二者会并排显示。如果窗口空间不足,系统会根据用户与应用的互动单独显示列表或详情。

如需查看示例实现,请参阅包含滑动窗格的列表-详情示例。

activity 嵌入

借助 activity 嵌入,可以让旧版的多 activity 应用在同一屏幕中并排显示两个 activity,或让两个 activity 堆叠显示(一个叠加在另一个之上)。如果您的应用在单独的 activity 中分别实现列表详情布局的列表和详情,借助 activity 嵌入,您只需进行少量代码重构(甚至无需重构),即可创建列表详情布局。

如需实现 activity 嵌入,只需使用 XML 配置文件指定任务窗口拆分即可。分屏定义了主要 activity(用于启动分屏)和辅助 activity。使用窗口大小类别断点指定拆分的显示屏宽度下限。当显示屏宽度低于断点下限时,activity 便会叠加显示。例如,如果显示屏宽度下限为 600dp,那么在较小宽度的显示屏上,activity 会叠加显示;但在中等宽度和较大宽度的显示屏上,activity 会并排显示。

Android 12L(API 级别 32)及更高版本支持 activity 嵌入,但经设备制造商实现后,较低的 API 级别也可提供相应支持。如果设备不支持 activity 嵌入,回退行为会导致列表 activity 或详情 activity 占据整个应用窗口,具体取决于用户与应用的互动。

如需了解详情,请参阅 activity 嵌入

如需查看示例实现,请参阅使用 activity 嵌入构建列表详情示例。

Feed

Feed düzeninin tel çerçevesi.

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.

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

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

Destek bölmesi düzeninin tel kafes görünümü.

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:

Şekil 3. Destekleyici bir bölmede ürün açıklamaları bulunan alışveriş uygulaması.

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ı layout klasö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-w600dp klasö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-w840dp klasö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:

适用性

规范布局可对内容进行多层面的展示,以便于访问和深入发掘。您可以利用以下流程图来确定哪种布局和实现策略最适用于您的应用用例。

如需查看在不同类型的应用中实现的规范化布局的示例,请参阅大屏幕图库

图 4. 大屏幕规范布局决策树。

Ek kaynaklar