How to build custom TabBar using SwiftUI?

Xode 12 — iOS 14

Prafulla Singh

--

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…

--

--