Custom Tab Bar in SwiftUI
Hi Guys! in this blog you will learn how to customize the IOS Tab Bar in SwiftUI. Follow along with the blog and learn how to do it.
First, create a brand new XCode project by selecting the SwiftUI instead of Storyboard and changing the name of ContentView to MainTabbedView.
Step-1
Create simple Home, Favorite, Chat, and Profile Views with simple text.
Added four Icons to the Assets
Step-2
Now, create an enum of TabbedItems and extend it with Int and CaseIterable. Declare the items like home, favorite, chat, and profile. Create a computed title variable with will compute the title for the tabbed item and also create an iconName computed variable with will give us an icon name of the tabbed item.
This enum will use to iterate over tabbed items in the next steps.
(Extend with Int) means all cases have integer values
(Extens with CaseIterable) means you need to iterate over enum cases
(case home = 0) means start index from zero.
Step-3
Now create selectedTab @State var in MainTabbedView and then create a ZStack with alignment .bottom.
Inside that ZStack first, create the TabView and bind its selection with the selectedTab var. inside that TabView initialize those HomeView, FavoriteView, ChatView, and ProfileView with the tag modifier with unique values.
Tag modifier identifies those views with its unique value, like when selectedTab value is 0 then HomeView will show, if selectedTab value will be 1 then FavoriteView will show.
Step-4
After that create an extension of MainTabbedView and then create a function that will get the parameters imageName, title, isActive and will return the some View. “title” will be the title of the Item , “imageName” is the icon of the Item and “isActive” will tell us that current item is selected or not.
Last Step-5
Now, create a ZStack under the TabView and give the frame, background, cornerRadius, and padding like below, and inside that ZStack create an HStack and give it a passing 6 from all sides.
Inside that HStack iterate over TabbedItems with its allCases and create a Button inside it and the button label will be our CustomTabItem. Pass the item values into the CustomTabItem. On button tap, pass the item.rawValue to selectedTab.
We know that TabbedItems enum is extended with Int which mean TabbedItems has integer values that started with zero as you can see we initialize the home with a 0 value like (case home = 0).
After that run the code, and you will see the custom Tab Bar like below.
