Working with the Tab View in SwiftUI

In this SwiftUI tutorial, we will learn how to create a tab bar interface using TabView in Xcode 13. A view that switches between multiple child views using interactive user interface elements.

Create a TabView user interface-

To create a user interface with tabs, place views in a `TabView` and apply

the View/tabItem(_:) modifier to the contents of each tab. On iOS, you

can also use one of the badge modifiers, like View/badge(_:) to assign a badge to each of the tabs. The following creates a tab view with

three tabs, the first of which has a badge:

To display more tabs, you just need to add the child views inside the TabView like this:

struct ContentView: View {
    
    var body: some View {
        
        NavigationView {
            TabView {
                
                Text("Home Tab")
                    .badge(10)
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("First")
                    }
                Text("Another Tab")
                    .tabItem {
                        Image(systemName: "star.fill")
                        Text("Second")
                    }
                FirstView()
                    .tabItem {
                        Image(systemName: "person.crop.circle")
                        Text("Third")
                    }
            }.font(.headline)
                .accentColor(.red)
        }
    }
}




struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

Create a Child View as below code-

struct FirstView: View {
    var body: some View {
            List(1...60, id: \.self) { index in
                NavigationLink(
                    destination: Text("Item #\(index) Details"),
                    label: {
                        Text("AppCodeZip@\(index)")
                            .font(.system(size: 20, weight: .bold, design: .rounded))
                    })
            }.navigationBarTitle("AppCodeZip", displayMode: .inline)
        }
}

Thanks for reading!!

Similar solutions you may also like...

• How to remove duplicate elements from an array with Swift 5
• How to store Model Class data in User Defaults in Swift?
• Adding a Custom Font to Your IOS App
• How to big numbers YAxis format values convert to Indian Numbering Format like k(thousand), L(lakh), Cr(crore), Ar(Arab) and etc.on iOS barchart Swift
• Convert number to indian rupee format in Swift 5 iOS
• How to display native iOS activity indicator in xcode Swift 5
• How to Programmatically Create an Excel Spreadsheet View iOS Swift