Menambahkan indikator halaman kustom

Dengan menggunakan indikator halaman, Anda dapat membantu pengguna memahami posisi mereka saat ini dalam konten aplikasi, yang memberikan indikasi visual tentang progres. Isyarat navigasi ini berguna saat Anda menyajikan konten secara berurutan, seperti penerapan carousel, galeri gambar, dan slideshow, atau penomoran halaman dalam daftar.

Kompatibilitas versi

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

Dependensi

Membuat pager horizontal dengan indikator halaman kustom

Kode berikut membuat pager horizontal yang memiliki indikator halaman, yang memberikan isyarat visual kepada pengguna tentang jumlah halaman yang ada dan halaman mana yang terlihat:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

Poin-poin penting tentang kode

  • Kode ini mengimplementasikan HorizontalPager, yang memungkinkan Anda menggeser secara horizontal di antara berbagai halaman konten. Dalam hal ini, setiap halaman menampilkan nomor halaman.
  • Fungsi rememberPagerState() melakukan inisialisasi pager dan menetapkan jumlah halaman ke 4. Fungsi ini membuat objek status yang melacak halaman saat ini, dan memungkinkan Anda mengontrol pager.
  • Properti pagerState.currentPage digunakan untuk menentukan indikator halaman mana yang harus ditandai.
  • Indikator halaman muncul di pager yang ditempatkan oleh implementasi Row.
  • Lingkaran 16 dp digambar untuk setiap halaman di pager. Indikator untuk halaman saat ini ditampilkan sebagai DarkGray, sedangkan lingkaran indikator lainnya adalah LightGray.
  • Composable Text dalam HorizontalPager menampilkan teks "Halaman: [nomor halaman]" di setiap halaman.

Hasil

Gambar 1. Pager yang menampilkan indikator lingkaran di bawah konten.

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
Pelajari cara fungsi composable dapat memudahkan Anda membuat komponen UI yang menarik berdasarkan sistem desain Desain Material.
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