how to create a SwiftUI Tabview : and Customize the Tab Bar

Codeplayon3 months agoFebruary 7, 2024SwiftUI Tabview swiftui tabview background color

SwiftUI TabView is an essential element in many iOS applications, providing easy navigation for users via tab bar options on the bottom.

I’ve explored SwiftUI presentation and navigation through modals, sheets popovers, alerts, sheets to better navigation with NavigationView. If you want a comprehensive overview of these subjects I suggest taking a look of SwiftUI Presentations and Navigation as well as Improved Navigation using Navigation Stack in SwiftUI using Navigation Stack.

Through this topic, you’ll gain an understanding of swiftUI TabView. Learn its capabilities as you use and modify it yourself, then customize its components. When looking closely at its basic components, its flexibility becomes apparent as does its interplay with SwiftUI’s expressive syntax.

SwiftUI TabView Basics Example

Table of Contents

For starters we’ll create a tabView using SwiftUI. It’s easy and requires an TabView block, which has embedded View elements. Each element is the tab. This is a quick and easy way to initialize:

This is the TabView that has two tabs each with the Text view. I also added tab items with an icon and a text.

struct ContentView: View {

    var body: some View {

        TabView {
            Text("Home")
                .tabItem {
                    Label("Home",
                          systemImage: "homekit")
                }

            Text("Profile")
                    .tabItem {
                        Label("Profile",
                              systemImage: "person")
                    }
            }
        }
    }
}

How to Add Tabs to a TabView in SwiftUI

To add more tabs, it’s similar to adding more view blocks. Each block in tab view TabView is a tab. The order in which the blocks are placed determines the order in which tabs are displayed. tabs.

struct ContentView: View {

    var body: some View {

        TabView {
            NavigationStack {
                OverviewView()
                    .navigationTitle("Home")
            }
            .tabItem {
                Label("Tab 1", systemImage: "1.circle")
            }

            Text("Second View")
            .tabItem {
                Label("Tab 2", systemImage: "2.circle")
            }

            Text("Third View")
                .tabItem {
                    Label("Tab 3", systemImage: "3.circle")
                }

            Text("Forth View")
                .tabItem {
                    Label("Tab 4", systemImage: "4.circle")
                }

            Text("Fixed View")
                .tabItem {
                    Label("Tab 5", systemImage: "5.circle")
                }

            Text("Fixed View")
                .tabItem {
                    Label("Tab 6", systemImage: "6.circle")
                }

            ProfileView()
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
        }
    }

}

Tab 1 on this instance displays the NavigationStack with a custom OverviewView, while Tabs 2 to 6 contain text views that are simple, while Tab 7 holds an additional custom View ProfileView. On iPhone devices due to space limitations only five tabs could be shown at once; an “extra” tab was introduced so subsequent tabs could also be shown; with iPad tablets however having more space all tabs were shown and automatically adjusted if compact mode mode became necessary.

How to add icons in SwiftUI TabView?

You can alter the icon and the text to be displayed on each tab using the modifier for tab items:

Text("Second View")
.tabItem {
   Label("Tab 2", systemImage: "2.circle")
}

In the example above I’m making use of Label However, you can also choose an text view or an Images view. Other view types cannot be used and are simply left out. Here are a few more examples:

How to change swiftui tabview background color

As of iOS 16 and macOS 13 you can now change directly the color of the swiftui tabview background color . Here’s an example of how:

.toolbarBackground(.indigo, for: .tabBar)

It is using the Toolbar Background modifier to change the tab bar’s background colour to be indigo.

If the contents of the tab view is not able to completely fill the entire area the background of the tab bar isn’t displayed. In my case the settings tab will not display the background indigo. To ensure that the background is always visible, the background, I do this:

.toolbarBackground(.visible, for: .tabBar)

Indigo is an intense shade and the contrast is poor to the blue and grey colors (defined as accent colors). I’m setting the background color to a dark scheme, which then makes use of white for tab items:

.toolbarColorScheme(.dark, for: .tabBar)

In the example above, I did not just use to use the ToolbarBackgroundmodifier to alter the tab bar, but it also changed the menu bar. This is compatible with the latest versions of navigation using the NavigationStack.

Tabview swiftui Example Full source code.

import SwiftUI

struct HomeScreenView: View {

    var body: some View {
        TabView {
            Group {
                NavigationStack {
                    OverviewView()
                        .navigationTitle("Home view")
                        .toolbarBackground(.yellow,
                                           for: .navigationBar)
                        .toolbarBackground(.visible,
                                           for: .navigationBar)
                }

                .tabItem {
                    Label("Overview", systemImage: "square.grid.2x2")
                }

                ExploreView()
                    .tabItem {
                        Label("Explore", systemImage: "safari")
                    }

                MetabView()
                    .tabItem {
                        Label("Me", systemImage: "person")
                    }
            }
            .toolbarBackground(.indigo, for: .tabBar)
            .toolbarBackground(.visible, for: .tabBar)
            .toolbarColorScheme(.dark, for: .tabBar)
        }
    }
}

struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeScreenView()
    }
}

Read More Tutorial

Tags :SwiftUI Tabview swiftui tabview background color

add a comment