Membuat efek scroll paralaks

Scrolling paralaks adalah teknik saat konten latar belakang dan konten latar depan di-scroll dengan kecepatan yang berbeda. Anda dapat menerapkan teknik ini untuk meningkatkan UI aplikasi, sehingga menciptakan pengalaman yang lebih dinamis saat pengguna men-scroll.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Membuat efek paralaks

Untuk mencapai efek paralaks, Anda menerapkan fraksi nilai scroll dari composable scroll ke composable yang memerlukan efek paralaks. Cuplikan berikut mengambil dua elemen visual bertingkat—gambar dan blok teks—dan men-scrollnya ke arah yang sama dengan kecepatan yang berbeda:

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}
ParallaxEffect.kt

Poin-poin penting tentang kode

  • Membuat pengubah layout kustom untuk menyesuaikan kecepatan scroll composable.
  • Image men-scroll dengan kecepatan yang lebih lambat daripada Text, menghasilkan efek paralaks saat kedua composable diterjemahkan secara vertikal dengan kecepatan yang berbeda.

Hasil

Gambar 1. Daftar scroll dengan efek paralaks.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Daftar dan petak memungkinkan aplikasi Anda menampilkan koleksi dalam bentuk yang menarik secara visual dan mudah digunakan oleh pengguna.
Koleksi panduan cepat
Temukan teknik untuk menggunakan visual yang cerah dan menarik untuk memberikan tampilan dan nuansa yang menarik pada aplikasi Android Anda.
Koleksi panduan cepat

Teks tampilan

Teks adalah bagian utama dari setiap UI. Cari tahu berbagai cara untuk menyajikan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan