0

I have created with help from another tutorial a Custom tab Bar with animation for my Example App to test the Project etc.. and now I want to add the navigation for each Icon(symbol) so when the user presses TapBarButton 1(Symbol"house") they see the HomeView and when tap TapBarButton 2 the next view is visible with some Data, but I don't understand this topic in moment.

so here is the complete Code from this Section for the Custom Tab Bar. I don't need a complete solution, I need only a start Point in which section of my code I must implement the Navigation and how is this the best way for Request?.

the code follow here.. ->

struct CustomTabBarNew: View {
    
    @Binding var selectedTab: String
    
    // Storing each Tab Midpoints to animate in future...
    @State var tabPoints : [CGFloat] = []
    var body: some View {
        
        HStack(spacing: 10) {
            
            // Tab Bar Buttons
            
            TabBarButton(image: "house", selectedTab: $selectedTab, tabPoints: $tabPoints)
            
            TabBarButton(image: "cloud.sun", selectedTab: $selectedTab, tabPoints: $tabPoints)
            
            TabBarButton(image: "paperplane", selectedTab: $selectedTab, tabPoints: $tabPoints)
            
            TabBarButton(image: "plus.app", selectedTab: $selectedTab, tabPoints: $tabPoints)
            
            TabBarButton(image: "gearshape", selectedTab: $selectedTab, tabPoints: $tabPoints)
        }
        
        .padding()
        .background(
            Color.white
                .clipShape(TabCurve(taboint: getCurvePoint() - 15))
        )
        .overlay(
            Circle()
                .fill(Color.white)
                .frame(width: 10, height: 10)
                .offset(x: getCurvePoint() - 20)
            
            ,alignment: .bottomLeading)
        .cornerRadius(30.0)
        .padding(.horizontal)
    }
    // extracting Points..
    func getCurvePoint()->CGFloat {
        
        // if tabpoint is empty...
        if tabPoints.isEmpty {
            return 10
        }
        else {
            switch selectedTab {
            case "house":
                return tabPoints[0]
            case "cloud.sun":
                return tabPoints[1]
            case "paperplane":
                return tabPoints[2]
            case "plus.app":
                return tabPoints[3]
            default:
                return tabPoints[4]
            }
            
        }
    }
}

struct CustomTabBarNew_Previews: PreviewProvider {
    static var previews: some View {
        HomeNewView()
    }
}

struct TabBarButton: View {
    
    var image: String
    @Binding var selectedTab: String
    @Binding var tabPoints: [CGFloat]
    
    var body: some View{
        // mid point for each animation of each button...
        GeometryReader { reader -> AnyView in
            
            let midX = reader.frame(in: .global).midX
            
            DispatchQueue.main.async {
                
                // avoiding junk data...
                
                if tabPoints.count <= 5 {
                    tabPoints.append(midX)
                }
            }
            // extracting Midpoint and Storing ...
            return AnyView(
                
                Button(action:
                        // changing Tab..
                        // Spring animation...
                        
                        {
                            withAnimation(.interactiveSpring(response: 0.6, dampingFraction: 0.5, blendDuration: 0.5)) {
                                selectedTab = image
                            }
                        }, label: {
                            // filling the color if its selcted..
                            
                            Image(systemName: "\(image)\(selectedTab == image ? ".fill" : "")")
                                .font(.system(size: 25, weight: .semibold))
                                .foregroundColor(Color("TabSelected"))
                                // Lifting View..
                                // if its selected
                                .offset(y: selectedTab == image ? -10 : 0)
                            
                        })
                    // MAX FRAME
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            )
        }
        // MAX Height
        .frame(height: 50)
    }
}
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
HannesB.
  • 1
  • 3

0 Answers0