UIKit: Onboarding ve Launch Ekranı
Onboarding ve launch ekranları ile uygulamanızın deneyimini daha pürüzsüz hale getirebilirsiniz.
Merhaba sevgili TurkishKit okuyucuları! 👋🏻 Bugünkü yazımızda uygulamamıza “onboarding” (uygulama ilk defa açıldığında beliren ekran) ve “launch” ekranı (uygulama her açıldığında ilk olarak beliren ekran) eklemeyi öğreneceğiz. Bu ekranlar sayesinde, kolaylıkla kullanıcının uygulama deneyimini daha sezgisel ve pürüzsüz hale getirebilirsiniz! 🤩
Yazı Önerisi 🎊
Başlamadan söylemiş olalım, eğer en yeni makalemizi okumaya henüz fırsatınız olmadıysa okumanızı kesinlikle öneririz:
Onboarding Ekranı Nedir?
“Onboarding ekranı”, kullanıcı, uygulamanızı ilk defa açtığında beliren ve uygulamanının kullanımıyla ilgili bilgi veren ekrandır. Bunun yanı sıra, uygulamaya bir güncelleme geldiğinde de benzer bir ekran belirip kullanıcıyı yeni özellikler hakkında bilgilendirebilir. 👍🏻
Telefonunuzdaki uygulamaları kullanırken mutlaka daha önce bir “onboarding” ekranıyla karşılaşmışsınızdır. Örneğin, Apple’ın News uygulaması güncellendiğinde kullanıcıları aşağıdaki ekran sayesinde yeni özelliklerle tanıştırmıştı.
Launch (Açılış) Ekranı Nedir?
“Onboarding” ekranının aksine, “launch” ekranı uygulama her açıldığında belirir. Ekranın amacı, kullanıcıya uygulamanın yüklendiğini bildirmek ve uygulama deneyimini daha pürüzsüz hale getirmektir.
Apple, her uygulamanın bir launch ekranı olmasını zorunlu kılmıştır (Apple’ın bu konu ile ilgili yönergesi: Human Interface Guidelines). Aşağıda günlük hayatınızda muhtemelen sıklıkla kullandığınız üç uygulamanın “launch” ekranlarını bulabilirsiniz. 😉
Hadi Kodlayalım!
Şimdi sıra geldi “onboarding” ve “launch” ekranlarını kodlamaya! Xcode uygulamasından yeni bir “Single View App” projesi yaratıp hemen başlayalım. 😁
Uygulamamıza, “launch” ekranımızı yaratarak başlayacağız. Size iyi bir haberim var: Basit bir launch ekranı yaratmak için tek satır bile kod yazmanıza gerek yok! 🥳
İlk olarak projenin Asset.xcassets klasörüne dilediğimiz bir resmi sürükleyelim. Örnek uygulamada TurkishKit logosunu kullandık, sizin kullanacağınız resim büyük olasılıkla uygulamanızın logosu olacaktır.😜
Sonra sol menüden LaunchScreen.storyboard dosyasını açarak beliren “ViewController” ekranının tam ortasına bir “UIImageView” elemanı ekleyelim. Yeni elemanımızın boyutunu “Size Inspector” menüsünden 240 x 240 piksel olarak ayarlayıp, “Attributes Inspector” menüsünden “Image” kısmından az önce projeye eklediğimiz resmi seçelim. Böylece “launch” ekranımız hazır!
Şimdi “Simulator” ile projemizi çalıştırırsak, proje yüklenmeden önce kısa bir süreliğine logomuzun belirdiğini göreceğiz. 🎊
Şimdiyse sıra “onboarding” ekranımızı kodlamaya geldi! Bunu yapmak için ilk olarak Main.storyboard dosyamıza geri dönerek ikinci bir “ViewController” ekranı yaratalım ve iki ekrana da birer “UILabel” elemanı ekleyelim. Bu elemanlar sayesinde hangi ekranın, ne zaman belirdiğini bileceğiz. (Tabii ki normal şartlar altında “onboarding” ekranında sadece bir “UILabel” elemanı yerine uygulamayla ilgili bilgiler yer alacaktır, ancak bu örnek uygulama için kısa bir yazı yeterli olacaktır.)😉
Bunun dışında “onboarding” ekranımıza bir de bir “UIButton” elemanı eklemeliyiz. Eğer bunu yapmazsak “onboarding” ekranından ana ekrana geçiş yapmak için bir yolumuz olmayacaktır!
Bunları yaptıktan sonra uygulamanızın ana hatları aşağıdaki gibi gözükmelidir:
Artık işin kodlama kısmına gelebiliriz. İlk olarak “Devam Et” düğmesinden ana ekrana kntrl + sürükle yaparak Action Segue > Show seçeneğine tıklayarak iki ekranı birbirine bağlayalım.
Sonrasında onboarding ekranına tıklayarak “Identity Inspector” menüsünden “Storyboard ID” özelliğini “OnboardingViewController” olarak belirleyelim. Bu isim, kodumuzu yazarken “ViewController” elemanının kimliğini saptamamıza yardımcı olacak!
Şimdi yarattığımız “onboarding” ekranı için yeni bir “UIViewController” sınıfı oluşturmalıyız. Bunu yapmak için File > New > File… > Cocoa Touch Class seçeneğine tıklayarak “UIViewController” elemanının alt sınıfı olan “OnboardingViewController” isimli bir sınıf yaratalım ve “OnboardingViewController.swift” dosyasına girelim.
Bu dosyanın içerisinde sadece tek bir metod yazacağız, bu da kullanıcının uygulamaya daha önce girip girmediğini kaydeden metod olacak. UserDefaults’ta openedApp değerinin içinde, kullanıcının uygulamayı daha önce açıp açmadığını gösteren bir “boolean” değişkeni saklayacağız. (Eğer “UserDefaults” hakkında daha fazla bilgi almak isterseniz, bu konudaki makalemizi okumanızı tavsiye ederim!) “Onboarding” ekranındaki “Devam Et” butonuna tıklandığında bu değeri “true” olarak belirleyerek, kullanıcının bu ekranı daha önce görmüş olduğunu kaydedeceğiz.
Bunu yapmak için “Devam Et” butonundan “OnboardingViewController.swift” dosyasına kntrl + sürükle yaparak “continueTouched” isimli yeni bir fonksiyon yaratalım. Bu fonksiyonun içerisine tek bir satır yazacağız, ve bu satır “UserDefaults” içerisinde yer alan openedApp değerini “true” olarak ayarlayarak bu değeri kaydedecek. 🤩
Bundan sonra yazacağımız kodların tamamı “SceneDelegate.swift” dosyasında yer alacak. Hemen bu dosyayı açarak “window” isimli yeni bir değişken tanımlayalım! Bu değişken, “ViewController” elemanlarımızı ekrana yansıtmamızı sağlayacak.
Şimdiyse sıra işin mantığında! Uygulama açıldığında hangi ekranın belireceğini kontrol etmek için “willConnectTo” metodunu değiştireceğiz:
Yukarıda yazdığımız kod uzun gözükse de aslında oldukça basit bir mantığı var. 😉
İlk olarak yarattığımız “window” değişkenine bir değer verip, “Main” isimli storyboard elemanımızı “storyboard” isimli bir değişkende saklıyoruz. Sonrasında hangi ekranı göstereceğimizi saklayacak olan “vc” değişkenini tanımladık.
Bunun altında yer alan “if-else” bloğunun içerisinde, “openedApp” değerinin “nil”(boş) olup olmadığını kontrol ediyoruz. Eğer kullanıcı uygulamayı ilk defa açıyorsa bu değer “nil”(yani boş) olacaktır, ama uygulama daha önce açıldıysa “true” olacaktır. Eğer “openedApp” değeri “nil”(boş) ise, “vc” değişkenine “onboarding” ekranını tanımlıyoruz. Başka durumlarda ise varsayılan “initialViewController” değerini kullanıyoruz!
Son olarak, tanımladığımız “vc” değişkenini ekrana yansıtmak için window.rootViewController = vc ve window.makeKeyAndVisible() satırlarını kullanıyoruz.
İşte uygulamamız bitti! Artık uygulama ilk defa açıldığında kullanıcı “onboarding” ekranını görecek, sonraki açışlarında ise direkt olarak ana ekrana yönlendirilecektir. Oldukça havalı, değil mi? 😉
Uygulamamıza nasıl “onboarding” ve “launch” ekranları ekleyebileceğimizi öğrendik. Umarım bu yazımızdan keyif almışsınızdır! Uygulama deneyiminizi daha pürüzsüz hale getirmek istiyorsanız “onboarding” ve “launch” ekranları eklemenizi kesinlikle tavsiye ederim. Keyifli kodlamalar! 💻
Yaptığımız uygulamanın bitmiş haline aşağıdaki linke tıklayarak ulaşabilirsiniz!
Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.
Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
