Untuk melihat konten dengan cara kiri dan kanan atau atas dan bawah, Anda dapat menggunakan
composable
HorizontalPager
dan
VerticalPager
. Composable ini memiliki fungsi yang mirip dengan
ViewPager
dalam sistem
tampilan. Secara default, HorizontalPager
menempati lebar penuh layar,
VerticalPager
menempati tinggi penuh, dan pager hanya mengayunkan satu halaman
dalam satu waktu. Semua setelan default ini dapat dikonfigurasi.
HorizontalPager
Untuk membuat halaman yang di-scroll secara horizontal ke kiri dan ke kanan, gunakan
HorizontalPager
:
// Display 10 items val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }
VerticalPager
Untuk membuat halaman yang dapat di-scroll ke atas dan ke bawah, gunakan VerticalPager
:
// Display 10 items val pagerState = rememberPagerState(pageCount = { 10 }) VerticalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }
Pembuatan lambat
Halaman di HorizontalPager
dan VerticalPager
disusun
dengan lambat dan ditata jika diperlukan. Saat pengguna
men-scroll halaman, composable akan menghapus halaman yang tidak lagi
diperlukan.
Muat halaman lainnya di luar layar
Secara default, halaman hanya memuat halaman yang terlihat di layar. Untuk memuat lebih banyak halaman
di luar layar, tetapkan beyondBoundsPageCount
ke nilai yang lebih tinggi dari nol.
Scroll ke item di halaman
Untuk men-scroll ke halaman tertentu dalam Pager, buat objek PagerState
menggunakan rememberPagerState()
dan teruskan sebagai parameter state
ke Pager. Anda dapat memanggil
PagerState#scrollToPage()
pada status ini, di dalam CoroutineScope
:
val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier .fillMaxWidth() .height(100.dp) ) } // scroll to page val coroutineScope = rememberCoroutineScope() Button(onClick = { coroutineScope.launch { // Call scroll to on pagerState pagerState.scrollToPage(5) } }, modifier = Modifier.align(Alignment.BottomCenter)) { Text("Jump to Page 5") }
Jika Anda ingin menganimasikan halaman, gunakan
fungsi
PagerState#animateScrollToPage()
:
val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier .fillMaxWidth() .height(100.dp) ) } // scroll to page val coroutineScope = rememberCoroutineScope() Button(onClick = { coroutineScope.launch { // Call scroll to on pagerState pagerState.animateScrollToPage(5) } }, modifier = Modifier.align(Alignment.BottomCenter)) { Text("Jump to Page 5") }
Mendapatkan notifikasi tentang perubahan status halaman
PagerState
memiliki tiga properti dengan informasi tentang halaman:
currentPage
,
settledPage
,
dan
targetPage
.
currentPage
: Halaman yang paling dekat dengan posisi snap. Secara default, posisi snap berada di awal tata letak.settledPage
: Nomor halaman saat tidak ada animasi atau scroll yang berjalan. Ini berbeda dengan properticurrentPage
di manacurrentPage
segera diperbarui jika halaman cukup dekat dengan posisi snap, tetapisettledPage
akan tetap sama hingga semua animasi selesai berjalan.targetPage
: Posisi perhentian yang diusulkan untuk gerakan scroll.
Anda dapat menggunakan fungsi snapshotFlow
untuk mengamati perubahan pada variabel ini dan bereaksi terhadapnya. Misalnya, untuk mengirim peristiwa analisis di setiap perubahan halaman, Anda dapat melakukan tindakan berikut:
val pagerState = rememberPagerState(pageCount = { 10 }) LaunchedEffect(pagerState) { // Collect from the a snapshotFlow reading the currentPage snapshotFlow { pagerState.currentPage }.collect { page -> // Do something with each page change, for example: // viewModel.sendPageSelectedEvent(page) Log.d("Page change", "Page changed to $page") } } VerticalPager( state = pagerState, ) { page -> Text(text = "Page: $page") }
Menambahkan indikator halaman
Untuk menambahkan indikator ke halaman, gunakan objek PagerState
untuk mendapatkan informasi
tentang halaman mana yang dipilih dari jumlah halaman, dan gambar indikator
kustom Anda.
Misalnya, jika ingin indikator lingkaran sederhana, Anda dapat mengulangi jumlah
lingkaran dan mengubah warna lingkaran berdasarkan apakah halaman dipilih, menggunakan
pagerState.currentPage
:
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) ) } }
Menerapkan efek scroll item ke konten
Kasus penggunaan yang umum adalah menggunakan posisi scroll untuk menerapkan efek ke item halaman
Anda. Untuk mengetahui jarak halaman dari halaman yang saat ini dipilih, Anda dapat menggunakan PagerState.currentPageOffsetFraction
.
Kemudian, Anda dapat menerapkan efek transformasi pada konten berdasarkan jarak
dari halaman yang dipilih.
Misalnya, untuk menyesuaikan opasitas item berdasarkan jaraknya dari
tengah, ubah alpha
menggunakan
Modifier.graphicsLayer
pada item di dalam Pager:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager(state = pagerState) { page -> Card( Modifier .size(200.dp) .graphicsLayer { // Calculate the absolute offset for the current page from the // scroll position. We use the absolute value which allows us to mirror // any effects for both directions val pageOffset = ( (pagerState.currentPage - page) + pagerState .currentPageOffsetFraction ).absoluteValue // We animate the alpha, between 50% and 100% alpha = lerp( start = 0.5f, stop = 1f, fraction = 1f - pageOffset.coerceIn(0f, 1f) ) } ) { // Card content } }
Ukuran halaman kustom
Secara default, HorizontalPager
dan VerticalPager
masing-masing mengambil lebar penuh atau
tinggi penuh. Anda dapat menetapkan variabel pageSize
agar memiliki
Fixed
,
Fill
(default), atau penghitungan ukuran kustom.
Misalnya, untuk menetapkan halaman dengan lebar tetap 100.dp
:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, pageSize = PageSize.Fixed(100.dp) ) { page -> // page content }
Untuk menyesuaikan ukuran halaman berdasarkan ukuran area pandang, gunakan penghitungan ukuran halaman kustom. Buat objek PageSize
kustom, lalu bagi availableSpace
dengan tiga, dengan mempertimbangkan jarak antar-item:
private val threePagesPerViewport = object : PageSize { override fun Density.calculateMainAxisPageSize( availableSpace: Int, pageSpacing: Int ): Int { return (availableSpace - 2 * pageSpacing) / 3 } }
Padding konten
HorizontalPager
dan VerticalPager
mendukung perubahan padding konten,
yang memungkinkan Anda memengaruhi ukuran dan perataan maksimum halaman.
Misalnya, menyetel padding start
akan menyelaraskan halaman ke bagian akhir:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(start = 64.dp), ) { page -> // page content }
Menetapkan padding start
dan end
ke nilai yang sama akan menempatkan item di tengah
secara horizontal:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), ) { page -> // page content }
Menyetel padding end
akan menyelaraskan halaman ke awal:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(end = 64.dp), ) { page -> // page content }
Anda dapat menetapkan nilai top
dan bottom
guna mendapatkan efek serupa untuk
VerticalPager
. Nilai 32.dp
hanya digunakan di sini sebagai contoh; Anda dapat menyetel
setiap dimensi padding ke nilai apa pun.
Menyesuaikan perilaku scroll
Composable HorizontalPager
dan VerticalPager
default menentukan cara kerja
gestur scroll pada halaman. Namun, Anda dapat menyesuaikan dan mengubah
setelan default seperti pagerSnapDistance
atau flingBehavior
.
Jarak snap
Secara default, HorizontalPager
dan VerticalPager
menetapkan jumlah maksimum halaman yang dapat di-scroll oleh gestur ayunkan jari ke satu halaman dalam satu waktu. Untuk mengubahnya, tetapkan
pagerSnapDistance
di flingBehavior
:
val pagerState = rememberPagerState(pageCount = { 10 }) val fling = PagerDefaults.flingBehavior( state = pagerState, pagerSnapDistance = PagerSnapDistance.atMost(10) ) Column(modifier = Modifier.fillMaxSize()) { HorizontalPager( state = pagerState, pageSize = PageSize.Fixed(200.dp), beyondBoundsPageCount = 10, flingBehavior = fling ) { PagerSampleItem(page = it) } }
Direkomendasikan untuk Anda
- Catatan: teks link ditampilkan saat JavaScript nonaktif
- ConstraintLayout di Compose
- Pengubah Grafis
- Memigrasikan
CoordinatorLayout
ke Compose