Jetpack Compose Glimmer'da yatay sayfa ayırıcılar

Uygun XR cihazlar
Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.
XR cihaz türleri hakkında bilgi edinin →
Görüntüleme Gözlüğü
XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da GlimmerHorizontalPager, sayfalarını sırayla düzenleyen, yatay olarak kaydırılabilen ve geç oluşturulan bir düzendir. Bu, Compose Foundation'da bulunan standart HorizontalPager'a benzer ancak Glimmer davranışları ve varsayılan değerlerle Görüntülü Reklam Ağı gözlükleri için özel olarak tasarlanmıştır.

Varsayılan olarak, aynı anda yalnızca bir sayfa belirgin şekilde gösterilir. Sayfalayıcı, kusursuz bir deneyim sunmak için kullanıcı kaydırma hareketi sona erdiğinde sayfanın her zaman tam olarak görünüm alanı sınırlarına yerleşmesini sağlamak üzere yapışma animasyonlarını kullanır.

Şekil 1. GlimmerHorizontalPager örneği.

Temel parametreler ve düzen seçenekleri

GlimmerHorizontalPager, aralığı, düzen hizalamasını ve geç yüklemeyi kontrol etmek için özelleştirilebilir parametreler sağlar. Bu parametrelerden bazıları şunlardır:

Parametre Açıklama

state

Sayfalayıcının kaydırma konumunu ve etkin sayfasını yöneten, gözlemleyen ve programatik olarak kontrol eden bir GlimmerPagerState nesnesi.

contentPadding

Kırpma işleminden sonra genel içerik sınırlarının etrafına uygulanan dolgu. İlk sayfadan önce veya son sayfadan sonra ön kenar ya da arka kenar dolgusu eklemek için kullanışlıdır.

pageSpacing

Sayfa ayırıcıdaki sayfalar arasındaki yatay boşluk.

pageIndicator

Etkin sayfa göstergesini oluşturan bir composable yuva. Varsayılan olarak GlimmerHorizontalPagerDefaults.PageIndicator(state) değerine ayarlanır.

beyondViewportPageCount

Ön yükleme optimizasyonu olarak görünür görüntü alanı dışında oluşturulacak ve düzenlenecek sayfa sayısı. Tembel birleştirme verimliliğini korumak için büyük değerler ayarlamaktan kaçının.

Kullanılabilir tüm parametreler hakkında bilgi için referans belgelerinin tamamını inceleyin.

Animasyonlu metin hareketi önerisi

Ekran gözlüklerindeki sayfa kaydırma animasyonları ve geçişleri sırasında varsayılan metin oluşturma, piksel yapıştırma artefaktları gösterebilir. Ayar TextMotion.Animated, düzen animasyonları boyunca sorunsuz oluşturma sağlar:

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

Örnek: Yatay sayfa ayırıcı

Aşağıdaki kodda, her sayfaya bir kart yerleştirerek 10 sayfalık temel bir yatay sayfalayıcının nasıl oluşturulacağı gösterilmektedir:

// 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),
        )
    }
}

Kodla ilgili önemli noktalar

  • State: Sayfalayıcının durumunu yönetmek için rememberGlimmerPagerState(pageCount = { 10 }) kullanarak bir GlimmerPagerState başlatır.
  • Sayfa yuvası içeriği: Her kartı oluşturmak için GlimmerPagerScope lambda'sında sayfa dizinini page alır.
  • Sorunsuz animasyon metin stili: LocalTextStyle.current öğesini kopyalar ve TextMotion.Animated öğesini açıkça etkinleştirir.
  • Otomatik sayfa göstergesi: Harici bir gösterge bileşeni gerektiren standart Compose sayfalayıcılarından farklı olarak GlimmerHorizontalPager, varsayılan olarak nokta stilinde bir sayfa göstergesi otomatik olarak yerleştirir.

Sayfa göstergeleri

Varsayılan olarak GlimmerHorizontalPager, GlimmerHorizontalPagerDefaults.PageIndicator kullanarak nokta tabanlı bir sayfa göstergesi oluşturur. Gösterge, renk şemasını otomatik olarak uyarlar:

  • Etkin nokta, en yakın çevredeki surface öğesinden çözümlenen içerik rengini kullanır.

Açık renkleri belirtmek için özelleştirilmiş bir PageIndicator iletebilir veya noktayı kendi özel düzeninizle değiştirebilirsiniz:

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),
        )
    }
)