Swift Programmatically Login/Register Ekran Tasarımı
Merhabalar, Swift ‘te storyboardsız olarak ekran açmayı bir önceki yazımda anlattım bu adımları es geçerek, ekran tasarlamaya aşamasına geçebiliriz.
Önceki yazım :
1- Öncellikle Reources adında bir folder oluşturalım ve bunun içine AppDelegate, SceneDelegate, Assets.xc ve Info.plist’i tutup bu folderimizin içine atalım. Bunu yapma sebebim ise: Daha derli, toplu bir yapı olması için.
Bunları yaptıktan sonra, Info.plist’in yeni yerini xcode’ söylemeliyizki hata almayalım.
2- Login ekranımızı tasarlamak için, LoginVC adında UIViewController’ımızı oluşturalım.
Not: Ben bu LoginVC class’ımızı, SceneDelegate.swift içinde belirttimki, uygulama ilk o sınıftan başlasın.
3- Ekranlarımızın constraintlerini vermek içinde ben UIView’dan extend yaptığım bir swift file’ını kullanacağım. Çünkü: her seferinde NSLayout.constraint ve activate kullanmamak için. Bu extensionun bize faydası ise .anchor() metoduyla constraint işlerini, programatik olarak halletmek.
Swift dosyamızın adına: Extension+UIView.swift şeklinde oluşturuyorum ki baktığımda UIView’ı extend ettiğimi anlayayım.
4- Diğer bir kullandığım extension ise UITextField’tan kalıtılan bir CustomTextField. Bu UITextField objelerimizi kolayca, bizim istediğimiz yükseklik ve padding değerine göre oluşturmamıza yarayan bir class olacak. Bunu Furkan Sabazın eğitimlerinde denk geldiydim. O eğitimleride tavsiye ederim.
Classımızın adı: Extension+Textfield.swift verdim ve şu şekilde olacak:
Buraya kadar elimizde 2 tane extension ve ayrıca şimdilik içi boş olan LoginVC: UIViewController ve Resources folderi olacak.
5- Artık LoginVC ekranımızı programmatik olarak yazmaya geçebiliriz.
Ekranımız bu şekilde görünecek. Email ve password validation işlemleri kısmını Firebase ile yapcağımızdan. Bu yazımda sadece tasarıma odaklanıp, o kısımları sonra ele alacağım. LoginVC ekranımızın tüm kodları şu şekilde olacak.
Ekran görünmesini istediklerim TextField, UIImageView, UIStackView, UILabel ve UIButton’lardır. Dikkat ederseniz burda UIStackView kullandım.
UIStackView kullanma amacım ise:
txtEmail, txtPassword, forgetPwTxtLabel, loginBtn, registerBtn adlı Objeleri bir bütün içinde tutup, ekranımızda sadece UIStackView konumlandıracağım.
Yani elimizde bir Dikdörtgen olduğunu düşünelim ve bu dikdörtgen içine bu yapıları koyuyorum. O yapıların konumu(constraintlerini) vermeme gerek yok. Çünkü UIStackView .vertical özelliği ile hepsini alt alta getirecek şekilde ayarlıyorum.
6- Ekranda yer tutacak nesnelerimizi ise , viewDidLoad içinde .addSubview() olarak belirtmeliyim.
view.addSubview(stackView)
view.addSubview(myview)
view.addSubview(personImgView)
view.addSubview(loginTxtLabel)
Gördüğünüz gibi, stackView içindeki yapıları burda yapmadım, çünkü bunları arrangedSubviews[ ] içinde verdim. Yani benim artık bundan sonra yapmam gereken:
addSubview’lara constraintlerini, oluşturduğumuz Extension+UIView içinde anchor() metoduyla vermek.
7- Ekranda shadow(gölge) vermek için ise setupShadows() adlı metodu oluşturdum. Bunuda viewDidLoad() içinde çağırdım ki, viewDidLoad() içi çok karışık olmasın. Parça parça dursun, daha rahat ulaşayayım diye.
8- LoginVC classını extension ile genişlettim ki, tüm @ objc func’larını derli toplu bir yerde tutayım diye. Bu metodlar ise: registerBtn, forgetPwTxtLabel, loginBtn adlı nesnelerde click tetiklenmesini istediğim action’lar. Bu actionlar sayesinde, loginBtn tıkladığımdan sonra İstediğim sayfaya geçmesi, registerBtn ile RegisterVC ( Birazdan yazacağız) ekrana gitmesi ve ayrıca forgetPwTxtLabel click ilede, şifremi unuttum işlemlerinde e-mail yollamak için hazır tuttuğum metodlar. Şimdik burda sadece tasarımı ve RegisterVC sayfasına geçmeyi göstereceğim.
9- Son olarak, .anchor() metodunun içinde:
padding -> o nesnenin, dışından boşluk bırakmasını sağlar.
size -> Bu ise o nesnenin width ve height’ını vermemizi sağlar.
10- Şimdik sırada RegisterVC ekranımız olacak.
Register ekranımız bu şekilde görünecek. LoginVC ekranından -> present şeklinde geçecek ve .modalPresentationStyle = .pageSheet olarak.
RegisterVC ekranımızın tüm kodları şu şekilde olacak:
11- Yine yapılarımız alta alta olduğu için, hepsini UIStackView içine aldımki, içideki yapıların hepsine constraint vermemek için.
12- Ayrıca password ve repassword alanlarının eşleşip, eşlemediğini kontrolünü yapan ve bunu UI olarak gösteren yapıyıda yazdım. Diğer yapılara ise şimdilik geçmiyorum.
Uygulamanın en son hali şu şekilde olacak:
Tüm kodlar Github:
