article

Thursday, November 11, 2021

SwiftUI Customization TabView with Tab Bar

SwiftUI Customization TabView with Tab Bar

ContentView.swift
 
//
//  ContentView.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    @State private var selection = 0
    
    var body: some View {
        ZStack(alignment: .topTrailing) {
            NavigationView {
                TabView(selection: $selection) {
                    
                    Home()
                        .tabItem {
                            Image(systemName: "house.fill")
                            Text("Home")
                        }
                        .tag(0)
                 
                    Text("Bookmark Tab")
                        .font(.system(size: 30, weight: .bold, design: .rounded))
                        .tabItem {
                            Image(systemName: "bookmark.circle.fill")
                            Text("Bookmark")
                        }
                        .tag(1)
                 
                    Text("Video Tab")
                        .font(.system(size: 30, weight: .bold, design: .rounded))
                        .tabItem {
                            Image(systemName: "video.circle.fill")
                            Text("Video")
                        }
                        .tag(2)
                 
                    Text("Profile Tab")
                        .font(.system(size: 30, weight: .bold, design: .rounded))
                        .tabItem {
                            Image(systemName: "person.crop.circle")
                            Text("Profile")
                        }
                        .tag(3)
                } //end tabview
                .onAppear() {
                    UITabBar.appearance().barTintColor = .white
                }
                .accentColor(.orange) //Tab Bar Color
                
                
                .navigationTitle("TabView Demo")
                .navigationBarItems(leading:
                    HStack {
                         Button(action: {
                             selection = (selection + 1) % 4
                         }) {
                             Text("Next")
                                 .font(.system(.headline, design: .rounded))
                                 .padding()
                                 .foregroundColor(.white)
                                 .background(Color.green)
                                 .cornerRadius(10.0)
                                 .padding()
                         }
                    }
                )
            }// end NavigationView
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Home.swift
 
//
//  Home.swift
//  Swiftuitest
//
//  Created by Cairocoders
//

import SwiftUI

struct Home: View {
    var body: some View {
        List(1...50, id: \.self) { index in
            NavigationLink(
                destination: Text("Item #\(index) Details"),
                label: {
                    Text("Item #\(index)")
                        .font(.system(size: 20, weight: .bold, design: .rounded))
                })
 
        }
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

Related Post