AnimasyonCompose

Compose ile Collapsing Toolbar Oluşturma

Animasyonlar, arayüz elementleri arasındaki ilişkileri vurgulayarak kullanıcının dikkatini çekmesini sağlar. Bu yüzden projelerde animasyon kullanmanın önemi büyüktür.

Bu makale Android Compose tasarımında parallax efekti ile ekran kaydırırken genişletip daraltabildiğimiz toolbar’ı  (Collapsing Toolbar) oluşturan projeyi örnekleyecektir.

Dilerseniz örnek de kullanacağımız LazyColumn yapısını Android Compose’da Lazy Layout Kullanımı makalesi ile daha detaylı inceleyebilirsiniz.

Örnek görüntü;

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- Parallax Collapsing Toolbar Oluşturma

Örnek projenin ana yapılarını oluşturan  Content() ve ParallaxToolbar() fonksiyonlarında parametre olarak LazyListState sınıfını kullandım. LazyListState, kaydırmayı kontrol etmek ve gözlemlemek için kullanabileceğiniz bir nesnedir. ToolbarActions() fonksiyonunu ise Toolbar üzerindeki oluşturmak için yazılan fonksiyondur. Kod açıklamaları ile daha detaylı inceleyelim.

 

Proje kodlarına github linkinden, kodlarla ilgili açıklamalara da makaleden 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