Create Unique SwiftUI Tabbed Views With Better Design

SwiftUI has revolutionized the way developers create user interfaces on Apple platforms. Among its many powerful tools, TabView stands out as a flexible and customizable element for managing different views within an app.

Mastering the TabView is critical for creating engaging and user-friendly designs, from building a multi-tabbed app to experimenting with a custom tab bar.

This blog will explore advanced techniques and practical examples for customizing the TabView in SwiftUI.

What is a TabView in SwiftUI?

A TabView in SwiftUI is a container view that manages multiple tabs and allows seamless navigation between them. It acts as the backbone for building interfaces with tab bars, a familiar UI component widely used in iOS apps.

By using TabView, developers can group views inside separate tabs and allow users to switch between them. This approach improves usability and helps organize the app's content more efficiently.

Setting Up Your First TabView

To get started, let’s look at how to define a basic TabView in SwiftUI. Below is an example that demonstrates a two-tab setup:

1struct ContentView: View {
2    var body: some View {
3        TabView {
4            Text("Home Screen")
5                .tabItem {
6                    Image(systemName: "house")
7                    Text("Home")
8                }
9
10            Text("Settings Screen")
11                .tabItem {
12                    Image(systemName: "gear")
13                    Text("Settings")
14                }
15        }
16    }
17}

​

Key Components of the Code:

1. TabView: The container managing different tabs.

2. tabItem: Defines the icon and label for each tab.

3. Image and Text: Provide the visual and textual content for the tab bar.

By default, TabView uses the style provided by the platform, but you can apply further customization to match your app's design.

Adding Customization to the TabView

Customizing the tab bar is often necessary to align it with your app’s branding or user experience goals. Below are some techniques for creating a custom tab bar and enhancing its appearance:

1. Adding a Custom Background to the Tab Bar

By wrapping the TabView in a background modifier, you can change its appearance. Here's an example:

1struct CustomTabView: View {
2    var body: some View {
3        TabView {
4            Text("Dashboard")
5                .tabItem {
6                    Image(systemName: "chart.bar")
7                    Text("Dashboard")
8                }
9
10            Text("Profile")
11                .tabItem {
12                    Image(systemName: "person.circle")
13                    Text("Profile")
14                }
15        }
16        .background(Color(.systemGray6)) // Adding a background color
17    }
18}

​

2. Customizing the Tab Icons and Labels

Experiment with icons and labels to make the tab bar more visually appealing. The Label view simplifies this process.

1struct LabeledTabView: View {
2    var body: some View {
3        TabView {
4            Label("Home", systemImage: "house.fill")
5                .tabItem {
6                    Text("Home")
7                    Image(systemName: "house.fill")
8                }
9
10            Label("Account", systemImage: "person.fill")
11                .tabItem {
12                    Text("Account")
13                    Image(systemName: "person.fill")
14                }
15        }
16    }
17}

​

3. Highlighting the Selected Tab

The default style automatically indicates the selected tab, but you can enhance it further by using custom overlays or animations.

1struct HighlightedTabView: View {
2    @State private var selection = 0
3
4    var body: some View {
5        TabView(selection: $selection) {
6            Text("Home View")
7                .tabItem {
8                    Image(systemName: "house")
9                    Text("Home")
10                }
11                .tag(0)
12
13            Text("Search View")
14                .tabItem {
15                    Image(systemName: "magnifyingglass")
16                    Text("Search")
17                }
18                .tag(1)
19        }
20        .accentColor(selection == 0 ? .blue : .green) // Dynamic color for selected tab
21    }
22}

​

Advanced Techniques with TabView

1. Adding More Tabs Dynamically

For apps that require flexibility, you can use a loop to add tabs dynamically:

1struct DynamicTabView: View {
2    let tabData = ["Home", "Search", "Settings"]
3
4    var body: some View {
5        TabView {
6            ForEach(0..<tabData.count, id: \.self) { index in
7                Text("\(tabData[index]) Page")
8                    .tabItem {
9                        Image(systemName: "circle.fill") // index based dynamic image can be passed here.
10                        Text(tabData[index])
11                    }
12            }
13        }
14    }
15}

​

2. Using Custom Styles with Enum

For finer control, enums can be used to define and manage different tabs:

1enum Tab {
2    case home, account, settings
3}
4
5struct EnumTabView: View {
6    @State private var selectedTab: Tab = .home
7
8    var body: some View {
9        TabView(selection: $selectedTab) {
10            Text("Home View")
11                .tabItem {
12                    Image(systemName: "house.fill")
13                    Text("Home")
14                }
15                .tag(Tab.home)
16
17            Text("Account View")
18                .tabItem {
19                    Image(systemName: "person.fill")
20                    Text("Account")
21                }
22                .tag(Tab.account)
23
24            Text("Settings View")
25                .tabItem {
26                    Image(systemName: "gear")
27                    Text("Settings")
28                }
29                .tag(Tab.settings)
30        }
31    }
32}

​

Enhancing User Experience with Custom Tab Bars

To create a custom tab bar, you can replace the default TabView with a stack and implement custom behavior.

1struct CustomTabBarView: View {
2    @State private var selectedTab = 0
3
4    var body: some View {
5        VStack {
6            Spacer()
7
8            // Content changes based on selected tab
9            if selectedTab == 0 {
10                Text("Home Screen")
11            } else if selectedTab == 1 {
12                Text("Search Screen")
13            } else {
14                Text("Profile Screen")
15            }
16
17            Spacer()
18
19            // Custom tab bar
20            HStack {
21                Button(action: { selectedTab = 0 }) {
22                    VStack {
23                        Image(systemName: "house")
24                        Text("Home")
25                    }
26                }
27                Spacer()
28
29                Button(action: { selectedTab = 1 }) {
30                    VStack {
31                        Image(systemName: "magnifyingglass")
32                        Text("Search")
33                    }
34                }
35                Spacer()
36
37                Button(action: { selectedTab = 2 }) {
38                    VStack {
39                        Image(systemName: "person")
40                        Text("Profile")
41                    }
42                }
43            }
44            .padding()
45            .background(Color(.systemGray5))
46        }
47    }
48}

​

Optimizing for Accessibility and Performance

• Visibility: Ensure that the tab bar has sufficient contrast.

• Customization: Use modifiers to improve the user experience.

• Scroll Support: Add scroll functionality for apps with many tabs.

• Performance: Keep data and views inside lightweight for smoother navigation.

The Bottom Line!

Mastering TabView in SwiftUI empowers developers to design intuitive and visually appealing tab bars. By incorporating customization, dynamic content, and advanced techniques like enums, developers can create value-driven user experiences that resonate with their audience. With the flexibility and power SwiftUI offers, managing two tabs or adding more tabs becomes seamless, enabling developers to bring their app's design to life.

Experiment with the examples above and let these techniques inspire your next SwiftUI TabView masterpiece!

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.