Compose ile Android’de Animasyonlu Açılış Ekranı. | tarafından Mukesh Solanki | Tem, 2022

Compose ile Android'de Animasyonlu Açılış Ekranı.  |  tarafından Mukesh Solanki |  Tem, 2022

Android Açılış Ekranı, uygulama başlatıldığında kullanıcıya görünen ilk ekrandır. Bu yazıda, yardımıyla animasyonlu bir açılış ekranı oluşturacağız. piyango (Android için harika bir animasyon kitaplığı) ve Navigation-Compose.

Navigation-Compose ve Lottie’yi uygulama seviyenize ekleyelim build.gradle dosya.

uygulama/build.gradle

Animasyonlarımızı güzel bir şekilde oynatmak için arka plan rengini ve sistem çubuğu renklerini ayarlamamız gerekecek. Aşağıdaki özellikleri ekleyeceğiz themes.xml dosya

değerler/themes.xml

Android SDK 31 ve üzerini hedefliyorsanız, adlı yeni bir dosya oluşturmanız gerekir. themes.xml içinde values-31 dosya.

değerler-31/themes.xml

Çizilebilir klasöre şeffaf bir resim eklemeniz gerekecek.

çizilebilir/transparent_image.xml

Navigasyon grafiğinin gidebileceği farklı yollara giden yolları tutacak kapalı bir sınıf oluşturarak başlayın. Bu bir örnek olduğu için sadece iki ekrana giden yolları olan küçük bir tane oluşturacağız. yani açılış ekranı ve ana ekran.

Daha sonra navigasyon grafiğimizi oluşturacağız. adlı yeni bir dosya oluşturarak bunu yapabiliriz. Navgraph.kt ekranlarımız için grafiği korumaktan sorumlu olacak.

Şimdi bunu ana faaliyete bağlamak için. Bu çok açık, bunu basitçe arayarak yapabiliriz. SetupNavGraph ana faaliyetimizde aynı şekilde.

Şimdi animasyonumuzu oynatacak ekranı oluşturalım ve ardından ana ekrana gidelim. Basitçe bir Lottie görünümü ekleyeceğiz ve bir .lottie dosya görünümünde.

Yukarıdaki kodda, Lottie görünümümüz tarafından kullanılacak bir kompozisyon oluşturuyoruz. Doğrudan bir dosya atayabiliriz logo.lottie kaynaklardaki ham klasörden. Daha sonra, daha sonra animasyonun tamamlanıp tamamlanmadığını kontrol etmek için kullanacağımız birleştirilebilirin animasyonunu gözlemlemek için bir durum değişkeni yaratırız.

Son olarak, sadece ekleyin LottieAnimation birleştirilebilir ve ilerlemeyi görüntüleyin ve atayın ve işimiz bitti. Durum oynamaya dönüştüğünde ve son karede olduğunda, bir sonraki birleştirilebilirliğe gideriz ve işte orada olur.

Tam çalışma kodunu burada bulabilirsiniz:

Bir cevap yazın

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