Pager horizontal di Jetpack Compose Glimmer

Perangkat XR yang kompatibel
Panduan ini membantu Anda membangun pengalaman untuk jenis perangkat XR ini.
Mempelajari jenis perangkat XR →
Kacamata Display
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, GlimmerHorizontalPager adalah tata letak yang di-compose secara malas dan dapat di-scroll secara horizontal yang mengatur halamannya secara berurutan. Mirip dengan HorizontalPager standar yang ada di Compose Foundation, tetapi disesuaikan untuk kacamata tampilan dengan perilaku Glimmer dan nilai default.

Secara default, hanya satu halaman yang ditampilkan dengan jelas dalam satu waktu. Untuk memberikan pengalaman yang lancar, pager menggunakan animasi penarikan untuk memastikan halaman selalu berada tepat di batas area tampilan setelah gestur scroll pengguna berakhir.

Gambar 1. Contoh GlimmerHorizontalPager.

Parameter utama dan opsi tata letak

GlimmerHorizontalPager menyediakan parameter yang dapat disesuaikan untuk mengontrol jarak, perataan tata letak, dan pemuatan lambat. Beberapa parameter tersebut adalah:

Parameter Deskripsi

state

Objek GlimmerPagerState yang mengelola, mengamati, dan mengontrol posisi scroll serta halaman aktif pager secara terprogram.

contentPadding

Padding diterapkan di sekitar batas konten keseluruhan setelah pemangkasan, berguna untuk menambahkan padding tepi awal atau akhir sebelum halaman pertama atau setelah halaman terakhir.

pageSpacing

Jarak horizontal antara setiap halaman dalam pager.

pageIndicator

Slot composable yang merender indikator halaman aktif. Setelan defaultnya GlimmerHorizontalPagerDefaults.PageIndicator(state).

beyondViewportPageCount

Jumlah halaman yang akan disusun dan ditata di luar area pandang yang terlihat sebagai pengoptimalan pra-pemuatan. Hindari menetapkan nilai besar untuk mempertahankan efisiensi komposisi lambat.

Lihat dokumentasi referensi lengkap untuk mengetahui informasi tentang semua parameter yang tersedia.

Rekomendasi gerakan teks animasi

Selama animasi dan transisi penyematan pager pada kacamata tampilan, rendering teks default dapat menunjukkan artefak penyematan piksel. Menetapkan TextMotion.Animated memastikan rendering yang lancar di seluruh animasi tata letak:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)

Contoh: Pager horizontal

Kode berikut menunjukkan cara membuat penomoran halaman horizontal dasar dengan 10 halaman, menempatkan Kartu di dalam setiap halaman:

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}

Poin penting tentang kode

  • State: Menginisialisasi GlimmerPagerState menggunakan rememberGlimmerPagerState(pageCount = { 10 }) untuk mengelola status pengatur halaman.
  • Konten slot halaman: Menerima indeks halaman page di dalam lambda GlimmerPagerScope untuk merender setiap kartu.
  • Gaya teks animasi halus: Menyalin LocalTextStyle.current dan mengaktifkan TextMotion.Animated secara eksplisit.
  • Indikator halaman otomatis: Tidak seperti penomoran halaman Compose standar yang memerlukan komponen indikator eksternal, GlimmerHorizontalPager otomatis menyematkan indikator halaman gaya titik secara default.

Indikator halaman

Secara default, GlimmerHorizontalPager merender indikator halaman berbasis titik menggunakan GlimmerHorizontalPagerDefaults.PageIndicator. Indikator otomatis menyesuaikan skema warnanya:

  • Titik aktif menggunakan warna konten yang diselesaikan dari surface di sekitarnya yang terdekat.

Anda dapat meneruskan PageIndicator yang disesuaikan untuk menentukan warna eksplisit, atau mengganti titik dengan tata letak kustom Anda sendiri:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)