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) ) } }
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 adalahLightGray
. - Composable
Text
dalamHorizontalPager
menampilkan teks "Halaman: [nomor halaman]" di setiap halaman.
Hasil
Koleksi yang berisi panduan ini
Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Menampilkan daftar atau petak
