SwiftUI: TabView

SwiftUI ile iki veya daha fazla sayfayı göstermek istediğinizde bunun en kolay yolu TabView elemanıdır.

Hadi Başlayalım

Yeni bir SwiftUI projesi açalım ve projemizde yeni bir SwiftUI View dosyası oluşturalım ve adına MainView diyelim. Bunun için Command + N kısayolunu kullanabilirsiniz.

SwiftUI View dosyasını seçtik.

Dosyamıza MainView adını verdik.

TabView Oluşturalım

Oluşturduğumuz MainView dosyasının içerisini aşağıdaki gibi kodlarımızı yazalım.

struct MainView: View {
    var body: some View {
        TabView{
            ContentView()
                .tabItem {
                    Text(“1. Sayfa”)
                    Image(systemName: “1.circle.fill”)
            }
        }
    }
}

İlk önce TabView nesnemizi oluşturduk.

     TabView{
            ...
            }

Daha sonra içerisinde hangi sayfanıın gösterileceğinin bilgisini verdik.

     TabView{
            ContentView()
                .tabItem {
                    Text(“1. Sayfa”)
                    Image(systemName: “1.circle.fill”)
            }
        }

.tabItem ile TabView için buton oluşturuyoruz. Oluşturduğumuz butonun içerisine Text ve Image nesnelerini oluşturduk ve böylece butonumuzu isimlendirdik.

                .tabItem {
                    Text(“1. Sayfa”)
                    Image(systemName: “1.circle.fill”)
            }

İkinci Sayfayı Oluşturma

Projemizde yeni bir SwiftUI View dosyası oluşturalım ve adına SecondView diyelim. Bunun için Command + N kısayolunu kullanabilirsiniz.

SwiftUI View dosyasını seçtik

Dosyamıza SecondView adını verdik.

İkinci Sayfayı TabView Nesnesine Ekleme

MainView dosyamıza geri dönelim ve aşağıdaki gibi kodlarımızı ekleyelim.

struct MainView: View {
    var body: some View {
        TabView{
           ContentView()
               .tabItem {
                   Text(“1. Sayfa”)
                   Image(systemName: “1.circle.fill”) 
           }
           SecondView()
               .tabItem {
                   Text(“2. Sayfa”)
                   Image(systemName: “2.circle.fill”)
           } 
       }
    }
}

Uygulamamızı test etmeden önce ContentView ve SecondView dosyalarımızın içerisindeki Text nesnelerini düzenleyelim ve SceneDelegate dosyasında bulunan başlangıç sayfasını MainView() yapalım.

ContentView

struct ContentView: View {
    var body: some View {
        Text(“1. Sayfa”)
    }
}

SecondView

struct SecondView: View {
    var body: some View {
        Text(“2. Sayfa”)
    }
}

SceneDelegate sayfasında kod bloğumuzu değiştirelim ve uygulamamızın başlangıç sayfasını MainView() yapalım.

ContentView() değişecek.

ContentView bloğunu değiştirip MainView yaptık.

Uygulamamızı Test Edelim

Uygulamamız sağlıklı olarak çalışıyor. 3. sayfayıda siz ekleyebilirsiniz. Eğer bir sorun yaşarsanız size seve seve destek olacağız. 😇

Aşağıdaki linkten projenin son haline ulaşabilirsiniz:

TurkishKit/SwiftUI-TabView

Bir makalemizin daha sonuna geldik. Bu makalemizde TabView yapısının kullanımını ve nasıl çalıştığını ele aldık. İyi kodlamalar dilerim… 🤓

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook