Izgara içeren geniş klasik kart düzeni

dört yıldız puanı simgesi

TV uygulaması tasarım kurallarında, Geniş klasik kart adı verilen bir kart varyantı tanımlanır. Bu varyant, bir resmi ve açıklayıcı içerik bloğunu yan yana gösterir. TV ekranları için karmaşık iki boyutlu düzenler oluştururken geleneksel koordinat tabanlı konumlandırmayı veya derinlemesine iç içe yerleştirilmiş Row ve Column kapsayıcılarını kullanmak kodunuzun okunmasını, bakımını ve yeniden düzenlenmesini zorlaştırabilir. Wide klasik kart, Jetpack Compose Grid API'si için ideal bir kullanım alanıdır. Bu API, semantik ve kullanıcı tanımlı 2D düzen alanlarını kullanarak yan yana öğeleri temiz bir şekilde yapılandırmanıza yardımcı olur.

Beş adlandırılmış düzen alanını gösteren geniş klasik kart bileşeninin özellikleri: Resim, Başlık, Alt Başlık, Açıklama ve Ek Metin.
Şekil 1. Geniş klasik kartta beş adlandırılmış alan bulunur: Resim alanı ve içerik bloğunda dört metin alanı.

En iyi uygulamalar

Kart düzenini Grid ile uygulayın. Grid kapsayıcısını kullanmak, fiziksel düzen boyutlarını alt öğe yerleşiminden ayırarak kodun okunabilirliğini artırır. Tam parça dizinlerine güvenmek yerine, area işleviyle semantik adlandırılmış alanlar tanımlayın ve gridItem değiştiricisiyle alt composable'ları yerleştirin. Karmaşık yan yana kart bileşenlerini net ve sağlam bir şekilde düzenlemek için GridTrackSize.Auto ve minmax(0.dp, 1.fr) gibi esnek parça boyutlandırmayı, tam parça boşluklarıyla (gap(row = 8.dp, column = 16.dp)) birleştirin.

Malzemeler

  • Grid: Jetpack Compose'da, yapılandırma lambda'sına göre alt composable'ları satırlar ve sütunlar halinde düzenleyen 2 boyutlu bir kapsayıcı düzen
  • gridItem: Bir Modifier uzantısı, bir alt kullanıcı arayüzü öğesini Grid düzeni içindeki belirli bir adlandırılmış areaId ile ilişkilendirir.
  • area: GridConfigurationScope içinde, areaId semantiğini belirli satır ve sütun aralıklarına veya aralıklarına eşleyen bir yapılandırma DSL işlevi
  • Card: İlgili kullanıcı arayüzü öğelerini ve stilini gruplandıran bir Materyal Tasarım kapsayıcı composable'ı
  • GridTrackSize.MinMax: Satır veya sütun boyutları için esnek sınırlar (min ve max) tanımlayan bir iz boyutlandırma özelliği
  • GridTrackSize.Auto: Satır veya sütun parçasını içeriğine uyacak şekilde otomatik olarak boyutlandıran bir parça boyutlandırma özelliği (column(GridTrackSize.Auto))
  • gap: Izgara parçaları arasındaki dikey (row) ve yatay (column) aralığı belirten bir yapılandırma işlevi

Adımlar

Alan tanımlayıcılarını tanımlayın, ızgara parçalarını ve alanlarını yapılandırın, ardından alt composable'ları yerleştirin.

1. Anlamsal alan tanımlayıcılarını tanımlama

Öncelikle, Wide klasik kart düzeninizdeki bölgelerin tür açısından güvenli bir gösterimini oluşturun. enum sınıfı, dize yazım hatalarını önler ve parçaları eşlerken ve alt öğeleri yerleştirirken derleme zamanında güvenlik sağlar.

enum class CardArea {
    Image,
    Title,
    Subtitle,
    Description,
    ExtraText,
}

2. 2D kılavuz parçalarını ve adlandırılmış alanları yapılandırma

GridComposable'ınızınconfig lambda'sında, kart yapısını oluşturan sütunları ve satırları tanımlayın. Küçük resim genişliğini düzgün bir şekilde sarması için resim sütununda GridTrackSize.Auto kullanın. İçerik sütunu için minmax(0.dp, 1.fr) kullanın. Böylece, sütun kartın kalan genişliğinde esnek bir şekilde genişler. gap(row = 8.dp, column = 16.dp) ile parça aralığını belirtin. CardArea Tanımlayıcılarınızı area işlevini kullanarak fiziksel parça koordinatlarıyla eşleyin.

Grid(
    config = {
        // Define columns: left column for image, right for content
        column(GridTrackSize.Auto)
        column(minmax(0.dp, 1.fr))

        // Define row tracks for the vertical content stack
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)

        // Map semantic identifiers to grid coordinates and spans
        area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
        area(CardArea.Title, row = 1, column = 2)
        area(CardArea.Subtitle, row = 2, column = 2)
        area(CardArea.Description, row = 3, column = 2)
        area(CardArea.ExtraText, row = 4, column = 2)

        gap(row = 8.dp, column = 16.dp)
    }
) {
    // Child elements placed in Step 3
}

3. gridItem değiştiricisini kullanarak alt composable'ları yerleştirme

Parçalarınız ve alanlarınız yapılandırıldıktan sonra gridItem değiştiricisini kullanarak her bir alt kullanıcı arayüzü öğesini tamamen anlamsal amaca göre yerleştirin. Alt composable'ları istediğiniz sırada bildirebilirsiniz. Grid kapsayıcısı, her öğeyi doğrudan atanmış 2D bölgesine otomatik olarak yerleştirir.

@Composable
fun WideClassicCard(
    imageContent: @Composable () -> Unit,
    title: String,
    subtitle: String,
    description: String,
    extraText: String,
    modifier: Modifier = Modifier,
) {
    Card(modifier = modifier) {
        Grid(
            config = {
                // Define columns: left column for image, right for content
                column(GridTrackSize.Auto)
                column(minmax(0.dp, 1.fr))

                // Define row tracks for the vertical content stack
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)

                // Map semantic identifiers to grid coordinates and spans
                area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
                area(CardArea.Title, row = 1, column = 2)
                area(CardArea.Subtitle, row = 2, column = 2)
                area(CardArea.Description, row = 3, column = 2)
                area(CardArea.ExtraText, row = 4, column = 2)

                gap(row = 8.dp, column = 16.dp)
            },
        ) {
            Box(modifier = Modifier.gridItem(CardArea.Image)) {
                imageContent()
            }
            Text(
                text = title,
                style = MaterialTheme.typography.titleLarge,
                modifier = Modifier
                    .gridItem(CardArea.Title)
                    .padding(top = 16.dp, end = 16.dp),
            )

            Text(
                text = subtitle,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .gridItem(CardArea.Subtitle)
                    .padding(end = 16.dp),
            )

            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier
                    .gridItem(CardArea.Description)
                    .padding(end = 16.dp),
            )

            Text(
                text = extraText,
                style = MaterialTheme.typography.labelSmall,
                modifier = Modifier
                    .gridItem(CardArea.ExtraText)
                    .padding(bottom = 16.dp, end = 16.dp),
            )
        }
    }
}

Sonuçlar

Wide klasik kartınızı Grid ile düzenleyip alanları adlandırarak fiziksel düzen parçaları, alan koordinatları ve alt composable yerleşimi arasında net bir ayrım yapabilirsiniz. Bu yapı, yan yana küçük resim ve açıklama bileşenleri için TV uygulaması tasarım kurallarına uyarken düzeninizin okunabilir ve sürdürülebilir olmasını sağlar.

Ek kaynaklar