Custom Tab Bar in iOS 18: 30 Days of Swift

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!