Rounded corners for Tab bar in swiftUI?

Question

I'm trying to give my Tab bar some rounded corners and this is proving to be a difficult job in SwiftUI.

I create the Tab Bar like this:

var body: some View {

TabView {
        homeView()
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "house.fill")
                Text("Home")
            }
     
        Text("Bookmark Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "bookmark.circle.fill")
                Text("Bookmark")
            }
     
        Text("Video Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "video.circle.fill")
                Text("Video")
            }
     
        Text("Profile Tab")
            .font(.system(size: 30, weight: .bold, design: .rounded))
            .tabItem {
                Image(systemName: "person.crop.circle")
                Text("Profile")
            }
    }.edgesIgnoringSafeArea(.top)

}

I've done a lot of searching and I found a lot of answers/solutions for UIKit but nothing worthy for SwiftUI.

Although, I found a couple of solutions for SwiftUI but they seem to be creating "custom" tab bars which seems to be an overkill and comes across as reinventing the wheel!

Is there any way to do this in SwiftUI without re-inveting the wheel like creating the whole tabbar from scratch?

EDIT:

user_13125522 · Answer

Firstly: I created TabBarView.swift file. Code:

import SwiftUI

struct TabBarView: View {
    
    @State var selectedTab = "Yeni Mesajlar"
    @Binding var pages: [TabBarPage]
    init(pages: Binding<[TabBarPage]>) {
        UITabBar.appearance().isHidden = true
        self._pages = pages
    }
    var body: some View {
        ZStack(alignment: .bottom) {
            
            TabView(selection: $selectedTab) {
                
                ForEach(pages) { item in
                    AnyView(_fromValue: item.page)
                        
                        .tabItem{
                            EmptyView()
                        }.tag(item.tag)
                }
            }
            
            HStack {
                ForEach(pages) { item in
                    Button(action: {
                        self.selectedTab = item.tag
                    }) {
                        ZStack {

                            
                            Image(systemName: item.icon)
                                .foregroundColor(item.color)
                                .imageScale(.large)
                                .padding(7)
                                .background(self.selectedTab == item.tag ? Color.gray : item.color )
                                .mask(Circle())
                        }
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .padding(5)
            .background(Color.orange)
            .cornerRadius(15)
            .padding()
        }
        
        
    }
}

struct TabBarView_Previews: PreviewProvider {
    static var previews: some View {
        TabBarView(pages: .constant([TabBarPage(page: HomeView(), icon: "arrow.up.message.fill", tag: "Yeni Mesajlar", color: .green),
                                     TabBarPage(page: DetailView(), icon: "message.fill", tag: "Mesajlar", color: .yellow),
                                     TabBarPage(page: ProfileView(), icon: "person.crop.circle.fill", tag: "Profil", color: .blue)]))
    }
}

struct TabBarPage: Identifiable {
    var id = UUID()
    var page: Any
    var icon: String
    var tag: String
    var color: Color
}

Then:

I add the TabView I created to the ContentView. Code:

struct ContentView: View {
    @State var tabBarPages: [TabBarPage] = [TabBarPage(page: NewMessageView(), icon: "arrow.up.message.fill", tag: "Yeni Mesajlar", color: .green),
                                            TabBarPage(page: MessageView(), icon: "message.fill", tag: "Mesajlar", color: .yellow),
                                            TabBarPage(page: ProfileView(), icon: "person.crop.circle.fill", tag: "Profil", color: .blue)]
    var body: some View {
        TabBarView(pages: $tabBarPages)
    }
}

Rounded corners for Tab bar in swiftUI?

1 Answers