How to Build A SwiftUI Custom Tab Bar For Your App

Want to make your SwiftUI app stand out?

Customizing the Tab Bar can take your app’s navigation to the next level and provide a more engaging user experience.

In this blog, we’ll walk you through how to build a custom tab bar from scratch, giving you the freedom to create a unique navigation system tailored to your app. By the end, you’ll know exactly how to craft a visually striking and user-friendly tab bar using SwiftUI.

What is a Tab Bar in SwiftUI?

In SwiftUI, a tab bar is typically used in conjunction with the Tab View, allowing users to navigate between different sections of an app. Each section corresponds to a tab item, represented by an icon and/or title. While SwiftUI’s Tab View provides a straightforward solution for creating tabs, a custom tab bar enables developers to have greater control over styling and animations.

Why Use a Custom Tab Bar?

A custom tab bar is often necessary when the default options provided by SwiftUI’s Tab View don’t align with an app's design requirements. By customizing the tab bar, you can:

1. Modify its background to match your app’s aesthetic.

2. Use custom icons for each tab item.

3. Add advanced animations for an animated tab bar experience.

4. Hide or show the tab bar dynamically based on user actions.

Steps to Create a Custom Tab Bar in SwiftUI

1. Setting Up the Project

Begin by creating a new SwiftUI project in Xcode. Ensure that your app has a basic layout with different views that will serve as the content for each tab.

2. Building a Tab View with Custom Tab Bar

In this example, we’ll create a custom tab bar with three tab items:

1. Home

2. Search

3. Profile

Here’s the code to get started:

1import SwiftUI
2
3struct CustomTabBarView: View {
4    @State private var selectedIndex: Int = 0
5    let tabItems: [TabItem] = [
6        TabItem(title: "Home", image: "house", tag: 0),
7        TabItem(title: "Search", image: "magnifyingglass", tag: 1),
8        TabItem(title: "Profile", image: "person", tag: 2)
9    ]
10
11    var body: some View {
12        VStack {
13            // Tab Content
14            ZStack {
15                switch selectedIndex {
16                case 0:
17                    Text("Home Screen")
18                        .font(.largeTitle)
19                        .frame(maxWidth: .infinity, maxHeight: .infinity)
20                        .background(Color.blue.opacity(0.1))
21                case 1:
22                    Text("Search Screen")
23                        .font(.largeTitle)
24                        .frame(maxWidth: .infinity, maxHeight: .infinity)
25                        .background(Color.green.opacity(0.1))
26                case 2:
27                    Text("Profile Screen")
28                        .font(.largeTitle)
29                        .frame(maxWidth: .infinity, maxHeight: .infinity)
30                        .background(Color.orange.opacity(0.1))
31                default:
32                    EmptyView()
33                }
34            }
35
36            // Custom Tab Bar
37            HStack {
38                ForEach(tabItems, id: \.tag) { item in
39                    Button(action: {
40                        withAnimation {
41                            selectedIndex = item.tag
42                        }
43                    }) {
44                        VStack {
45                            Image(systemName: item.image)
46                                .resizable()
47                                .frame(width: 24, height: 24)
48                            Text(item.title)
49                                .font(.caption)
50                        }
51                        .padding(.vertical, 10)
52                        .frame(maxWidth: .infinity)
53                    }
54                }
55            }
56            .padding(.horizontal)
57            .background(Color.white)
58            .cornerRadius(15)
59            .shadow(color: .gray.opacity(0.3), radius: 10, x: 0, y: -5)
60        }
61    }
62}
63
64struct TabItem {
65    let title: String
66    let image: String
67    let tag: Int
68}
69
70struct CustomTabBarView_Previews: PreviewProvider {
71    static var previews: some View {
72        CustomTabBarView()
73    }
74}

​

3. Customizing the Tab Bar Appearance

The code above sets up a basic custom tab bar. To further customize it:

• Change the Background: Modify the background of the tab bar using colors, gradients, or images.

• Add Animations: For an animated tab bar, wrap state changes in withAnimation blocks.

• Custom Icons: Replace Image(systemName:) with your custom icon assets.

Example: Adding a Gradient Background

1.background(
2    LinearGradient(gradient: Gradient(colors: [Color.blue, Color.purple]),
3                   startPoint: .leading,
4                   endPoint: .trailing)
5)

​

4. Handling Dynamic Visibility

To hide the tab bar on specific screens, use a @State property to track visibility:

1@State private var isTabBarVisible: Bool = true

​

Wrap the HStack containing the custom tab in a Group that checks for visibility:

1if isTabBarVisible {
2    HStack { /* Tab Bar Code */ }
3}

​

5. Using Extensions to Simplify Code

To avoid clutter in your main file, create an extension for styling common components like tab items:

1extension View {
2    func tabItemStyle(selected: Bool) -> some View {
3        self.padding()
4            .foregroundColor(selected ? Color.blue : Color.gray)
5            .scaleEffect(selected ? 1.2 : 1.0)
6    }
7}

​

Additional Features to Consider

Highlight the Third Tab

Highlighting the third tab can improve user navigation. Add a circle or badge:

1if item.tag == 2 {
2    Circle()
3        .fill(Color.red)
4        .frame(width: 8, height: 8)
5        .offset(x: 10, y: -10)
6}

​

Add Custom Animations

To create an animated tab bar, add transitions between tab items:

1.withAnimation(.easeInOut(duration: 0.3)) {
2    selectedIndex = item.tag
3}

​

The Bottom Line!

Creating a SwiftUI custom tab bar empowers you to go beyond the default design of a Tab View. By leveraging state, custom styling, and code extensions, you can design a navigation system tailored to your app's needs. This blog has outlined steps to build, style, and even animate a custom tab bar, giving you full control over the user experience. Start experimenting with your next SwiftUI project!

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.