SwiftUI Temel Viewlar Part-1

SwiftUI, WWDC 2019’da duyurulmuş yeni bir arayüz kütüphanesidir. Sadece IOS 13 ve üzeri destek veren SwiftUI, UIKit’e göre oldukça kolay bir şekilde Viewları kişiselleştirebilir veya default olarak kullanabilirsiniz. Bu kısmı çok uzatmadan SwiftUI’da bize sunulan temel Viewları gözden geçirmeye başlayalım. Bu Viewlar bolca olduğundan dolayı bu liste uzayıp gidecektir bu sebeple yazıyı parçalar halinde yayınlayacağım. Vee bu yazıda farklı kullanımları, özelleştirilmiş Viewlar oluşturma vb. detaylardan çok bu Viewların ne olduklarına değineceğiz.

List

UIKitte olan ve çoğu uygulamada görebileceğiniz bir View TableView ile başlayalım. SwiftUI’da bunu List olarak kullanıyoruz. Aşağıda basit bir kullanımını görebilirsiniz.

Evet içerisinde 100’e kadar sayan bir listemiz oldu ve parantezleri saymazsak sadece 3 satır. Tabi içerisine sadece Text koyacağız diye bir şey yok. Kendi oluşturduğunuz bir View’ı rahatlıkla koyabilirsiniz.

NavigationView

NavigationView, NavigationLink ile başka sayfalara geçebilmemizi, NavigationBar kısmında farklı tiplerde başlık koyabilmemizi ve sağına veya soluna butonlar koymamızı çok kolaylaştıran bir View. Az önce öğrendiğimiz List ile NavigationView’ı birleştirelim ve List’in parantezinin bitimine navigationBarTitle fonksiyonunu ekleyelim. Fonksiyonun içine ilk parametre olarak “Home” yazarak sayfamıza bir başlık vermiş oluyoruz. İkinci parametremiz olan displayMode ise başlığın largeTitle mı inline mı yoksa otomatik olarak ikisi arasında geçiş mi yapsın buna karar veriyor. Ben bunu inline olarak seçiyorum.

Not: Buradaki önemli detay NavigationView parantezinden sonra değil bir içerisindeki componentin parantezi sonunda bu fonksiyonu çağırmak.

Button

Bu seferde oluşturduğumuz NavigationView üzerinden devam edecek olursak. Başlığımızın sağına ve soluna birer tane buton ekleyelim. Başlığı verdiğimiz fonksiyonun devamına navigationBarItems fonksiyonunu yazıyoruz ve içine parametre olarak butonumuzun NavigationView’ın başlangıçında mı yoksa sonunda mı olacağını belirleyen leading ve trailing parametrelerine birer buton tanımlayalım. Şimdilik sadece yazı olarak buton ekleyeceğimiz için aşağıdaki gibi butonu tanımlayabilirsiniz.

Image

Buton tanımlamayı öğrendik fakat bunu bir String ile yaptık. Peki bunu bir icon ile nasıl yaparız diye soruyorsanız cevabı Image. Sadece String ile tanımlamadan farklı olarak ilk önce butona basıldığında olacak aksiyonu sonrasında butonun içeriğini bizden istiyor. İçerik istediği kısımda bir Image tanımlaması yaptıktan sonra parametre olarak systemName’e ilk Image için “line.horizontal.3” ikinci Image için “plus” yazıyoruz.

Not 1: Artı iconu biraz daha büyütmek için aşağıda font fonksiyonunu kullandım.

Not 2: Diğer systemNameleri öğrenmek için buradan SF Symbols’ü indirerek tüm listeye ulaşabilirsiniz.

Eğer biraz daha özgür bir boyutlandırma olsun istiyorsanız, aşağıda görüldüğü gibi frame fonksiyonu üzerinden genişlik ve yükseklik ayarlayabilirsiniz.

Not: Boyutlandırma resizable fonksiyonu yazılmalıdır. Aksi taktirde sadece frame genişler fakat Image aynı şekilde kalır.

Image(systemName:"plus").resizable().scaledToFit().frame(width: 100,height:100)

Sheet

NavigationView butonları üzerinden ilerledik ama bunlara konsola yazı yazdırmaktan başka bir aksiyon atamadık. Bu sebeple şimdi Sheet Viewinden bahsetmek istiyorum. Kullanımı oldukça basit ve hoş bir görüntüsü var. İlk olarak body’nin üstüne @State var showSheet = false şeklinde bir değişken tanımlayalım. Şimdi sheetimizi oluşturalım. Daha önce, List’in sonrasında çağırdığımız fonksiyonların devamına sheet fonksiyonunu ekleyelim. Parametre olarak sırası ile isPresented’e $showSheet ikinci olarak content kısmına Butonda olduğu gibi süslü parantezler içine şimdilik basit bir Text(“Add Page”) ekleyelim. Son olarak ikinci butonumuzun içerisine self.showSheet.toggle() ekleyelim.

Not 1: Buradaki @State özelliği basitçe bu değer değiştiğinde UI’ın yenilenmesini sağlıyor böylelikle verilerimizde olan değişiklikleri UI’a yansıtmış oluyoruz.

Not 2: isPresented, sheetimizi tetikleyecek Bool değer ve @State olduğu için başına $ işareti koyuyoruz.

Sonuç

Şu ana kadar List, NavigationView, Button, Text, Image ve Sheet gibi Viewları gördük. Şimdilik bu kadar diyebiliriz. Olabildiğince pratik kullanımlarını anlatmaya çalıştım umarım yardımcı olabilmişimdir. Diğer Viewları serinin devamında anlatacağım. Görüşmek üzere takipte kalın…