Izgara ile kullanıcı arayüzü öğesi yer paylaşımları

Jetpack Compose Grid API'si, yapısal ve iki boyutlu ekran düzenleri için tasarlanmıştır. Büyük veri kümeleri için optimize edilmiş tembel ızgaraların aksine, Grid ile parçalar (satırlar ve sütunlar), boşluklar ve ızgara alanları kullanarak sabit veya duyarlı bir düzen yapısı tanımlayabilirsiniz. Öğeleri bu yapıya Modifier.gridItem kullanarak yerleştirirsiniz. Bu sayede, ızgara kapsayıcısında konumlandırma ve kapsama üzerinde açıkça kontrol sahibi olursunuz.

Kullanıcı arayüzünüz aynı ızgara alanında birden fazla öğe veya çakışan alanlar (ör. rozet yer paylaşımları, durum göstergeleri ya da katmanlı kartlar) gerektirdiğinde, belirsizliği koordine etmek düzen davranışını tahmin edilemez hale getirebilir. Karmaşık Box iç içe yerleştirme veya manuel koordinat kaydırmalarına başvurmadan çakışan bileşenlerin derinliğini yönetmek, temiz ve okunabilir düzen kodu sağlamak için çok önemlidir.

En iyi uygulamalar

• Bildirim sırası: Grid, Grid bloğundaki bildirim sırasına göre standart zIndex sıralamasını izler. Grid içerik bloğunda daha sonra belirtilen öğeler, daha önce belirtilen öğelerin üzerinde oluşturulur.
• Açık z-endeksi kontrolü: Çakışan öğelerin varsayılan çizim sırasını açıkça kontrol etmeniz veya geçersiz kılmanız gerekiyorsa Modifier.zIndex kullanın.
• Adlandırılmış alanlar ve öğe yer paylaşımları: Düzeninizin yapısını tanımlamak için Grid ve adlandırılmış alanları kullanın. Ancak bu yer paylaşımları mantıksal olarak ilgili ile bağlantılıysa karmaşık yer paylaşımı mantığını belirli gridItem içinde tutun.
• Yer paylaşımları için kasıtlı aralıklar: Yer paylaşımı yaparken, alttaki içeriğin ne kadarının gizleneceğini kontrol etmek için rowSpan ve columnSpan parametrelerinin çakışan öğeler için kasıtlı olarak kullanıldığından emin olun.

Malzemeler

• Grid: Yapısal, iki boyutlu düzen kapsayıcısı
• GridConfigurationScope.area: Adlandırılmış bölgeleri tanımlamak ve ızgara parçaları arasında alanları yerleştirmek için kullanılan kapsam işlevi
• Modifier.gridItem: Birleştirilebilir öğeleri ızgara parçalarına veya adlandırılmış ızgara alanlarına yerleştirmek ve yaymak için kullanılan değiştirici
• Modifier.zIndex: Çizim ve katman yükseltme sırasını açıkça kontrol etmek için kullanılan değiştirici

Adımlar

Izgara düzeninizi ve adlandırılmış alanlarınızı yapılandırın, temel katman içeriğini hedef ızgara koordinatları içinde konumlandırın ve yer paylaşımı öğelerini paylaşılan ızgara hücrelerine veya çakışan alanlara yerleştirin.

1. Izgara yapılandırmasını tanımlama

Satır ve sütun parçalarının yanı sıra hücreler arasında yayılan ve yer paylaşımı bölgelerini tanımlayan adlandırılmış alanları belirten bir Grid oluşturun:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Temel içeriği yerleştirme ve yer paylaşımlarını bildirme

Modifier.gridItem kullanarak temel composable'larınızı ızgara hücrelerine yerleştirin. Grid Bileşim sırasına göre standart zIndex sıralaması uygulanır. Bu nedenle, Grid bloğunda daha sonra bildirilen öğeler, önceki öğelerin üzerine çizilir. Aynı hücreye veya çakışan bir alana yer paylaşımı yerleştirirken yer paylaşımını temel öğeden sonra composable olarak tanımlayın veya adlandırılmış bir alana referans verin. Bu varsayılan çizim sırasını açıkça kontrol etmeniz veya geçersiz kılmanız gerekiyorsa Modifier.zIndex öğesini kullanabilirsiniz.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Sonuçlar

Kullanıcı arayüzü öğeleriniz, 2D ızgara yapısında tahmin edilebilir şekilde yerleştirilir. Standart bildirim sıralamasına güvenerek temiz ve duyarlı düzen kodu oluştururken karmaşık iç içe yerleştirilmiş kapsayıcılardan kaçınırsınız.