Custom Tab Bar in iOS 18: 30 Days of Swift

This content originally appeared on HackerNoon and was authored by Vaibhav

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!

This content originally appeared on HackerNoon and was authored by Vaibhav

Print Share Comment Cite Upload Translate Updates

APA

Vaibhav | Sciencx (2024-10-19T16:00:19+00:00) Custom Tab Bar in iOS 18: 30 Days of Swift. Retrieved from https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/

MLA

" » Custom Tab Bar in iOS 18: 30 Days of Swift." Vaibhav | Sciencx - Saturday October 19, 2024, https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/

HARVARD

Vaibhav | Sciencx Saturday October 19, 2024 » Custom Tab Bar in iOS 18: 30 Days of Swift., viewed ,<https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/>

VANCOUVER

Vaibhav | Sciencx - » Custom Tab Bar in iOS 18: 30 Days of Swift. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/

CHICAGO

" » Custom Tab Bar in iOS 18: 30 Days of Swift." Vaibhav | Sciencx - Accessed . https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/

IEEE

" » Custom Tab Bar in iOS 18: 30 Days of Swift." Vaibhav | Sciencx [Online]. Available: https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/. [Accessed: ]

rf:citation

» Custom Tab Bar in iOS 18: 30 Days of Swift | Vaibhav | Sciencx | https://www.scien.cx/2024/10/19/custom-tab-bar-in-ios-18-30-days-of-swift/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Steps to Create a Custom Tab Bar:

Related Posts