Android

Jetpack Compose’da Paralaks. Sadece Bir İllüzyon! | tarafından Saurabh Pant | Haz, 2022

Sadece Bir İllüzyon!

Kaynak: webflow.com

Birkaç yıl önce, XML görünümünden ScrollView kullanarak paralaks oluşturma hakkında bir makale yazdım. burada. Bu yazıda aynısını Jetpack Compose kullanarak yapacağız.

Sonuç

Paralaks efekti oluşturmak, oluşturmada oldukça basittir. Kaydırıcımızın kaydırma durumunu izliyoruz ve paralaksın açık olmasını istediğimiz görünümlerin çevrilme hızını değiştiriyoruz. Öyleyse başlayalım.

İlk olarak, bir Sütun kullanarak paralaks oluşturacağız. Sütun, görünüm hiyerarşisi için dikey düzenleme sağlar ancak kaydırılamaz. Onları kaydırmak için, ona aşağıdaki gibi bir kaydırma durumu sağlıyoruz.

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

Dikey olarak kaydırdığımız için dikey Kaydırma. Kaydırma durumunu hatırlıyoruz ve bu nedenle hangi görünüm bu değeri okuyorsa, kendisini buna göre yeniden oluşturacaktır.

Demo videoda, hem kaplan görüntüsünü hem de başlık çubuğunu paralaksladığımız gösteriliyor. Öyleyse tek tek yapalım.

Bir resmimiz ve kaydırılabilir uzun bir metnimiz olan bir sütunumuz var.

@Composable
fun ImageParallaxScroll() {
val scrollState = rememberScrollState()
Column(
modifier = Modifier
.fillMaxWidth()
.verticalScroll(scrollState),
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.background(Color.White),
contentAlignment = Alignment.Center
) {
Image(
painterResource(id = R.drawable.ic_tiger),
contentDescription = "tiger parallax",
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
}
Text(
text = stringResource(R.string.dummy_text),
modifier = Modifier.background(
Color.White
),
style = TextStyle(
fontSize = 24.sp
)
)
}
}

Yukarıdaki kod bize resim ve metin verecektir, ancak ikisi de aynı hızda kaydırılabilir.

Şimdi görüntünün metinden daha yavaş hareket etmesini sağlamak için görüntünün Y çevirisini aşağıdaki gibi değiştiriyoruz.

Box(
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.background(Color.White)
.graphicsLayer {
translationY = 0.5f * scrollState.value
}
,
contentAlignment = Alignment.Center
)

GraphicLayer’ın kullanılması, tüm birleştirilebilir parçayı yeniden oluşturmaktansa görünümün yalnızca etkilenen kısmını yeniden çizme avantajına sahiptir. Burada Y hareketini gerçek kaydırmanın yarısı kadar çevirdik.

kahretsin! Kaplan paralakslıdır. Ama bekleyin, alfa değerini aşağıdaki gibi güncelleyerek de solduralım.

Box(
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.background(Color.White)
.graphicsLayer {
alpha = 1f - ((scrollState.value.toFloat() / scrollState.maxValue) * 1.5f)

translationY = 0.5f * scrollState.value
},
contentAlignment = Alignment.Center
)

Alfa durumunda kaydırma oranını hesaplıyoruz ve oran başlangıçta çok küçük olabileceğinden (kaydırma yüksekliğine bağlı olarak), her bir değer için 1,5 kat ve deneme yanılma yoluyla büyütüyoruz ve 1,5 benim için iyi çalışıyor. Farklı değerlerle deneyebilirsiniz. Ama bize istenen sonucu verir.

Şimdi demo videoda, başlık çubuğunun görünürlüğünün kaydırma hareketiyle değiştiğini de fark ettik. Öyleyse bunu da yapalım.

@Composable
fun HeaderBarParallaxScroll() {
val scrollState = rememberScrollState()
Box {
Column(
modifier = Modifier
.fillMaxWidth()
.verticalScroll(scrollState),
) {
...

}Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.background(Color.Yellow),
contentAlignment = Alignment.CenterStart
) {
Text(
text = "Header bar",
modifier = Modifier.padding(horizontal = 16.dp),
style = TextStyle(
fontSize = 24.sp,
fontWeight = FontWeight.W900,
color = Color.Black
)
)
}
}
}

Aynı şekillendirilebiliri kullanıyoruz ancak yukarıda gösterildiği gibi sütunun üzerine yeni bir başlık çubuğu kutusu ekliyoruz. Ancak başlangıçta başlık çubuğu tamamen görünür olacaktır. Bunun gizlenmesini ve yukarı kaydırma hareketinde olduğu gibi görünmesini istiyoruz.

Box(
modifier = Modifier
.alpha(min(1f, (scrollState.value.toFloat() / scrollState.maxValue) * 5f))
.fillMaxWidth()
.height(60.dp)
.background(Color.Yellow),
contentAlignment = Alignment.CenterStart
)

Bu yüzden, kaydırma durumuna göre kutu değiştiriciye alfa değerini uygularız. Yine kaydırma oranı küçük olabilir, bu yüzden her değer için 5 kat büyüttük ve iyi çalışıyor. Farklı değerlerle de oynayabilirsiniz.

kahretsin! Şimdi her şey beklendiği gibi çalışıyor. Bu nedenle, genel olarak bestelemede paralaks etkisine sahip olmak oldukça basittir.

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu