AnimasyonComposeUI/UX

Jetpack Compose ile Paralaks Efekt Oluşturma

Arayüz tasarımında kullanıcıyı etkileyebilmek için bazı tasarım efektleri kullanılmaktadır.

Bu makale Jetpack Compose ile Paralaks efektini kullanarak scroll yapılan içeriği nasıl soluklaştırabileceğimizi örnekleyecektir.

Dilerseniz Jetpack Compose ile Adım Adım Tasarım makalemi okuyarak Jetpack Compose hakkında detaylı bilgi edinebilirsiniz.

Örnek projemizin ekran görüntüsü

Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden ulaşabilirsiniz.

1-Compose Proje Oluşturma

Compose kullanabilmek için Android Studio Arctic Fox veya üst sürümlerden birini indirmeniz gerekir. Android Studio’da File > New yolunu takip edip New Project ekranında Empty Compose Activity arayüz taslağını seçmelisiniz. Next yapıp projenizi oluşturun.

2- Paralaks Efektini Oluşturma

Örneği incelediğimizde scroll yapıldığında paralaks efektinin aktif olduğunu görmekteyiz. Bu yüzden ilk hedefimiz scroll yapmayı aktif hale getirmektir. Bunun içinde scroll yapacağımız Column ‘da vertcalScroll(state) ve Modifier tanımlamamız gerekir. Bu bölüm için örnek kod;

Diğer bir konu; resmin soluklaştırarak kaybolmasıdır. Bu işlem için Modifier.graphicsLayer {} özelliğinden faydalanacağız. graphicsLayer,  alpha, elevation, shape vb. özellikleri bulunmaktadır. Soluklaştırma işlemini de alpha özelliği sağlamaktadır. ParallaxEffect adında kotlin dosyası oluşturdum. Şimdiye kadar anlattığım bölümleri ParallaxEffect fonksiyonunda uyguladım. Yorum satırları içeren kodları inceleyebilirsiniz.

Son olarak ParallaxEffect fonksiyonunu MainActivity sınıfında çağırma işlemi yaptım.

Tüm işlemlerimiz bitti. En sade haliyle Paralaks efektini örneklemiş oldum. Dilerseniz farklı tasarımlara bu özelliği ekleyebilirsiniz.

Proje kodlarına github linkinden ulaşabilirsiniz.

Bülten
Bültene abone ol

Bültene abone olarak yeni makalelerimden haberdar olun.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir