How to build custom TabBar using SwiftUI?

Xode 12 — iOS 14

Demo -Image

Implementation Logic

• Build Bottom Bar HStack UI with tab Item
• Move/Translate selected tab up on Tap
• Draw Bar path as curve around selected Indes

First we create a tab Item object which contains Tab Icon name and the relative offset.

class TabItem: Identifiable {
    let id = UUID()
    let imageName: String
    var offset: CGFloat = -5
    var opacity: Double = 1
    
    init(imageName: String, offset: CGFloat) {
        self.imageName = imageName
        self.offset = offset
    }
    init(imageName: String) {
        self.imageName = imageName
    }
}

Create a ObservableObject to help update selected index.

class TabItems: ObservableObject {
    @Published var items: [TabItem] = [
        TabItem(imageName: "house", offset: -20),
        TabItem(imageName: "magnifyingglass"),
        TabItem(imageName: "plus.app"),
        TabItem(imageName: "heart"),
        TabItem(imageName: "person"),
    ]
    @Published var selectedTabIndex: CGFloat = 1
    func select(_ index: Int) {
        let tabItem = items[index]
        
        tabItem.opacity = 0
        tabItem.offset = 15
        
        withAnimation(Animation.easeInOut) {
            selectedTabIndex…