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'un açıklayıcı paradigması, liste ve ayrıntı pencerelerinin aynı anda mı (genişlik pencere boyutu sınıfı genişletildiğinde) yoksa yalnızca liste veya ayrıntı penceresinin mi (genişlik pencere boyutu sınıfı orta ya da 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 boyutu sınıfı ve seçilen liste öğesinin ayrıntıları (varsa) dahil olmak üzere tüm durumları yukarı çekin. Böylece tüm composable'lar verilere erişebilir ve doğru şekilde oluşturulabilir.

Küçük pencere boyutlarında yalnızca ayrıntı penceresi gösterilirken ayrıntı penceresini kaldırıp 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 gezinme düzeninin bir parçası değildir.

ListDetailPaneScaffold, liste ayrıntısı düzenlerinin uygulanmasını kolaylaştıran üst düzey bir composable'dır. Pencere boyutu sınıflarına göre bölme mantığını otomatik olarak yönetir ve bölmeler arasında gezinmeyi destekler.

ListDetailPaneScaffold kullanan minimum bir uygulama aşağıda verilmiştir:

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

Bu örnekteki temel bileşenler şunlardır:

  • rememberListDetailPaneScaffoldNavigator: Liste ve ayrıntı penceresi arasında gezinmeyi yönetmek için bir gezgin oluşturur.
  • listPane: Öğelerin listesini gösterir.
  • detailPane: Seçilen bir öğenin içeriğini gösterir.

Ayrıntılı uygulama örnekleri için aşağıdaki kaynakları inceleyin:

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

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

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

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

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

@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)
        }
    }
}

自适应 Feed 的关键在于 columns 配置。GridCells.Adaptive(minSize = 180.dp) 会创建一个网格，其中每列至少为 180.dp 宽。然后，网格会显示可用空间中可容纳的列数。

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

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, hem ana içeriği hem de destekleyici içeriği aynı anda gösterip göstermeyeceğinizi veya destekleyici içeriği alternatif bir konuma yerleştirip yerleştirmeyeceğinizi belirlemenize olanak tanır.

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

Dar genişlikli ekranlarda destekleyici içeriği ana içeriğin altına veya alt sayfaya yerleştirin. Orta ve genişletilmiş genişliklerde, destekleyici içeriği ana içeriğin yanına yerleştirin ve içeriğe ve kullanılabilir alana göre uygun şekilde boyutlandırın. Orta genişlikte, görüntüleme alanını ana 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. Birleştirilebilir öğe, pencere boyutu sınıflarına göre bölme mantığını otomatik olarak yönetir. Büyük ekranlarda bölmeleri yan yana gösterir veya küçük ekranlarda destekleyici bölmeyi gizler. SupportingPaneScaffold tuşu, bölmeler arasında gezinmeyi de destekler.

Aşağıda minimum düzeyde bir uygulama örneği 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
        }
    )
}
 Örnekteki temel bileşenler:

  • rememberSupportingPaneScaffoldNavigator: Bölme görünürlüğünü yönetmek için bir gezgin oluşturan composable (ör. kompakt ekranlarda destekleyici bölmeyi 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 aşağıdaki kaynakları inceleyin:

Ek kaynaklar