Özel sayfa göstergesi ekleme

Sayfa göstergelerini kullanarak kullanıcılarınızın uygulamanızın içeriğindeki mevcut konumlarını anlamalarına yardımcı olabilir ve ilerleme durumunu görsel olarak gösterebilirsiniz. Bu gezinme ipuçları, bant uygulamaları, resim galerileri ve slayt gösterileri ya da listelerdeki sayfalandırma gibi içeriği sırayla sunarken kullanışlıdır.

Sürüm uyumluluğu

Bu uygulama için projenizin minSDK değerinin API düzeyi 21 veya üstü olarak ayarlanması gerekir.

Bağımlılıklar

Özel sayfa göstergesi içeren yatay bir sayfalayıcı oluşturma

Aşağıdaki kod, sayfa göstergesi içeren yatay bir sayfalayıcı oluşturur. Bu sayfalayıcı, kullanıcıya kaç sayfa olduğunu ve hangi sayfanın görünür olduğunu görsel ipuçları verir:

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)
        )
    }
}
PagerSnippets.kt

Kodla ilgili önemli noktalar

  • Kod, farklı içerik sayfaları arasında yatay kaydırma yapmanıza olanak tanıyan bir HorizontalPager uygular. Bu durumda her sayfa, sayfa numarasını gösterir.
  • rememberPagerState() işlevi sayfalayıcıyı başlatır ve sayfa sayısını 4'e ayarlar. Bu işlev, geçerli sayfayı izleyen ve sayfalayıcıyı kontrol etmenize olanak tanıyan bir durum nesnesi oluşturur.
  • pagerState.currentPage mülkü, hangi sayfa göstergesinin vurgulanması gerektiğini belirlemek için kullanılır.
  • Sayfa göstergesi, Row uygulamasının yer paylaşımı yaptığı bir sayfalayıcıda görünür.
  • Sayfalayıcıdaki her sayfa için 16 dp'lik bir daire çizilir. Mevcut sayfanın göstergesi DarkGray olarak gösterilirken, gösterge dairelerinin geri kalanı LightGray olarak gösterilir.
  • HorizontalPager içinde bulunan Text bileşeni, her sayfada "Sayfa: [sayfa numarası]" metnini gösterir.

Sonuçlar

Şekil 1. İçeriğin altında daire göstergesi gösteren sayfalayıcı.

Bu kılavuzu içeren koleksiyonlar

Bu kılavuz, daha geniş Android geliştirme hedeflerini kapsayan, özel olarak seçilmiş Hızlı Kılavuz koleksiyonlarından biridir:

Listeler ve ızgaralar, uygulamanızın koleksiyonları kullanıcıların kolayca kullanabileceği, görsel açıdan hoş bir biçimde göstermesine olanak tanır.
Hızlı rehber koleksiyonu
Birleştirilebilir işlevlerin, Materyal Tasarım tasarım sistemine dayalı güzel kullanıcı arayüzü bileşenleri oluşturmanızı nasıl kolaylaştırabileceğini öğrenin.
Hızlı rehber koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek kısa kılavuzlar hakkında bilgi edinebilir veya bize ulaşarak düşüncelerinizi bizimle paylaşabilirsiniz.
SSS'ye gidin Geri bildirim gönderin