I always find myself googling how to customize the UITabBar appearance, because i always forget how to fiddle with the UITabBarAppearance class to achieve the non-transparent white background I prefer. While Apple advocates for a translucent UITabBar approach, I just find that traditional iOS 12 Opaque TabBar more fitting for my needs. So this article is for future Osas.
The Secret Sauce For Opaque Background
1
2
3
4
5
6
7
8
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.stackedLayoutAppearance.normal.iconColor = .gray
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.gray]
appearance.stackedLayoutAppearance.selected.iconColor = UIColor(Color.black)
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor(Color.black)]
UITabBar.appearance().standardAppearance = appearance
UITabBar.appearance().scrollEdgeAppearance = appearance
Here’s the usage:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import SwiftUI
struct MainTabView: View {
var body: some View {
TabView {
ScrollView {
ForEach(0..<12) { _ in
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(.red.opacity(0.5))
.frame(height: 120)
.padding(.horizontal)
}
}
.tabItem {
Label("First", systemImage: "1.circle")
}
ScrollView {
ForEach(0..<12) { _ in
RoundedRectangle(cornerRadius: 12, style: .continuous)
.fill(.green.opacity(0.5))
.frame(height: 120)
.padding(.horizontal)
}
}
.tabItem {
Label("Second", systemImage: "2.circle")
}
}
.onAppear {
let appearance = UITabBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.stackedLayoutAppearance.normal.iconColor = .gray
appearance.stackedLayoutAppearance.normal.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.gray]
appearance.stackedLayoutAppearance.selected.iconColor = UIColor(Color.black)
appearance.stackedLayoutAppearance.selected.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor(Color.black)]
UITabBar.appearance().standardAppearance = appearance
UITabBar.appearance().scrollEdgeAppearance = appearance
}
}
}
The code simply defines how the tab bar items will look in both normal and selected states, specifying their colors and text attributes. If you’re familiar with UIKit, it’s straightforward, but when in doubt you can always read up on apple’s UITabBarAppearance documentation.
You can apply this customization inside the onAppear or init block of your TabView’s struct. This will ensure the UITabBar has an opaque background and keeps the top separator line visible at all times thanks to the scrollEdgeAppearance customization.