Tab bars are created in SwiftUI using the TabView container view and consist of a variety of child views that represent the screens that the user will navigate through in the tab bar.
A tab bar allows people to navigate between different areas of an app, such as the Alarm, Stopwatch, and Timer tabs in the Clock app. If you need to provide controls that act on elements of the current view, use a tab bar.
Make sure the tab bar is visible when people navigate to different areas of your app.
By default, TabView presents a tab bar at the bottom of the layout that contains the tab elements used to navigate between child views.
A tab element is applied to each content view using a modifier and can be customized to contain text and image views (other view types do not support tab elements).
The currently selected tab can also be controlled programmatically by adding tags to the tab elements.
Putting tabs in a TabView is as easy as using:
TabView {
Text("Tab 1")
Text("Tab 2")
}Use tabItem(_:) to set a view as a tab bar item in TabView. I use Label as the content of a tab element that allows me to define the title and image.
So our code would look like this:
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label("Home", systemImage: "house")
}
Text("Search")
.tabItem {
Label("Sun", systemImage: "sun.max")
}
Text("Location")
.tabItem {
Label("Location", systemImage: "location")
}
Text("Settings")
.tabItem {
Label("Settings", systemImage: "gearshape")
}
}
}
}Our app would look like this:
TabView can show a maximum of 5 tab items, so if we put more than five items, we can change the last item to “More…”, selecting the “More…” tab will present a list of all the missing items.
Due to the limited space on an iPhone screen, a TabView can only display a maximum of 5 tabs simultaneously on an iPhone with iOS as the operating system and 7 tabs on an iPad with iPadOS as the operating system.
This is how our code would look with more than 5 tabs, I am going to create an app with 8 tabs.
This would be the source code:
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label("Home", systemImage: "house")
}
Text("Search")
.tabItem {
Label("Sun", systemImage: "sun.max")
}
Text("Notification")
.tabItem {
Label("Notification", systemImage: "bell")
}
Text("Notification")
.tabItem {
Label("Keyboard", systemImage: "keyboard")
}
Text("Printer")
.tabItem {
Label("Printer", systemImage: "printer")
}
Text("Display")
.tabItem {
Label("Display", systemImage: "display")
}
Text("Iphone")
.tabItem {
Label("Iphone", systemImage: "iphone")
}
}
}
}And this would be the result in XCode:
If we select an extra tab, our view will be a navigation stack.
Creating tabs is as easy as putting different views inside a TabView instance, but to add an image and text to each view’s tab bar item we need to use the tabItem() modifier
So a tabView is a special view that switches between multiple child views using Element UI.
These UI elements are the tabItem.
To create a tabbed UI, we need to place the views in a TabView and apply the top element modifier.
How to add a SwiftUIView in a tab bar in XCode
To work and have everything well organized, it is advisable to have the views separated in different files in order to work better.
What we are going to do next is add a view to our project in XCode.
In our project we use the right button to add a new file to our project and select New File.
Next we are going to select a SwiftUI View and click Next, as you can see in the image
Once selected, a window like the one in the image will open in which we have to put the name of our file, we will name it SettingsView.swift
Our files will look like this:
The SettingsView.swift file has the following swift code:
import SwiftUI
struct SettingsView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
}
}
#Preview {
SettingsView()
}So we are going to add this view in our ContenView.swift as follows:
SettingsView()Our ContentView.swift file will look like this:
struct ContentView: View {
var body: some View {
TabView {
Text("Home")
.tabItem {
Label("Home", systemImage: "house")
}
SettingsView()
.tabItem {
Label("Settings", systemImage: "gearshape")
}
Text("Notification")
.tabItem {
Label("Notification", systemImage: "bell")
}
Text("Notification")
.tabItem {
Label("Keyboard", systemImage: "keyboard")
}
Text("Printer")
.tabItem {
Label("Printer", systemImage: "printer")
}
Text("Display")
.tabItem {
Label("Display", systemImage: "display")
}
Text("Iphone")
.tabItem {
Label("Iphone", systemImage: "iphone")
}
}
}
}So the second tab of this tab bar (“Settings”) will target the SettingsView.swift file that we have added to our project in XCode, as you can see in the following image:
Summary of what you have learned
In this article you have learned:
-What is a tab bar
-To create a tab bar user interface, you just have to place the views in a TabView and apply the tabItem(_:) modifier to the content of each tab.
-Add views from a SwiftUI View file to a tab bar
Leave a Reply