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 →
Display Glasses
Mempelajari jenis perangkat XR →

Di Jetpack Compose Glimmer, GlimmerHorizontalPager adalah tata letak yang disusun secara lambat , dapat di-scroll secara horizontal, dan mengatur halaman secara berurutan. Tata letak ini mirip dengan HorizontalPager standar yang ditemukan di Compose Foundation, tetapi disesuaikan untuk display glasses dengan perilaku dan nilai default Glimmer.

Secara default, hanya satu halaman yang ditampilkan secara jelas dalam satu waktu. Untuk memberikan pengalaman yang optimal, pager menggunakan animasi snap untuk memastikan halaman selalu ditempatkan tepat di batas area pandang setelah gestur scroll pengguna berakhir.

Gambar 1. Contoh `GlimmerHorizontalPager`.

Parameter utama dan opsi tata letak

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

Parameter Deskripsi

state

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

contentPadding

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

pageSpacing

Spasi horizontal antara halaman individual di pager.

pageIndicator

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

beyondViewportPageCount

Jumlah halaman yang akan disusun dan ditata di luar area pandang yang terlihat sebagai pengoptimalan pemuatan awal. Hindari menetapkan nilai yang 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 snap pager di display glasses, rendering teks default dapat menampilkan artefak pixel-snapping. 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 pager 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

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

Indikator halaman

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

  • Titik aktif menggunakan warna konten yang di-resolve dari surface 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),
        )
    }
)