< How to add bar items to a navigation view | How to create scrolling pages of content using tabViewStyle() > |
Updated for Xcode 12.5
SwiftUI’s TabView
provides an equivalent to UITabBarController
, allowing us to let the user switch between several active views using a bar at the bottom of the screen.
In its basic form, you should provide each item with an image and title, optionally also adding a tag if you want to control which tab is active programmatically. For example, this creates two views with different images, titles, and tags:
struct ContentView: View {
var body: some View {
TabView {
Text("First View")
.padding()
.tabItem {
Image(systemName: "1.circle")
Text("First")
}
.tag(1)
Text("Second View")
.padding()
.tabItem {
Image(systemName: "2.circle")
Text("Second")
}
.tag(2)
}
}
}
Rather than specifying text and image separately, you can also use a Label
view to combine them together:
struct ContentView: View {
var body: some View {
TabView {
Text("First View")
.padding()
.tabItem {
Label("First", systemImage: "1.circle")
}
.tag(1)
Text("Second View")
.padding()
.tabItem {
Label("Second", systemImage: "2.circle")
}
.tag(2)
}
}
}
If you add tags, you can programmatically control the active tab by modifying the tab view’s selection. In this example I’ve made the content of each tab a button that changes view, which is done by adding some new state to track which tab is active, then attaching that to the selection
value of the TabView
:
struct ContentView: View {
@State var selectedView = 1
var body: some View {
TabView(selection: $selectedView) {
Button("Show Second View") {
selectedView = 2
}
.padding()
.tabItem {
Label("First", systemImage: "1.circle")
}
.tag(1)
Button("Show First View") {
selectedView = 1
}
.padding()
.tabItem {
Label("Second", systemImage: "2.circle")
}
.tag(2)
}
}
}
The tags for your tabs can whatever you want, as long as the data type conforms to Hashable
. Integers might work well well, but if you’re going to do any meaningful programmatic navigation you should make sure you put the tags somewhere central such as a static property inside the view. This allows you to share the value in many places, reducing the risk of mistakes.
SPONSORED Check out Stream's cross-platform open source chat SDK on GitHub! Write once and deploy your app with fully featured chat UI on iOS and macOS.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.