Material Motion Part 1: Shared Axis

Kullanıcı arayüz tasarımında küçük dokunuşlar ile müşterinin dikkatini çeken görsellikler sağlayabilirsiniz. Mobil tasarım da Material Design yapısını kullanarak yazılımcıyı yormadan etkileyici tasarımlar çıkartabilirsiniz.

Bu makale serisinde, Android uygulama da UI öğeleri arasındaki geçişleri farklı animasyon görünümleri ile sağlayan Material motion özelliklerini örnekleyeceğim. İlk serimizde Material motion’ın Shared axis özelliğini anlatacağım.

Shared axis

Kullanıcının uygulamadaki UI öğeleri arasındaki geçişlerinde,  öğe görünümü soluklaştırmasıyla bir geçiş animasyonu sağlar. Shared axis  X,Y ve Z eksenlerinde 3 farklı yönde  animasyonlu geçiş sağlamaya olanak tanır.

Shared axis özelliğini X ekseninde kullanarak örneklediğim projenin görüntüsü;

Projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

Bu örneği uygulayabilmek için işlemleri adım adım yapalım.

1-Gerekli Kütüphanelerin Yüklenmesi

Projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek navigation ve material kütüphanelerini yüklüyoruz.

2- Kotlin kodları

İlk önce ana sınıfımız olan MainActivity sınıfından bahsetmek istiyorum. Bu sınıfta, slide’larda kullanılan resim ve yazıları arraylist yapılarına ekledik ve oluşturduğumuz WalkthroughFragment sınıfına bu değerleri atadık. Aynı zamanda SharedAxis özelliğinin hangi eksende ve slide geçiş sürelerinin ne kadar sürede olacağını hazırlayan metodu hazırladım. Son olarak next ve back butonlarına işlevsellik verildi. Daha detaylı açıklama kodlardan erişebilirsiniz.

WalkthroughFragment sınıfımız ise basit bir fragment’dır. MainActivity sınıfından gelen başlık, resim gibi değerleri newInstance metodu aracılığıyla bu sınıfa aktardım. Sonrasında ImageView ve MaterialTextView arayüz elemanlarına bu değerleri atadım.

Diğer tasaırm kodlarını makaleyi sade bırakmak için yazmadım. Dilerseniz projemin kodlarına github linkinden hızlıca ulaşabilirsiniz.

Kategori Genel
Etiketler