Custom Top Tab Bar in IOS (Swift, SwiftUI)

Hi Guys, in this blog you can learn how to make a Custom Top Tab Bar in IOS by using Swift & SwiftUI. For better understanding please read the complete blog. Thanks :)

Step-1)

Create an XCode project with SwiftUI. Look at the following screenshot.

Step-2)

Now create two dummy view’s which we will show on every tab selection. Like here I am making “FirstView” & “SecondView”.

//First View

//Second View

These are just simple dummy views you can use your own views don’t worry.

Step-3)

Now create a TabBarButton.

In the TabBarButton, two properties passing into the button.

• text → Which will show as Tab Text into the Tab Bar
• isSelected → Passing isSelected @Binding var for swapping the border to the button at the bottom side & swapping the .fontWeight.

Here we are using the Text view and four modifiers are used onto the Text.

• .fontWeight → This is used for changing the font-weight of the Text
• .font → This is used for giving the Custom font and size to the Text
• .padding → This is used for giving the padding. Here we are giving the bottom padding.
• .border → This is a custom modifier. You can see this in Step-5.

Step-4)

Now create a custom tab bar view

In the CustomTopTabBar view, we are passing the @Binding var tabIndex. This tabIndex is just controlling which tab is selected. Here we are using our TabBarButton two times its means that we have two tabs or two tab items. By default, the tabIndex will be “0”. It means that the first tab item will be selected when the view appears or render the first time.

Here we have made a function which is called onButtonTapped. This function taking an integer parameter and passing it to the tabIndex. When the value of tabIndex is changed then it will pass through the TabBarButton by using .constant(tabIndex == 0) or .constant(tabIndex == 1). If the tabIndex is not equal to “0” then .constant(tabIndex == 0) function will return the false and then the “0” tabIndex will be unselected and if the tabIndex is equal to “1” then .constant(tabIndex == 1) function will return true, then “1” tabIndex will be selected. It means we just passing the boolean value into the isSelected property into the TabBarButton.

SAMSUNG Galaxy S21 Ultra 5G Factory Unlocked Android Cell Phone 128GB US Version Smartphone…

Step-5)

Now create an EdgeBorder view

EdgeBorder is a view that will use for giving the border to any view on a specific side. For using this view as a modifier, then we will write the View extension as you can see below.

Hope you understand. Thanks for reading this :) If you have any issues then comment below.

Complete Code:

Hope you understand, how to make a custom top tab bar. Thanks :) 😀If you have any issues then comment below.

Patreon

M.Abbas is creating IOS Developer | Patreon