Self customize tab bar in iOS

Tram Ho

Have you ever seen a new iOS project when looking through the mockup and design spec that you find out that these UI components are weird, not following Apple’s usual guideline standards? Examples of these app’s tab bar requests are. At this point, the default iOS tab bar will be very difficult to customize and you have to create your own tab bar to be able to change everything.

The system default UITabBarController has very few options to customize. By default, there are usually 5 items with the icon layout, selected, unselected colors as follows:

What happens when you are asked to do a different tab bar like this:

First, open up Xcode and create a new project, open Main.storyboard file and embed initial view controller on a tab bar controller using Editor> Embed In> Tab Bar Controller menu.

Next, we need to create an enum to hold information about the tab items in the tab bar. Create a new file TabItem.swift with the following code:

The enum above is quite simple, it contains basic information about tabs such as title, icon image, view controller. Then create corresponding view controllers for each respective tab.

Next, create a new file BaseTabBarController.swift , containing class BaseTabBarController inheriting class UITabBarController . This will be the new default tab bar controller class and can be customized.

Reopen Main.storyboard and set the tab bar controller class to BaseTabBarController .

The file BaseTabBarController.swift is implemented as follows:

In this file, we have slightly increased the default height of the tab bar controller from 48.0 to 67.0.

Next, let’s create a new CustomTabBar.swift file:

This CustomTabBar class implements the core component of our tab bar controller. In the method loadTabBar of BaseTabBarController class, add the following code:

Continue to implement the setupCustomTabMenu method:

Then, implement the convenience init method of CustomTabBar :

To modify the createTabItem method, we can freely customize each bar item tab as we like.

Finally, complete other handling methods like: handleTap , deactiveTab , switchTab and activateTab :

Run the app and we will have a new tab bar with the tab transition effect customized as follows:

Source article:

Complete source:

Share the news now

Source : Viblo