Standart düzenler

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

Resmi düzenler, küçük ekranlı telefonların yanı sıra tabletler, katlanabilir cihazlar ve ChromeOS cihazları destekler. Materyal Tasarım rehberliğinden yararlanılarak oluşturulan 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.

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

liste-ayrıntı

Liste ayrıntısı düzeni, kullanıcıların açıklayıcı veya ek bilgiler içeren öğe listelerini (öğe ayrıntısı) keşfetmesine olanak tanır.

Düzen, uygulama penceresini yan yana iki panele ayırır: biri liste, diğeri ayrıntılar içindir. Kullanıcılar, öğe ayrıntılarını görüntülemek için listeden öğe seçer. Ayrıntılardaki derin bağlantılar, ayrıntılar bölmesinde ek içerik gösterir.

Genişletilmiş genişlikteki ekranlar (Pencere boyutu sınıflarını kullanma bölümüne bakın) hem listeyi hem de ayrıntıları aynı anda gösterir. 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 liste veya ayrıntı gösterilir. Yalnızca liste göründüğünde, bir liste öğesi seçildiğinde listenin yerine ayrıntı gösterilir. Sadece ayrıntı görünürken geri düğmesine basıldığında liste yeniden görüntülenir.

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ısı düzeni, uygulama durumunu koruyarak buna göre yanıt verir:

• Hem liste hem de ayrıntılar panelini gösteren genişletilmiş genişlikteki bir ekran orta veya kompakt olarak daraltılırsa ayrıntılar paneli görünür durumda kalır ve liste paneli gizlenir
• Orta veya kompakt bir ekranda yalnızca ayrıntı penceresi görünürse ve pencere boyutu sınıfı genişletilecek şekilde 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 durumdaysa ve ekran genişletilirse liste ile 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çili bir görüşmenin ayrıntılarını gösteren mesajlaşma uygulaması.

Uygulama

The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).

To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.

When showing just the detail pane on small window sizes, add a BackHandler to remove the detail pane and display just the list pane. The BackHandler is not part of the overall app navigation since the handler is dependent on the window size class and selected detail state.

For an example implementation, see the List-detail with Compose sample.

Feed

Feed düzeni, çok sayıda içeriğin hızlı ve kolay bir şekilde görüntülenmesi için eşdeğer içerik öğelerini yapılandırılabilir bir ızgara içinde düzenler.

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

İçerik grupları, öğeleri aynı boyutta yaparak ve birlikte konumlandırarak oluşturulur. Öğeler, yakındaki öğelerden daha büyük yapılarak dikkati üzerine çeker.

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

Tablo, tek bir kaydırılabilir sütundan çok sütunlu bir içerik kaydırmalı feed'e uyum sağlayabildiğinden feed düzeni neredeyse her boyuttaki ekranı destekler.

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

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

Uygulama

Feed 包含大量内容元素，这些内容元素位于一个纵向滚动容器中，而该容器采用网格布局。延迟列表可高效地在列或行中呈现大量的项。延迟网格以网格形式呈现项，支持配置项的大小和 span。

根据可用的显示区域配置网格布局的列，以设置网格项允许的最小宽度。定义网格项时，只需调整列 span 即可让某些项比其他项更为醒目。

对于部分标题、分隔线或要占据 Feed 的整个宽度的其他项，请使用 maxLineSpan 占据布局的整个宽度。

如果较小宽度的显示屏没有足够的空间来显示一个以上的列，LazyVerticalGrid 就会像 LazyColumn 一样运行。

如需查看示例实现，请参阅使用 Compose 构建 Feed 示例。

Destekleyici bölme

Destekleyici bölme düzeni, uygulama içeriğini birincil ve ikincil ekran alanlarına ayırır.

Birincil görüntüleme alanı, uygulama penceresinin büyük kısmını (genellikle üç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çerikleri sunan bir paneldir.

Destekleyici panel düzenleri, yatay yönde genişletilmiş genişlikteki ekranlarda (Pencere boyutu sınıflarını kullanma bölümüne bakın) iyi çalışır. Orta veya kompakt genişlikteki ekranlar, içerik daha dar ekran alanlarına uyarlanabilirse ya da ek içerik başlangıçta menü veya düğme gibi bir kontrol aracılığıyla erişilebilen alt veya yan bir sayfada gizlenebiliyorsa hem birincil hem de ikincil ekran alanlarının gösterilmesini destekler.

Destekleyici bölme düzeni, birincil ve ikincil içerik arasındaki ilişki 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 araç penceresi tek başına alakasızdır. Bununla birlikte, liste ayrıntısı düzeninin ayrıntı penceresindeki 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:

• Üretkenlik uygulamaları: Destekleyici bölmede yorumları bulunan bir doküman veya e-tablo
• Medya uygulamaları: Destekleyici bir bölmede ilgili videoların listesiyle desteklenen bir yayın videosu veya oynatma listesiyle desteklenen bir 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. Destek bölmesinde ürün açıklamaları bulunan alışveriş uygulaması.

Uygulama

Compose supports window size class logic, which enables you to determine whether to show both the main content and the supporting content at the same time or place the supporting content in an alternative location.

Hoist all state, including current window size class and information related to the data in the main content and supporting content.

For compact-width displays, place the supporting content below the main content or inside a bottom sheet. For medium and expanded widths, place the supporting content next to the main content, sized appropriately based on the content and space available. For medium width, split the display space equally between the main and supporting content. For expanded width, give 70% of the space to the main content, 30% to the supporting content.

For an example implementation, see the Supporting pane with Compose sample.

Ek kaynaklar

• Materyal Tasarım — Standart düzenler