-1

So I was designing a custom navigation bar in SwiftUI and I've come across this problem, any help is appreciated... You can see I already tried using states and if statements but I needed to add navigation links which got changed since IOS 16.0 and I'm not familiar with them :(

import SwiftUI

enum Tabs: Int {
    case pt = 0
    case lessons = 1
    case home = 2
    case notes = 3
    case settings = 4
}

struct CustomTabBar: View {
    
    @Binding var selectedTab: Tabs
    @State var navigated0 = false
    @State var navigated1 = false
    @State var navigated2 = false
    @State var navigated3 = false
    @State var navigated4 = false

    
    var body: some View {
        
        ZStack {
            RoundedRectangle(cornerRadius: 30)
                .frame(height: 100)
                .foregroundStyle(.ultraThinMaterial)
                .shadow(radius: 5)
            HStack (alignment: .center){
                
                
                Button {
                    //Switch to Home View
                    selectedTab = .pt
                    Periodic_View()
                    if selectedTab == .pt {
                       self.navigated0.toggle()
                    }
                } label: {

                    CustomTabBarView(buttonText: "PT", imagename: "atom", imagefillname: "atom", isActive: selectedTab == .pt, color: .indigo, size: 30)
                }
                .tint(Color("TabBar"))
                Button {
                    //Switch to Home View
                    selectedTab = .lessons
                    if selectedTab == .lessons {
                        self.navigated1.toggle()
                    }
                } label: {
                    CustomTabBarView(buttonText: "Lessons", imagename: "text.book.closed", imagefillname: "text.book.closed.fill", isActive: selectedTab == .lessons, color: .blue, size: 30)
                }
                .tint(Color("TabBar"))
                Button {
                    //Switch to Home View
                    selectedTab = .home
                    if selectedTab == .home {
                        self.navigated2.toggle()
                    }
                    } label: {
                        CustomTabBarView(buttonText: "Home", imagename: "house", imagefillname: "house.fill", isActive: selectedTab == .home, color: .green, size: 38)
                    }
                .tint(Color("TabBar"))
                Button {
                    //Switch to Home View
                    selectedTab = .notes
                    if selectedTab == .notes {
                        self.navigated3.toggle()
                    }
                } label: {
                    CustomTabBarView(buttonText: "Notes", imagename: "tray.full", imagefillname: "tray.full.fill", isActive: selectedTab == .notes, color: .orange, size: 30)
                }
                .tint(Color("TabBar"))
                Button {
                    //Switch to Settings View
                    selectedTab = .settings
                    if selectedTab == .settings {
                        self.navigated4.toggle()
                    }
                } label: {
                    CustomTabBarView(buttonText: "Settings", imagename: "gearshape", imagefillname: "gearshape.fill", isActive: selectedTab == .settings, color: .gray, size: 30)
                }
                .tint(Color("TabBar"))
                
            }
            .frame(height: 100)
            
        }
    }
}

struct CustomTabBar_Previews: PreviewProvider {
    static var previews: some View {
        CustomTabBar(selectedTab: .constant(.home))
    }
}

I tried using States and if statements, and I think it would work if I was developing on IOS 15.0 but not on 16.0

1 Answers1

0

You can use something like that:

struct TabBarElement: View {
    @Binding var tab: Int
    let index: Int
    let name: String
    
    var body: some View {
        Button {
            tab = index
        } label: {
            Text(name)
                .foregroundColor(tab == index ? .blue : .primary)
                .padding(.vertical, 5)
        }
        
    }
}

Usage:

struct CustomTabBar: View {
    
    @State var selectedTab: Int = 1
    
    var body: some View {
        VStack {
            HStack {
                TabBarElement(tab: $selectedTab, index: 1, name: "Tab1")
                TabBarElement(tab: $selectedTab, index: 2, name: "Tab2")
                TabBarElement(tab: $selectedTab, index: 3, name: "Tab3")
                TabBarElement(tab: $selectedTab, index: 4, name: "Tab4")
            }
            // This is not part of the tabbar
            switch selectedTab {
            case 1:
                Text("1")
            case 2:
                Text("2")
            case 3:
                Text("3")
            default:
                Text("Default")
            }
        }
    }
}
Jonas Lang
  • 213
  • 1
  • 2
  • 12
  • You can easily change the `Int` value with the `enum`. When you need help with this let me know. – Jonas Lang Mar 07 '23 at 22:03
  • So I kinda get the answer but I don’t understand how that fixes the button not switching views. my button layout is great and I love it it is just that they are not functional – StackedErrors Mar 08 '23 at 07:45
  • You can adjust the styling of the `TabBarElement` to fit your needs. – Jonas Lang Mar 08 '23 at 08:29