iOS Uygulamalarında Animasyonlu Splash Ekranı Nasıl Yapılır ?
Merhabalar, bugünkü yazımda sizlere iOS uygulamalarınızı geliştirme sırasında, splash ekranını nasıl animasyonlu şekilde geliştirebiliceğimizi anlatacağım.
Öncelikle bilmemiz gereken bir konu var;
LaunchScreen.storyboard dosyamızda bulunan ViewController’a sadece storyboard üzerinden müdahale edebiliyoruz. Herhangi bi class’a bağlama ve kodla müdahale etme şansımız yok.
Bundan dolayı animasyonlu splash screen için LaunchScreen.storyboard’daki ViewController’ımız haricinde Main.storyboard’umuza bi ViewController ekleyeceğiz. ( Xib veya programatik geliştirme yöntemide kullanılabilir.) Burada animasyon işlemlerini kullanıcıya gösterip animasyon tamamlandığında root’ umuzu değiştireceğiz.
Temel prensibi anladığımıza göre örnek bir proje ile detaylandıralım.
Öncelikle projemizi oluşturuyoruz. Geliştirme sırasında UIKit üzerinden gideceğim.
Projemizi oluşturduktan sonra ilk iş olarak xcode’u kapıyor ve terminalimizi açıyoruz.
Terminalde proje konumuna gidiyoruz. Sonrasında “ pod init” komut satırını girip projemize pod dosyamızı ekliyoruz. “ open Podfile” komut satırı ile az önce oluşturduğumuz Podfile dosyasını açıyor ve fotoğrafta görmüş olduğunuz üzere “ pod ‘SwiftyGif’ ” satırını ekliyoruz. Sonrasında terminalimize dönüp pod install işlemi ile kütüphaneyi projemize dahil etmiş oluyoruz. Bu kütüphaneyi eklememin nedeni ekrandaki animasyon görselini gif üzerinden kullanacak olmam. İsterseniz gif yerinede sadece UIView’un animation fonksyonları ile de görsel animasyonlar oluşturabilirsiniz. Bu projede hem gif hem de UIView’un animation fonksyonları ile splash ekranı animasyonlarını oluşturacağız.
Projemizi AnimatedSplashScreen.xcworkspace dosyası üzerinden açıyoruz. İnternetten indirmiş olduğum örnek gif dosyasını projemin içerisine dahil ediyorum. (Örnek proje içerisinde bulabilirsiniz. logoGif.gif dosyası.) Create folder references ve copy item if needed işaretlenmiş olmasına dikkat edin.
Şimdi sıra LaunchScreen.storyboard içerisinde bulunan ViewController’ın özelleştirmemize geldi.
Görseldeki ViewController’ımın arka plan rengini kullanacağım gif’in tonuna uygun şekilde değiştirdim ve UILabel ekledim. Bu label’a constraint’lerini verdim. Ekranı x ve y+100 düzleminde ortalayacak şekilde ayarladım. Sıra Main.Storyboardumuza ekranlarımızı eklemeye geldi.
Gördüğünüz üzere 2 ekran ekledik. Bunu detaylandırmak gerekirse nedeni uygulamayı ilk açtığınızda iOS işletim sistemine sahip cihazlar öncelikle kullanıcı ekranına LaunchScreen.storyboard içerisindeki ViewController’ı gösterir. Bu esnada arka planda uygulamanın gerekli ayarlamaları yapılır. İşlemler tamamlandığında AppDelegate ve SceneDelegate üzerinden window oluşturulur ve bu windowlara gerekli root verme işlemleri yapılır. Bu root işlemi sonucu bizde uygulamaya girmiş oluruz.
Bizde animasyonlu Splash ekranı yapmak istediğimiz için bu akışta araya girmemiz gerekiyor. Window oluşturulduğunda ilk olarak root’umuzu fotoğrafta solda gördüğünüz VC’ye yönlendireceğiz. Animasyon tamamlandığında kendi window’umuza ait olan root’u değiştirerek uygulama açıldığında gösterilecek ekrana yönlendireceğiz.
Görmüş olduğunuz swift dosyası Main.storyboard’umuzda bulunan beyaz arkaplan’a sahip ekrana ait. Gördüğünüz üzere bu ekranda bi UIImageView ve UILabel bulunmakta. Storyboard üzerinden bu ekrana ait constraintleri verdim. Gene label için x ve y+100 düzleminde ortalayacak şekilde ayarladım. İmageView için ise x ve y düzeleminde ortalayacak şekilde 240x128 boyutlarında oluşturdum. Gerekli outletleri ilgili swift dosyasına bağladım.
Peki bu kod ne yapıyor ? Öncelikle SwiftyGif kütüphanesini import ediyoruz. Sonrasında ViewController’ımıza SwiftyGifDelegate protokolünü ekliyoruz. Bu protokol sayesinde gif animasyonu ne zaman tamamlandığını yakalayacağız. Sonrasında Do Try Catch bloğu içerisinde gif dosyamızı okumaya çalışıyor ve logoImageView’a atıyoruz. Logo animasyonumuz bu atama yapıldığı anda başlatılıyor. Ayrıca bloğun içerisinde appcentLabel’ın da alpha’nı değiştirerek kaybolma ve geri gelme efektini setLabelsHiddenAnimation ve setLabelsShowAnimation fonksyonları ile sağlıyoruz.
logoImageView’a atadığımız gif animasyonu tamamlandığında ise gifDidStop fonksyonu tetikleniyor ve uygulamamızın açıldığında gösterilecek olan ekranı storyboard üzerinden obje olarak yaratıyoruz. Kod üzerinde görmüş olduğunuz HelloVC adını storyboard üzerinden turuncu olan ViewController’a StoryboardID olarak tanımlamıştık. Bu objeyi root’umuza vererek uygulamanın açılmasını sağlamış oluyoruz.
Örnek projeye linkten ulaşabilirsiniz => https://github.com/ferhanakkan/AnimatedSplashScreen
Sormak istediğiniz bir konu olur ise LinkedIn üzerinden ulaşabilirsiniz. Başka yazılarda görüşmek üzere. Diğer yazılarıma da göz atmak isterseniz:
Rest Api ve Network Layer hakkındaki yazım =>
Segue kullanmadan veri geçişleri hakkındaki yazım =>
iOS uygulamaları için kendi podunuzu geliştirme hakkındaki yazım =>
