Member-only story

TabView in SwiftUI

Learn how to create TabView in SwiftUI using Toggle View

ML Musings
2 min readFeb 17, 2023
Photo by Firmbee.com on Unsplash

The TabView in SwiftUI is a powerful and flexible UI component that allows you to create a tab bar interface. The tab bar interface is a popular user interface pattern used in mobile apps and desktop applications.

Let’s look in-depth at how to use TabView in SwiftUI.

Creating a Basic TabView

To create a basic TabView, you can use the TabView initializer and specify the number of tabs and their content. Here is an example:

struct ContentView: View {
var body: some View {
TabView {
Text("First View")
.tabItem {
Label("First", systemImage: "1.circle")
}
Text("Second View")
.tabItem {
Label("Second", systemImage: "2.circle")
}
}
}
}

In the above code, we have created a TabView with two tabs, each containing a simple text view. We have also used the tabItem modifier to add a label and an icon to each tab.

Customizing the TabView Appearance

You can customize the appearance of the TabView by changing the style and position of the tab bar. SwiftUI provides two…

--

--

ML Musings
ML Musings

Written by ML Musings

✨ I enjoy pushing the boundaries of JS, Python, SwiftUI and AI. You can support my work through coffee - www.buymeacoffee.com/MLMusings

No responses yet