SwiftUI ile Custom Tab bar yaratmak

Merhabalar bu yazımda SwiftUI ile birlikte Custom Tab bar oluşturma işlemini paylaşacağım.

Tab barlar çoğu sosyal mecra ve farklı uygulamalarda karşımıza çıkan yapılar. Bizde yazacağımız yeni uygulamamızda özel ve farklı tab barlar yaratabiliriz. Bu işlem SwiftUI yapısı gereği oldukça kolay. Kendimize özgü yapımızı yazarak tab bar üstü content mantığı şeklinde diğer sayfaları gösterebilir ve modal veya navigation yönlenmeleri yapabiliriz.

 

struct ContentView: View {
    
    @State var selectTabIndex: Int = 0
    
    private let tabImageNames: [String] = ["person", "gear", "plus.app.fill", "pencil", "bubble.right"]
    
    var body: some View {
        VStack {
            ZStack {
                switch selectTabIndex {
                case 0:
                    NavigationView {
                        Text("@User")
                            .navigationTitle("Profile")
                    }
                case 1:
                    NavigationView {
                        Text("...")
                            .navigationTitle("Settings")
                    }
                default: Text("...")
                }
            }
            
            Spacer()
            Divider()
                .padding(.bottom, 7)
            
            HStack {
                ForEach(0..<tabImageNames.count) { itemIndex in
                    Button(action: {
                        selectTabIndex = itemIndex
                    }, label: {
                        Spacer()
                        if itemIndex == 2 {
                            Image(systemName: tabImageNames[itemIndex])
                                .font(.system(size: 40, weight: .bold))
                                .foregroundColor(Color.black)
                        } else {
                            Image(systemName: tabImageNames[itemIndex])
                                .font(.system(size: 24, weight: .bold))
                                .foregroundColor(selectTabIndex == itemIndex ? Color.black : Color.gray)
                        }
                        Spacer()
                    })
                }
            }
        }
    }
}