Tabs are one of the more common ways to separate pages or content on an iOS app. Pre-SwiftUI, tabs would be implemented using a UITabBarController.
In SwiftUI, tabs are implemented using TabView and corresponding tabItems.
struct ContentView: View {
var body: some View {
TabView {
TabContentView()
.tabItem {
Text("Tab 1")
}
TabContentView()
.tabItem {
Text("Tab 2")
}
}
}
}
struct TabContentView: View {
var body: some View {
Text("Hello World!")
}
}
![SwiftUI Tabs with text example](/static/a138d95a12165975ba1118a440f356b4/c5f2c/Screen%20Shot%202020-01-18%20at%204.39.22%20PM.png)
Tab Views require a view object (ex. TabContentView) and you can specify the tabItem inside the closure of that view object.
The tabItem requires a View, which is what will be used to show that specific tabBarItem UI. In the above example, it’s just a simple Text.
To get the traditional icon and text, you could do a ZStack of Image and Text like so:
.tabItem {
ZStack {
Image(systemName: "star.fill")
Text("Tab 1")
}
}
![SwiftUI Tabs with icon and text example](/static/96d1f7b6083ca1479181f4a4d41fff3d/4871b/Screen%20Shot%202020-01-18%20at%204.16.21%20PM-9394632.png)