0

I need to round the edges of the tabbar and make a rectangular line on each button when pressed.

It is necessary to make a corner radius for the tabbar and a rectangular curve for the code button. The code is working, but I need help. thank you

struct Home: View {
    @State var selected = "HOROSCOPE"
    @StateObject var tabBarManager = TabBarManager()
    
    init() {
        UITabBar.appearance().isHidden = true
    }
    
    @State var centerX: CGFloat = 0
    @State var radius: CGFloat = 0
    
    var body: some View {
        
        VStack(spacing: 0) {
            
            TabView(selection: $selected) {
                
                HomePage()
                    .tag(tabItems[0])
                
                CompatibilityView()
                    .tag(tabItems[1])
                
                CardAnimation()
                    .tag(tabItems[2])
                
                ProfileView()
                    .tag(tabItems[3])
            }
            
            HStack(spacing: 0) {
                
                ForEach(tabItems, id: \.self) { value in
                    
                    GeometryReader { reader in
                        TabBarButton(selected: $selected, value: value, centerX: $centerX, rect: reader.frame(in: .global))
                        
                            .onAppear(perform: {
                                if value == tabItems.first {
                                    centerX = reader.frame(in: .global).midX
                                }
                            })
                        
                    }
                    .frame(width: 90, height: 70)
                    
                    if value != tabItems.last{Spacer(minLength: 0)}
                }
            }
            .padding(.horizontal, 7)
            .padding(.top)
            .padding(.bottom, UIApplication.shared.windows.first?.safeAreaInsets.bottom == 0 ? 15 : UIApplication.shared.windows.first?.safeAreaInsets.bottom)
            .background(GradientView(gradient: .gradient13)).clipShape(AnimatedShape(centerX: centerX))
            .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: -5)
            .padding(.top, -15)
        
        }
        .ignoresSafeArea(.all, edges: .bottom)
    }
}


struct TabBarButton: View {
    
    @Binding var selected: String
    var value: String
    @Binding var centerX: CGFloat
    var rect: CGRect
    
    var body: some View {
        
        Button(action: {
            withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) {
                selected = value
                centerX = rect.midX
            }
        }, label: {
            
            VStack {
                
                Image(value)
                
                    .resizable()
                    .renderingMode(.template)
                    .frame(width: 26, height: 26)
                    .foregroundColor(selected == value ?  Color.white :  Color.hex7E7BFF)

                    .frame(width: 56, height: 56)
                    .background(selected == value ? AnyView(GradientView(gradient: .gradient6)) : AnyView(Color.clear))
                
                    .cornerRadius(17)
                    .offset(y: selected == value ? -15 : 00)
                
                Text(value)
                    .font(.bold8())
                    .foregroundColor(.hex7E7BFF)
            }
            
            //Deafult Frame
            .padding(.top)
            .frame(width: 90, height: 70)
            
        })
    }
}

Curve

struct AnimatedShape: Shape {
    
    var centerX: CGFloat
    
    var animatableData: CGFloat {
        
        get{return centerX}
        set{centerX = newValue}
    }
    
    func path(in rect: CGRect) -> Path {
        
        return Path { path in
            path.move(to: CGPoint(x: 0, y: 15))
            path.addLine(to: CGPoint(x: 0, y: rect.height))
            path.addLine(to: CGPoint(x: rect.width, y: rect.height))
            path.addLine(to: CGPoint(x: rect.width, y: 15))
            
            // Curve...
            
            path.move(to: CGPoint(x: centerX - 35, y: 15))
            
            path.addQuadCurve(to: CGPoint(x: centerX + 35, y: 15), control: CGPoint(x: centerX, y: -15))
            
        }
    }
}

enter image description here

lorem ipsum
  • 21,175
  • 5
  • 24
  • 48

0 Answers0