TabView in SwiftUI

Use UIKit Appearance APIs To customize TabView in SwiftUI

Photo by That's Her Business on Unsplash

I was working on an assignment that required me to use SwiftUI’s APIs in conjunction with my TabView customization. I therefore considered recording it in order to provide assistance to anyone trying something similar. Let’s begin 🚀

However, at this time, SwiftUI does not include those modifiers that we can use to directly alter the TabView’s design. However, there are a few methods (using UIKit APIs) by which we may accomplish the same thing. To do this, we’ll utilize an example app.

The code displayed here was tested with Xcode 15.2 on deployment target 16.0.

Therefore, a bottom bar can be created with the TabView that SwiftUI provides. The sample code that we used to create TabView is shown below. Therefore, TabView from SwiftUI is being used here.

TabView(selection: $selectedIndex) {
            NavigationStack() {
                Text("Home View")
                    .navigationTitle("Home")
            }
            .tabItem {
                Text("Home view")
                Image(systemName: "house.fill")
                    .renderingMode(.template)
            }
            .tag(0)
            
            NavigationStack() {
                Text("Profile view")
                    .navigationTitle("Profile")
            }
            .tabItem {
                Label("Profile", systemImage: "person.fill")
            }
            .tag(1)
            
            NavigationStack() {
                Text("About view")
                    .navigationTitle("About")
                
            }
            .tabItem {
                Text("About view")
                Image(systemName: "info.circle")

            }
            .badge("12")
            .tag(2)
        
}

Therefore, the code above will generate a TabView with three child tabs (TabItems), and one of those TabItems will also include a badge to indicate a notification or other critical information on that view. And the tab bar that was formed appears below one.

SwiftUI’s TabView

Similar to the prior UIKit TabBar, the selected tab item will be blue by default, while the unselected tab item will be gray. Additionally, in UIKit, the entire tab bar had a background by default.

However, if you wish to change the color to match the theme of your app, for instance, the selected tab might be any other color besides blue, and the unselected tab could also be a different color. It’s possible for Badge View to have a color other than the conventional red, which may be per your app’s theme.

As a result, we may utilize the UIKit appearance API for TabView, and it will function in the same way as before, but now you can input colors per your app’s theme. Let’s look at the code below now.

struct ContentView: View {
    @State private var selectedIndex: Int = 0

    var body: some View {
        TabView(selection: $selectedIndex) {
            NavigationStack() {
                Text("Home View")
                    .navigationTitle("Home")
            }
            .tabItem {
                Text("Home view")
                Image(systemName: "house.fill")
                    .renderingMode(.template)
            }
            .tag(0)
            
            NavigationStack() {
                Text("Profile view")
                    .navigationTitle("Profile")
            }
            .tabItem {
                Label("Profile", systemImage: "person.fill")
            }
            .tag(1)
            
            NavigationStack() {
                Text("About view")
                    .navigationTitle("About")
                
            }
            .tabItem {
                Text("About view")
                Image(systemName: "info.circle")
            }
            .badge("12")
            .tag(2)
        }
        //1
        .tint(.pink)
        .onAppear(perform: {
            //2
            UITabBar.appearance().unselectedItemTintColor = .systemBrown
            //3
            UITabBarItem.appearance().badgeColor = .systemPink
            //4
            UITabBar.appearance().backgroundColor = .systemGray4.withAlphaComponent(0.4)
            //5
            UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.systemPink]
            //UITabBar.appearance().scrollEdgeAppearance = UITabBarAppearance()
            //Above API will kind of override other behaviour and bring the default UI for TabView
        })
    }
}

Now let’s examine the code below.

1. Color will be applied to TabItems, including Text and images
2. UnselectedItemTintColor from the UITabBar appearance API will apply the unselected color to both the text and the icon.
3. Will change the badgeColor
4. Display a Background in the TabView This can also be done with Toolbar APIs

When we use scrollEdgeAppearance to set the background of a TabView, all other values from appearance APIs will not work. Therefore, we can easily design our TabView without this api and only using the other one which i have shown above.

Here is the result.

Sample TabView from code above.

If you want to change the default tabview’s color and appearance for your application per your app’s theme, here’s how to do it.

And that’s it. Thank you for reading my post. I really appreciate your time. If you think it’s helpful, please clap or comment. And in the following one, I see you. 🙌