Jetpack Compose ile Fade Edge Effect Nasıl Oluşturulur | by Doganur Aydeniz | Jan, 2025

Mobil uygulama geliştirmede, küçük görsel detaylar kullanıcı deneyimini iyileştirebilir. Bu detaylardan biri olan fade edge effect (kenar solma efekti), kaydırılabilir içeriğin devam ettiğini kullanıcıya görsel olarak bildiren şık bir çözümdür. Bu yazıda, Jetpack Compose kullanarak bu zarif efekti nasıl oluşturacağımızı inceleyeceğiz.

Fade Edge Effect Nedir?

Kenar solma efekti, kaydırılabilir bir alanın kenarında oluşan ve içeriğin devam ettiğini gösteren kademeli bir şeffaflık geçişidir. Bu efekt, özellikle yatay kaydırılabilir listelerde (LazyRow) scroll çubuğu göstermeden daha fazla içerik olduğunu belirtmek için kullanışlıdır.

Nasıl Uygulanır?

Kodun detaylı açıklamasını adım adım inceleyelim:

1. Scroll Pozisyonunu Takip Etme

Öncelikle, listenin sonunda olup olmadığımızı kontrol etmemiz gerekiyor:

val isAtEnd = remember {
derivedStateOf {
lazyListState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == 
lazyListState.layoutInfo.totalItemsCount - 1
}

Bu kod, listenin son elemanına ulaşıp ulaşmadığımızı kontrol eden bir değişken oluşturur.

2. Fade Effect Uygulama

LazyRow(
state = lazyListState,
modifier = Modifier
.graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
.drawWithContent {
drawContent()
if (!isAtEnd.value) {
val colors = listOf(Color.Black, Color.Transparent)
val width = size.width
val fadeWidthPx = 50.dp.toPx()
drawRect(
brush = Brush.horizontalGradient(
colors = colors,
startX = width - fadeWidthPx,
endX = width
),
blendMode = BlendMode.DstIn
)
}
}
)

Özelleştirme
— Solma genişliğini içeriğinize göre ayarlayabilirsiniz.
— Gradyan renklerini uygulamanızın temasına uygun şekilde değiştirebilirsiniz
— İki yönlü kaydırma için her iki uca da solma efekti ekleyebilirsiniz

Sonuç

Fade Edge Effect, uygulamalarda kaydırma deneyimini zenginleştiren bir UI öğesidir. Bu efekt sayesinde, kullanıcılar kaydırılabilir içerikte daha akıcı ve yönlendirici bir deneyim yaşayabilirler.

Farklı içerik uzunlukları ve ekran boyutlarında test etmeyi unutmayın. İyi kodlamalar!

#AndroidDev #JetpackCompose #UI #KotlinGeliştirme