Geek Culture
Published in

Geek Culture

Customize Tabbar in Swift IOS

Hi Guys, In this blog you will learn how to customize the IOS native TabBar. Follow along the blog…

Create the brand new XCode project with Storyboard.

After that open the open the storyboard and search for Tab Bar Controller.

Drag the Tab Bar Controller and drop it on to the storyboard. That will create your tabbar on to the storyboard.

After that select your tabbar and uncheck the Translucent option and change the background to Default.

Now, Create a controller class TabbarController.

Now, attach TabbarController to the Tabbar.

First we will change the background of the tabbar with rounded cornors.

For making that create @IBDesignable class TabBarWithCornors and inhered this with UITabBar. Inside that file we are creating the shapLayer and drawing that shapLayer inside the overrided draw(_ rect: CGRect) method.

Now, select the tabbar and give class TabBarWithCornors. By doing this tabbar will take the shap which is created inside the TabBarWithCornors. Run the code then you can see the tabbar rounded cornors background.

Now creating upper line of Tabbar Item

Now first create two following properties inside the TabbarController.

var upperLineView: UIView!

let spacing: CGFloat = 12

After that write a addTabbarIndocatorView inside the TabbarController. addTabbarIndicatorView getting the index of the selected item and draw the lineView on the top of that tabbar item.

Now first that view will use inside the viewDidLoad by using the following code snippet.

We are passing the isFirstTime true because we need to remove that view from super view every time except firstTime.

After that now we need to call that method when any tabbar item clicked. For that we need to implement the UITabBarControllerDelegate. Implement that delegate and use its following method and that method will run every time when an item clicked and then call the addTabbarIndocatorView method which will remove the previous view from super view and redraw the line view every time when item clicked.

After that you can see the line above the active tabbar item.

TabbarController Class Full Code:

Hope that blog helps your. Thanks for reading this 😍 😍 😍 😍 😍 😍 😍



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store