WWDC19: SwiftUI Temelleri
WWDC oturumlarını sizlerle paylaşmaya devam ediyoruz. Bu oturum ile SwiftUI dünyasını kapılarını aralıyor, yeni dünyaya Merhaba! diyoruz.
Güncel olarak WWDC oturumlarında yazdığımız makaleler ile yeni teknolojileri sizlerle anlık olarak paylaşıyoruz. SwiftUI hakkında temel bilgilerin verildiği bu oturum daha az kod yazarak daha güzel uygulamalar yapabileceğinizin mesajını veriyor. Oturum da zaten bu cümle ile başladı 😀 Hazırsanız biz de başlayalım. ▶️
View
iOS uygulamalarında gördüğümüz her piksel aslında bir View. Bu nedenle bu View elementlerinin içerisine metinler, butonlar ve resimler gibi birçok element ekleyebiliyorsunuz. SwiftUI ile birlikte ise bu tamamen farklı ve kolay bir mekanizma sayesinde gerçekleşiyor. View içerisine bir StackView eklemek ise aşağıdaki kod bloğu kadar kolay! Dikey Stack View yaratmak için VStack, yatay Stack View yaratmak için HStack kod bloğunu kullanabilirsiniz.
Şimdi bu Stack elementine Text, Button ve Image ekleyelim. Stack içerisine arayüz elemenleri eklerken eklediğimiz sıraya dikkat etmemiz gerekiyor. Bir Image ekleyerek projemize başlayalım ve çeşitli arayüz elemenlerini SwiftUI ile nasıl oluşturacağımıza göz atalım.
Image
VStack içerisine bir resim eklemek için tek yapmanız gereken Assets klasörüne bir resim eklemek ve ardından şu kısa(belki çok kısa 😀) kodu VStack içerisine yazmak: Image("SwiftUI"). Ben görsel olarak SwiftUI ikonunu seçtim ve “SwiftUI” olarak adlandırdım. Bu görselimizi biraz havalı bir forma getirelim.
Görselimizi dairesel olarak maskelemek için .clipShape fonksiyonunu kullandık. Bunun gibi örnekler ile SwiftUI, fonksiyon merkezli bir dil izlenimi veriyor. .overlay fonksiyonu ile border veriyoruz. .shadow fonksiyonu ile de görselimize gölge verdik.
Text
Şimdi de oluşturduğumuz VStack içerisine iki adet metin ekleyelim. Hiyearşi önemli olduğundan bu metinleri oluşturduğumuz Image elementinden sonra yazmaya dikkat edelim. Text oluşturmak için gerekli olan kod da oldukça basit : Text("Merhaba") . Bu kullanım bize “Merhaba” yazılı bir metin çizecek. Daha sonra bu metini .font(.title) fonksiyonu ile kalınlaştırıyoruz.
Button
Son olarak projemize bir de Button ekleyelim. Button eklemek için gerekli olan bir fonksiyon yaratıyoruz. Ardından Button içerisinde Text ekliyoruz.
Şimdi de butonumuzu farklı bir görünüme kavuşturalım ve Stack mekanizmasını Button içerisinde kullanalım. Bu sayede butonun bir ikonu ve metini oldu. Fakat hala bir arkplan eksik.
Arkaplan eklemek için yapmamız gereken işlem de yine çok basit. .background fonksiyonu ile renk veriyoruz. Mavi rengini seçtiğim için metinlerimizin rengini değiştirmemiz gerekiyor. .foreground fonksiyonu ile beyaz rengini veriyoruz. Artık güzel bir butonumuz var!
İşte SwiftUI ile çeşitli arayüz elemanları eklemek ve onları özelleştirmek çok kolay. Ayrıca Xcode 11, Preview mod sayesinde yaptığınız değişiklikleri hızlıca deneyimlemeyi ve belirli değişiklikleri kod yazmadan yapmayı sağlıyor. Fonksiyon ve Stack kullanımının yoğun olarak anlatıldığı SwiftUI oturumunu sizin için özetledik. SwiftUI konusunu detaylı olarak anlatacağımız makalelerimiz için beklemede kalın!
