I'm developing an app in which I use a tab bar br using HStack{} with Button functions inside of it as shown here: https://i.stack.imgur.com/18Amd.png and I'm trying to round the corners of the bar.
I've tried using .clipShape(RoundedRectangle(cornerRadius:20)) but it will cut out any content outside of the bounds of the background: https://i.stack.imgur.com/zVZb6.png.
Is there a way to round the corners of the HStack background without clipping out the buttons inside of it?
I'm using Xcode 12.0 with SwiftUI.
The code that I'm using is here:
struct TabBar: View {
@Binding var selectedTab : Int
//To assign item color when selected
@State var icon = "unSelect"
var body: some View {
//Icon Design
HStack(alignment: .center) {
Group {
//Home Icon
Button(action: {
self.selectedTab = 0
}) {
HStack(spacing: 5) {
Image("Home").resizable()
.frame(width: 40, height: 40)
}
.padding(5)
}
.foregroundColor(self.selectedTab == 0 ? Color("Select") : Color("unSelect"))
//Chart Icon
Button(action: {
self.selectedTab = 1
}) {
HStack(spacing: 5) {
Image("Chart").resizable()
.frame(width: 40, height: 40)
}
.padding(5)
}
.foregroundColor(self.selectedTab == 1 ? Color("Select") : Color("unSelect"))
//Add Icon
Button(action: {
self.selectedTab = 2
}) {
HStack(spacing: 5) {
Image("Add")
.resizable()
.frame(width: 83.52, height: 83.52, alignment: .top)
.overlay(Circle().stroke(Color("Tab"), lineWidth: 8))
}
.offset(y: -17)
.edgesIgnoringSafeArea(.all)
}
//Log Icon
Button(action: {
self.selectedTab = 3
}) {
HStack(spacing: 54) {
Image("Log").resizable()
.frame(width: 50, height: 50)
}
.padding(4)
}
.foregroundColor(self.selectedTab == 3 ? Color("Select") : Color("unSelect"))
//Settings Icon
Button(action: {
self.selectedTab = 4
}) {
HStack(spacing: 5) {
Image("Settings").resizable()
.frame(width: 40, height: 40)
}
.padding(5)
}
.foregroundColor(self.selectedTab == 4 ? Color("Select") : Color("unSelect"))
}
}
.padding(.vertical, -10)
.padding(.horizontal, 30)
.background(Color("Tab"))
.padding(.top)
.padding(.top)
.clipShape(RoundedRectangle(cornerRadius:20))
}