Paralaks kaydırma efekti oluşturma

Paralaks kaydırma, arka plan içeriğinin ve ö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 ekranı kaydırırken daha dinamik bir deneyim oluşturabilirsiniz.

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

Paralaks efekti oluşturma

Paralaks efekti elde etmek için, kaydırma özelliğine sahip bileşendeki kaydırma değerinin bir kısmını, paralaks efektine ihtiyaç duyan bileşene uygularsınız. Aşağıdaki snippet, iç içe yerleştirilmiş iki görsel öğeyi (bir resim ve bir metin bloğu) alır ve bunları 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'ten daha yavaş bir hızda kaydırılır. Böylece, iki kompozisyon dikey olarak farklı hızlarda çevrilirken paralaks efekti oluşturulur.

Sonuçlar

Şekil 1. Paralaks efekti içeren kaydırmalı liste.

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
Android uygulamanıza güzel bir görünüm ve tarz kazandırmak için parlak ve ilgi çekici görseller kullanmayla ilgili teknikleri keşfedin.
Hızlı rehber koleksiyonu

Görünen metin

Metin, her kullanıcı arayüzünün temel bileşenidir. Kullanıcılara keyifli bir deneyim sunmak için uygulamanızda metinleri sunmanın farklı yollarını öğ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