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.

Liste-ayrıntı düzeni

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ılar 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ı 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üm için genişletildiğinde liste ve yer tutucu ayrıntı bölmesi birlikte gösterilir.

Liste-ayrıntı düzeni, 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. Sohbetlerin listesini ve seçilen bir sohbetin ayrıntılarını gösteren mesajlaşma uygulaması.

Uygulama

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和详情窗格（当宽度窗口大小类别为展开时），还是只显示列表窗格或详情窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据传输，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示详情窗格时，添加 BackHandler 即可移除详情窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一种高级可组合项，可简化列表-详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}
CanonicalLayoutSamples.kt

以下是此示例中的关键组件：

  • rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和详情窗格之间的导航。
  • listPane：显示项列表。
  • detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

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.

Izgara, tek sütunlu kaydırmadan çok sütunlu kaydırmalı içerik feed'ine uyarlanabildiğinden feed düzeni, neredeyse her boyuttaki ekranları 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

Feed, dikey kaydırma içeren bir kapsayıcıda ızgara şeklinde düzenlenmiş çok sayıda içerik öğesinden oluşur. Lazy listeler, sütun veya satırlardaki çok sayıda öğeyi verimli bir şekilde oluşturur. Lazy grids, öğe boyutlarının ve aralıklarının yapılandırılmasını destekleyerek öğeleri ızgaralarda oluşturur.

Kılavuz öğeleri için izin verilen minimum genişliği ayarlamak üzere, kılavuz 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ğerlerinden daha fazla 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 öğeler için düzenin tam genişliğini kaplamak üzere maxLineSpan kullanın.

Birden fazla sütun göstermek için yeterli alan olmayan dar ekranlarda LazyVerticalGrid, LazyColumn gibi davranır.

LazyVerticalGrid kullanan minimum bir uygulamayı aşağıda bulabilirsiniz:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}
CanonicalLayoutSamples.kt

Uyarlanabilir bir feed'in anahtarı columns yapılandırmasıdır. GridCells.Adaptive(minSize = 180.dp), her sütunun en az 180.dp genişliğinde olduğu bir ızgara oluşturur. Izgara, kullanılabilir alana sığabilecek sayıda sütun gösterir.

Örnek uygulama için Feed with Compose örneğine bakın.

Destek bölmesi

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

Destek bölmesi 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 kısmını (genellikle yaklaşık üçte ikisini) kaplar ve ana içeriği barındırır. İkincil ekran 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, bir ürün listelemesindeki ü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

Compose, pencere boyutu sınıfı mantığını destekler. Bu mantık sayesinde hem ana içeriği hem de destekleyici içeriği aynı anda göstermeyi veya destekleyici içeriği alternatif bir konuma yerleştirmeyi seçebilirsiniz.

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

Dar ekranlarda destekleyici içeriği ana içeriğin altına veya bir alt sayfaya yerleştirin. Orta ve geniş genişliklerde, destekleyici içeriği ana içeriğin yanına yerleştirin. İçeriğin ve kullanılabilir alanın boyutuna göre uygun şekilde boyutlandırın. Orta genişlikte, ekran alanını ana içerik ve destekleyici içerik arasında eşit olarak 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.

SupportingPaneScaffold, destekleyici bölme düzenlerinin uygulanmasını kolaylaştıran üst düzey bir composable'dır. Composable, pencere boyutu sınıflarına göre bölme mantığını otomatik olarak işler. Büyük ekranlarda bölmeleri yan yana gösterir veya küçük ekranlarda destekleyici bölmeyi gizler. SupportingPaneScaffold Ayrıca bölmeler arasında gezinmeyi de destekler.

Aşağıda minimum düzeyde bir uygulama verilmiştir:

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
CanonicalLayoutSamples.kt
 Örnekteki temel bileşenler:

  • rememberSupportingPaneScaffoldNavigator: Bölme görünürlüğünü yönetmek için bir gezinme aracı oluşturan composable (ör. destek bölmesini kompakt ekranlarda gizleme veya gösterme)
  • mainPane: Birincil içeriği gösteren composable
  • supportingPane: Ek içeriği gösteren composable

Ayrıntılı uygulama örnekleri için:

Ek kaynaklar

Önceki
Uygulama yönü, en boy oranı ve yeniden boyutlandırılabilirlik
Sonraki
Farklı ekran boyutlarını destekleme