Membuat efek scroll paralaks

Parallax scrolling adalah teknik yang membuat 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.

Hasil

Gambar 1. Daftar scroll dengan efek paralaks.

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 sebagian kecil nilai scroll dari composable scroll ke composable yang memerlukan efek paralaks. Cuplikan berikut mengambil dua elemen visual bertingkat—gambar dan blok teks—dan men-scroll-nya 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 utama tentang kode

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

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Singkat pilihan yang mencakup 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 singkat
Temukan teknik menggunakan visual yang cerah dan menarik untuk memberikan tampilan dan nuansa yang indah pada aplikasi Android Anda.
Koleksi panduan singkat

Menampilkan teks

Teks adalah bagian utama dari setiap UI. Temukan berbagai cara Anda dapat menampilkan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Koleksi panduan singkat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum dan pelajari panduan singkat atau hubungi kami dan sampaikan pendapat Anda.
Buka FAQ Berikan masukan