> For the complete documentation index, see [llms.txt](https://ivansaul.gitbook.io/swiftui-cookbook/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ivansaul.gitbook.io/swiftui-cookbook/swiftui/readme/create-a-tab-bar-with-tabview-in-swiftui.md).
# Create a Tab Bar with TabView in SwiftUI
In SwiftUI, `TabView` is a powerful and flexible component that allows you to easily create a tab bar for navigating between multiple views. In this tutorial, we will explore how to use `TabView` to create a modern and fluid user experience.
## Basic `TabView` Example
To start, let's look at a basic example of how to create a `TabView`.
```swift
TabView {
Text("Tab 1")
Text("Tab 2")
}
```
In this example, we are simply adding two text views as tabs. Each view will become a tab within the `TabView`.
## Adding Tabs to the Tab Bar
To add visual elements and labels to the tabs, we use the `tabItem` modifier.
```swift
TabView {
Text("Home Tab")
.tabItem {
Image(systemName: "house")
Text("Home")
}
Text("Settings Tab")
.tabItem {
Image(systemName: "gear")
Text("Settings")
}
}
```
In this case, each tab includes an icon and text that will appear in the tab bar. This makes the tabs more intuitive and easier to navigate.
Adding Tabs to Tab Bar
## Changing the Tab Bar Appearance
We can further customize the appearance of the tab bar using the `tint` modifier.
```swift
TabView {
Text("Home Tab")
.tabItem {
Image(systemName: "house")
Text("Home")
}
Text("Settings Tab")
.tabItem {
Image(systemName: "gear")
Text("Settings")
}
}
.tint(.orange)
```
The `.tint(.orange)` modifier changes the color of the currently selected tab item. To modify the background color of the tab bar, we need to use `UITabBar.appearance()`.
```swift
struct TabViewSwiftUI: View {
init() {
UITabBar.appearance().backgroundColor = UIColor.lightGray
}
var body: some View {
TabView {
Text("Home Tab")
.tabItem {
Image(systemName: "house")
Text("Home")
}
Text("Settings Tab")
.tabItem {
Image(systemName: "gear")
Text("Settings")
}
}
}
}
```
In the example above, we change the background color of the tab bar to blue using `UITabBar.appearance().backgroundColor`.
Change Tab Bar Appearance
### Navigating Between Tabs Programmatically
To change the selected tab, we need to set which one is displayed initially, we use the `tag` modifier and the `selection` binding.
```swift
struct TabViewSwiftUI: View {
@State var selectedTab: Int = 1
var body: some View {
TabView(selection: $selectedTab) {
Text("Home Tab")
.tabItem {
Image(systemName: "house")
Text("Home")
}
.tag(0)
VStack {
Text("Messages Tab")
Button("Go Home") {
selectedTab = 0
}
.buttonStyle(.bordered)
}
.tabItem {
Image(systemName: "message.badge")
Text("Messages")
}
.tag(1)
Text("Settings Tab")
.tabItem {
Image(systemName: "gear")
Text("Settings")
}
.tag(2)
}
}
}
```
In this example, the tab with `tag(1)` will be displayed initially thanks to the `selectedTab` state binding. Additionally, we are using a `Button` to change the tab when the user taps on it.
Navigating Between Tabs
## Changing the Tab Bar Style
We can use the `tabViewStyle` modifier to apply a different style to the tab bar.
```swift
struct TabViewSwiftUI: View {
var body: some View {
TabView {
Color.red
.ignoresSafeArea()
Color.green
.ignoresSafeArea()
Color.blue
.ignoresSafeArea()
}
.ignoresSafeArea()
.tabViewStyle(PageTabViewStyle())
}
}
```
In this example, we are using `PageTabViewStyle()` to create a tab bar that behaves like a page that can be swiped.
