SwiftUI Temel Viewlar Part-2

Salihcan Kahya
HardwareAndro
Published in
3 min readAug 6, 2020

--

Selamlar SwiftUI’ın sağladığı temel viewlar serisinin 2. bölümündeyiz. Eğer ilk yazıyı okumaydıysanız buradan yazıya ulaşabilirsiniz. Evvet çok uzatmadan başlayalım.

NavigationLink

Sayfalar arası geçiş yapabilmemizi sağlayacak ve sıkça kullanacağımız bir view. Farklı kullanımları mevcut fakat ben iki tanesinden bahsetmek istiyorum. İlk kullanımımız için, herhangi bir View’ın üzerine basıldığında başka bir sayfaya yönlendirmek üzere butonlaştırıyor diyebiliriz.

Label parametresi NavigationLink’in kapsayacağı bir view istiyor. Destination parametresi ise label’ın içerdiği View’a tıklandığında yönlendirilecek bir View istiyor.

Not: NavigationLink, NavigationView olmadan çalışmamaktadır.

Not: Yanda çıkan oklar neden geldi diyorsanız, NavigationLink ile otomatik olarak geliyor fakat bu okları çeşitli yöntemlerle kapatmak mümkün.

İkinci yöntemde ise isActive parametresine bir bool değer veriyoruz. Eğer bu bool değer true olursa otomatik olarak NavigationLink tetikleniyor ve bizi diğer sayfaya yönlendiriyor.

Gördüğünüz gibi NavigationLink içerisine EmptyView koyduk yani herhangi bir özelliği olmayan bir View. Butona bastığımızda ise goSecond değeri false değerden true değere dönüyor ve NavigationLink içerisindeki destination parametresinde olan View yeni bir sayfada bize gösteriliyor. Yeni sayfadan geri butonu ile döndüğümüzde otomatik olarak goSecond değeri false oluyor.

VStack, HStack ve ZStack

Bu üç View, aslında ilk anlatmam gereken Viewlardı fakat en başta Viewları konumlandırma veya sıralama işine girmek istemedim. Yine çok uzatmadan bu üç View’ın kullanımlarını ve çıktılarını görelim.

VStack, içerdiği Viewların dikey olarak sıralanmasını sağlamakta.

Not: Parantez içerisindeki spacing parametresi VStack içerisindeki Viewlar arası boşluk miktarıdır.

VStack

HStack, içerdiği Viewların yatay olarak sıralanmasını sağlamakta.

HStack usage output
HStack

ZStack, içerdiği Viewların Z ekseninde sıralanmasını sağlamakta. İlk yazılan View Z ekseninde en arkaya gitmiş olur.

ZStack

ScrollView

ScrollView içerisine yerleştirilmiş Viewlar eğer ekrana sığmıyorsa otomatik olarak kaydırılabilir ekran oluşturmamızı sağlıyor. Bu kaydırmayı dikey veya yatay olarak ayarlayabiliyoruz.

Not: İlk girilen parametre kayma yönünün hangi eksende olacağını belirtiyor. İkinci parametre kaydırma sırasında en sağda çıkan göstergenin olup olmayacağını ayarlıyor.

Not: Yukarıdaki gif aynı kodun HStack ve kaydırma yönü olarak horizontal yazılmış halidir.

TabView

TabView, bize kolayca bottom navigation bar oluşturmamıza yarıyor. Bu görünüm çok sadece geliyorsa eğer kendinize özel bir TabView yazabilirsiniz. İleride yazacağım yazılardan birisi de bu olacak :).

Eğer TabView’a bir selection verirseniz ve her bir tabItem’a tag eklerseniz, sayfalar arası geçişlerde biraz daha esneklik sahibi olabilirsiniz. Örneğin bu kodda mavi ekran ve kırmızı ekran olmak üzere iki sayfamız var. Mavi ekrana tıkladığımızda tabIndex, 1'e eşitleniyor ve tag değeri 1 olan kırmızı ekrana geçiş yapıyor.

Sonuç

Bir yazının daha sonuna geldik. Temel olarak oldukça güzel Viewları öğrendiğimizi düşünüyorum. Bir sonraki yazıda Formlardan bahsedeceğim. Daha önce dediğim gibi ileride daha karışık güzel custom Viewlar oluşturacağımız yazılar olacak takipte kalın.

Görüşmek üzereee.

--

--