Daftar dengan Compose untuk Wear OS

Daftar memungkinkan pengguna memilih item dari serangkaian pilihan di perangkat Wear OS.

Banyak perangkat Wear OS menggunakan layar bundar, yang menyulitkan untuk melihat item daftar yang muncul di dekat bagian atas dan bawah layar. Karena alasan ini, Compose untuk Wear OS menyertakan versi class LazyColumn yang disebut TransformingLazyColumn, yang mendukung animasi penskalaan dan pengubahan bentuk. Saat dipindahkan ke tepi, item akan menjadi lebih kecil dan memudar.

Untuk menerapkan efek penskalaan dan scrolling yang direkomendasikan:

  1. Gunakan Modifier.transformedHeight agar Compose dapat menghitung perubahan tinggi saat item di-scroll di layar.
  2. Gunakan transformation = SurfaceTransformation(transformationSpec) untuk menerapkan efek visual, termasuk memperkecil konten item.
  3. Gunakan TransformationSpec kustom untuk komponen yang tidak menggunakan transformation sebagai parameter seperti Text.

Animasi berikut menunjukkan cara elemen daftar diskalakan dan diubah bentuknya saat mendekati bagian atas dan bawah layar:

Cuplikan kode berikut menunjukkan cara membuat daftar menggunakan tata letak TransformingLazyColumn untuk membuat konten yang tampak bagus di berbagai ukuran layar Wear OS.

Cuplikan ini juga menunjukkan penggunaan pengubah minimumVerticalContentPadding, yang harus Anda tetapkan pada item daftar untuk menerapkan padding yang benar di bagian atas dan bawah daftar.

Untuk menampilkan indikator scroll, bagikan columnState antara ScreenScaffold dan TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

Menambahkan efek snap-dan-fling

Penyelarasan memastikan bahwa saat pengguna menyelesaikan gestur scroll atau geser, daftar akan berhenti dengan item yang diposisikan secara tepat di titik tertentu, biasanya di tengah layar. Pada layar bulat, tempat item diskalakan dan berubah bentuk saat bergerak menjauhi tengah, penarikan sangat berguna untuk memastikan item yang paling relevan tetap terlihat sepenuhnya dan dapat dibaca di area tampilan yang optimal.

Untuk menambahkan perilaku tarik dan lempar, tetapkan parameter flingBehavior ke TransformingLazyColumnDefaults.snapFlingBehavior(columnState). Setel rotaryScrollableBehavior agar cocok, menggunakan RotaryScrollableDefaults.snapBehavior(columnState) untuk pengalaman yang konsisten saat menggunakan kenop atau bezel fisik.

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
        rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
    ) {
        // ...
        // ...
    }
}

Tata letak terbalik

Secara default, daftar yang dapat di-scroll ditambatkan ke tepi atasnya. Jika pengguna telah men-scroll ke bagian bawah daftar standar dan item baru ditambahkan ke bagian akhir, daftar akan mempertahankan tampilan pengguna pada item saat ini. Misalnya, jika pengguna melihat item 10 di bagian bawah layar, dan item 11 ditambahkan, tampilan tetap berfokus pada item 10, dan item 11 muncul di luar layar di bawah tampilan saat ini.

Untuk kasus penggunaan seperti aplikasi pesan atau log langsung, perilaku ini biasanya tidak diinginkan. Saat item baru tiba, pengguna biasanya ingin segera melihat konten terbaru jika mereka sudah berada di bagian bawah daftar. Jika banyak item tiba sekaligus, daftar harus melewati untuk menampilkan item terbaru di bagian bawah (artinya beberapa item di antaranya mungkin tidak ditampilkan sama sekali kecuali pengguna men-scroll kembali ke atas).

Untuk mendukung kasus penggunaan ini, TransformingLazyColumn memungkinkan Anda membalikkan tata letak dengan menyetel reverseLayout = true. Tindakan ini mengubah anchor daftar dari tepi atas ke tepi bawah.

Untuk memudahkan, menyetel reverseLayout = true juga membalikkan urutan visual item dan arah gestur scrolling:

  • Item disusun dari bawah ke atas, yang berarti indeks 0 muncul di bagian bawah layar.
  • Men-scroll ke atas akan menampilkan item dengan indeks yang lebih tinggi.

Untuk menambahkan perilaku mengepaskan dan menggeser bersama dengan tata letak terbalik, Anda dapat menggabungkan flingBehavior dan rotaryScrollableBehavior seperti yang ditunjukkan dalam cuplikan berikut:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding,
        reverseLayout = true,
        modifier = Modifier.fillMaxWidth()
    ) {
        items(10) { index ->
            Button(
                label = {
                    Text(
                        text = "Item ${index + 1}"
                    )
                },
                onClick = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            )
        }
        item {
            // With reverseLayout = true, the last item declared appears at the top.
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text("Header")
            }
        }
    }
}

Gambar berikut menunjukkan perbedaan antara daftar normal dan daftar terbalik:

TransformingLazyColumn dengan tata letak normal, menampilkan Item 1 di bagian atas dan item dalam urutan menaik.
Gambar 1. Tata letak daftar standar dengan konten yang diisi dari atas ke bawah.
TransformingLazyColumn dengan tata letak terbalik, menampilkan Item 1 di bagian bawah dan item dalam urutan menurun ke atas.
Gambar 2. Tata letak daftar terbalik yang kontennya diisi dari bawah ke atas.