Paralaks kaydırma efekti oluşturma

Paralaks kaydırma, arka plan içeriği ile ön plan içeriğinin farklı hızlarda kaydırıldığı bir tekniktir. Bu tekniği uygulayarak uygulamanızın kullanıcı arayüzünü geliştirebilir ve kullanıcılarınız kaydırma yaparken daha dinamik bir deneyim oluşturabilirsiniz.

Sonuçlar

Şekil 1. Paralaks efekti içeren kaydırma listesi.

Sürüm uyumluluğu

Bu uygulama, projenizin minSDK'sının API düzeyi 21 veya sonraki sürümlere ayarlanmasını gerektirir.

Bağımlılıklar

Paralaks efekti oluşturma

Paralaks efektini elde etmek için kaydırma composable'ındaki kaydırma değerinin bir kısmını, paralaks efektine ihtiyaç duyan composable'a uygularsınız. Aşağıdaki snippet, iç içe yerleştirilmiş iki görsel öğeyi (bir resim ve bir metin bloğu) alıp aynı yönde farklı hızlarda kaydırır:

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}
ParallaxEffect.kt

Kodla ilgili önemli noktalar

  • Birleştirilebilir öğenin kaydırma hızını ayarlamak için özel bir layout değiştirici oluşturur.
  • Image, Text'den daha yavaş kaydırılır. Bu nedenle, iki composable dikey olarak farklı hızlarda çevrildiğinde paralaks efekti oluşur.

Bu rehberi içeren koleksiyonlar

Bu kılavuz, daha kapsamlı Android geliştirme hedeflerini ele alan aşağıdaki seçilmiş Hızlı Kılavuz koleksiyonlarının bir parçasıdır:

Listeler ve ızgaralar, uygulamanızın koleksiyonları kullanıcıların kolayca tüketebileceği, görsel açıdan hoş bir şekilde göstermesine olanak tanır.
Hızlı kılavuz koleksiyonu
Android uygulamanıza güzel bir görünüm ve tarz kazandırmak için parlak ve ilgi çekici görseller kullanma tekniklerini keşfedin.
Hızlı kılavuz koleksiyonu

Görünen metin

Metin, herhangi bir kullanıcı arayüzünün temel bileşenidir. Kullanıcılara keyifli bir deneyim sunmak için uygulamanızdaki metinleri farklı şekillerde sunmanın yollarını öğrenin.
Hızlı kılavuz koleksiyonu

Sorularınız veya geri bildiriminiz mi var?

Sık sorulan sorular sayfamıza giderek hızlı kılavuzlar hakkında bilgi edinebilir veya düşüncelerinizi bize iletebilirsiniz.
SSS'ye git Geri bildirim gönder