Untuk menelusuri konten dengan cara kiri dan kanan atau atas dan ke bawah, Anda dapat menggunakan
composable
HorizontalPager
dan
VerticalPager
. Composable ini memiliki fungsi yang mirip dengan
ViewPager
dalam sistem
tampilan. Secara default, HorizontalPager
mengisi seluruh lebar layar,
VerticalPager
untuk tinggi penuh, dan Pager hanya mengayunkan satu halaman dalam
satu waktu. Semua setelan default ini dapat dikonfigurasi.
HorizontalPager
Untuk membuat halaman yang dapat 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 apa pun yang tidak lagi
diperlukan.
Muat halaman lainnya di balik layar
Secara default, pager 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 salah satu item dalam halaman ini
Untuk men-scroll ke halaman tertentu di 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 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. Hal ini berbeda dengan properticurrentPage
, karenacurrentPage
segera diperbarui jika halaman cukup dekat dengan posisi snap, tetapisettledPage
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 hal 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 yang dipilih dari jumlah halaman, dan gambar indikator khusus 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 ke 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 halaman:
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 menempati lebar penuh atau
tinggi penuh. Anda dapat menetapkan variabel pageSize
agar memiliki penghitungan
Fixed
,
Fill
(default), atau 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 menetapkan ukuran halaman berdasarkan ukuran area pandang, gunakan penghitungan ukuran
halaman kustom. Buat objek PageSize
kustom dan 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 meratakan 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 memusatkan item
secara horizontal:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), ) { page -> // page content }
Menyetel padding end
akan meratakan 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 menetapkan
setiap dimensi padding ke nilai apa pun.
Menyesuaikan perilaku scroll
Composable HorizontalPager
dan VerticalPager
default menentukan cara kerja gestur scroll dengan halaman. Namun, Anda dapat menyesuaikan dan mengubah setelan default seperti pagerSnapDistance
atau flingBehaviour
.
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 Grafik
- Memigrasikan
CoordinatorLayout
ke Compose