Tata letak kartu klasik lebar dengan Petak

ikon rating bintang empat

Pedoman desain aplikasi TV menentukan varian kartu yang disebut Kartu klasik lebar, yang menampilkan gambar dan blok konten deskriptifnya secara berdampingan. Saat membuat tata letak dua dimensi yang kompleks untuk layar TV, penggunaan penentuan posisi berbasis koordinat tradisional atau penampung Row dan Column yang bertingkat dalam dapat membuat kode Anda sulit dibaca, dipertahankan, dan di-refactor. Kartu klasik lebar adalah kasus penggunaan yang ideal untuk Jetpack Compose Grid API, yang membantu Anda menyusun elemen berdampingan dengan bersih menggunakan area tata letak 2D semantik yang ditentukan pengguna.

Spesifikasi komponen kartu klasik Lebar yang menampilkan lima area tata letak bernama: Gambar, Judul, Subjudul, Deskripsi, dan Teks tambahan.
Gambar 1. Kartu klasik lebar dengan lima area bernama: Area gambar dan empat area teks di blok konten.

Praktik terbaik

Implementasikan tata letak kartu dengan Grid. Menggunakan penampung Grid meningkatkan keterbacaan kode dengan memisahkan dimensi tata letak fisik dari penempatan item turunan. Daripada mengandalkan indeks jalur yang tepat, tentukan area bernama semantik dengan fungsi area dan tempatkan composable turunan dengan pengubah gridItem. Gabungkan ukuran jalur fleksibel, seperti GridTrackSize.Auto dan minmax(0.dp, 1.fr), dengan celah jalur yang tepat (gap(row = 8.dp, column = 16.dp)) untuk mengatur komponen kartu berdampingan yang kompleks dengan jelas dan kuat.

Bahan

  • Grid: Tata letak penampung 2D di Jetpack Compose yang mengatur composable turunan ke dalam baris dan kolom berdasarkan lambda konfigurasi
  • gridItem: Ekstensi Modifier yang mengaitkan elemen UI turunan dengan areaId bernama tertentu di dalam tata letak Grid
  • area: Fungsi DSL konfigurasi dalam GridConfigurationScope yang memetakan areaId semantik ke rentang atau rentang baris dan kolom tertentu
  • Card: Composable penampung Desain Material yang mengelompokkan elemen dan gaya UI terkait
  • GridTrackSize.MinMax: Properti ukuran jalur yang menentukan batas fleksibel (min dan max) untuk dimensi baris atau kolom
  • GridTrackSize.Auto: Properti ukuran jalur yang secara otomatis mengubah ukuran jalur baris atau kolom agar sesuai dengan kontennya (column(GridTrackSize.Auto))
  • gap: Fungsi konfigurasi yang menentukan jarak vertikal (row) dan horizontal (column) antara jalur petak

Langkah

Tentukan ID area, konfigurasi jalur dan area petak, lalu tempatkan composable turunan.

1. Menentukan ID area semantik

Pertama, buat representasi yang aman untuk jenis area di dalam tata letak kartu klasik Lebar. Class enum menghindari kesalahan ketik string dan memberikan keamanan waktu kompilasi saat memetakan jalur dan menempatkan item turunan.

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

2. Mengonfigurasi jalur petak 2D dan area bernama

Di dalam lambda config composable Grid, tentukan kolom dan baris yang membentuk struktur kartu. Gunakan GridTrackSize.Auto untuk kolom gambar sehingga lebar thumbnail dapat digabungkan dengan bersih. Gunakan minmax(0.dp, 1.fr) untuk kolom konten sehingga dapat diperluas secara fleksibel di seluruh lebar kartu yang tersisa. Tentukan jarak jalur dengan gap(row = 8.dp, column = 16.dp). Petakan ID CardArea ke koordinat jalur fisiknya menggunakan fungsi area.

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. Menempatkan composable turunan menggunakan pengubah gridItem

Dengan jalur dan area yang dikonfigurasi, tempatkan setiap elemen UI turunan murni berdasarkan maksud semantik menggunakan pengubah gridItem. Anda dapat mendeklarasikan composable turunan dalam urutan apa pun. Penampung Grid secara otomatis menempatkan setiap elemen langsung ke area 2D yang ditetapkan.

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

Hasil

Dengan mengatur kartu klasik Lebar menggunakan Grid dan area bernama, Anda akan mendapatkan pemisahan yang jelas antara jalur tata letak fisik, koordinat area, dan penempatan composable turunan. Struktur ini membuat tata letak Anda dapat dibaca dan dipertahankan sekaligus mengikuti pedoman desain aplikasi TV untuk komponen thumbnail dan deskripsi berdampingan.

Referensi lainnya