Day 8: Level Up with a Custom Tab Bar!
In the eighth post of the #30DaysOfSwift series, let’s make a Custom Tab Bar with animations and icons.
Standard tab bars are fine, but a custom one adds that extra touch!
Here’s how to implement a custom tab bar with SwiftUI:
Steps to Create a Custom Tab Bar:
1. Set Up the Tab Bar Structure:
import SwiftUI
struct CustomTabBarView: View {
@State private var selectedTab = 0
let tabBarItems = [“house.fill”, “magnifyingglass”, “person.fill”]
var body: some View {
VStack {
Spacer()
// Main Content
TabView(selection: $selectedTab) {
HomeView().tag(0)
SearchView().tag(1)
ProfileView().tag(2)
}
// Custom Tab Bar
HStack {
ForEach(0..<tabBarItems.count, id: .self) { index in
Spacer()
Button(action: {
withAnimation(.spring()) {
selectedTab = index
}
}) {
VStack {
Image(systemName: tabBarItems[index])
.font(.system(size: 24))
.foregroundColor(selectedTab == index ? .blue : .gray)
.scaleEffect(selectedTab == index ? 1.2 : 1.0) // Add animation for scaling
Text(tabName(for: index))
.font(.caption)
.foregroundColor(selectedTab == index ? .blue : .gray)
}
.padding(.vertical, 10)
}
Spacer()
}
}
.padding(.bottom, 20)
.background(Color.white.shadow(radius: 10))
}
}
func tabName(for index: Int) -> String {
switch index {
case 0: return “Home”
case 1: return “Search”
case 2: return “Profile”
default: return “”
}
}
}
struct HomeView: View {
var body: some View {
Text(“Home Screen”)
.font(.largeTitle)
.foregroundColor(.blue)
}
}
struct SearchView: View {
var body: some View {
Text(“Search Screen”)
.font(.largeTitle)
.foregroundColor(.green)
}
}
struct ProfileView: View {
var body: some View {
Text(“Profile Screen”)
.font(.largeTitle)
.foregroundColor(.purple)
}
}
Happy Coding!