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))
}
}
}