Over a million developers have joined DZone.

UITabBarController: How to Produce the Tab Bar Controller in iOS

DZone 's Guide to

UITabBarController: How to Produce the Tab Bar Controller in iOS

This article focuses on interactive view difference by showing us how to produce the tab bar controller in iOS.

· Mobile Zone ·
Free Resource

Mobile app users look for the most useful features of an app at the home page. But we can not put all of the features on it for the simple reason of space.

To solve this problem and to make it simple for a user to browse the page in no time, UITabBarController is an awesome solution in iOS. In this article, I will focus on view transition in the view controllers of the tab controller.

Introduction to UITabBarController

It is a collection of buttons that can be located at the bottom of an iPhone screen, and forms a vast part of custom iPhone application development. Whenever you tap on any of it, a particular view controller will be displayed. Let’s dip into implementation.

Implement Custom UITabBarController

You can do this through the interface builder as well as programming. Here I am going to perform it programmatically. Let's build and run the project.

Create a new file of type or Source or Cocoa Touch Class. Set a name to it and obtain “UITabBarController”.

We will perform the TabBarController and proceed with different steps for custom iPhone app development because we require some icons and view controllers to display. Hence, we need to create an array of images, titles, and view controllers. You may worry about the images and number of view controllers — simply do not. Your master project contains all the necessary images. Here, we will apply a single view controller and build multiple examples of it.

Now join this method at the bottom of AppDelegate:

Image title

This method will be applied to build an array of view controllers. There is a ViewController class in this project. It has a scene or interface in Main.storyboard. We will require an example of Main storyboard to instantiate the view controller.

We will need five view controllers:

Image title

To recognize these view controllers, we need to customize them. We will replace the background color, as well as the title of the view controller.

Image title

Add following codes after the declaration of class AppDelegate.

Image title

And now, we will construct an instance of TCTabBarController in an application and select all view controllers that we built in the previous method.
Image titleWe require to set tabBar controller arrives after launch screen. So, rootViewController of the window will be selected with tabBar and call makeKeyAndVisible().

Image title

Obviously, it is time to view what we did so far. Just run the project.

Wow! The view controller has changed from the earlier one, but we cannot find the tab bar. Just randomly click on the bottom of the view controller. Oh Great!! View controllers are changing!! But what about icons?

We will customize the tab bar instantly. UITabBarController has a feature that is called “tabBar”. It is the bar that is noticeable at the bottom of the view controller. It has a different feature called “items”. It includes UITabBarItem. We need to customize BarItem. We will set image and title to them.

Image title

Call this method from an application and after allowing the array of view controllers.


Now run the app and see what we have done!

After the View Transition

In this part, we will modify the default view transition animation to a customized one. Let us proceed to the next stage of iOS development with the UITabBar. Before going to implementation, we will need to know how this transition runs.

Let's Implement the View Transition

We will build an animator class to control the animation in two view controller in this custom iPhone app development. So, tap File/ New / File and pick the template iOS\Source\Cocoa Class. Write the title of this class as “SwapAnimator” and obtain NSObject.

Now it's time to follow add follow property to SwapAnimator.

Image title

It is time to implement transitionDuration. Return animaitonDuration from this method.

Image title

And Add a property of SwapAnimator.

let swapAnimator = SwapAnimator()

Now we will implement UITabBarControllerDelegate.

extension TCTabBarController : UITabBarControllerDelegate {
func tabBarController(tabBarController: UITabBarController, animationControllerForTransitionFromViewController fromVC: UIViewController, toViewController toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return swapAnimator

Don’t forget to assign delegate of UITabBarController to self within viewDidLoad().

self.delegate = self

Run the app and see if there are some further changes in the view.

We have to write code for an animation. Create example for the view to show next and the view to eliminate from containView in animateTransition() method.

We will set an animation to animate the fromView.

Image titleNow we will improve the animation.

Image title

Run the app and see. If, nothing has changed.

The animation on fromView is not running as is cover by toView. As we continue toView to containerView before the starting of the animation, so the toView reverses the fromView. So, we will begin first alpha zero to toView & put an animation to give it 1.0.

Image title

Now, run it and see. The animation is running but the whole bar becomes disabled after the first tap. We did not call animation completion method and property storedContext was not published. Along with them, we have to release every animation from fromView.layer. Join the following method at the bottom of animateTransition method.

Image title

Now run. We will perform it much better. Open ViewController. Swift and see into viewDidLoad(). You surely find the circleLayer that has not been joined to the layer. So, uncomment the line of code.


Now, run it and see. Just amazing! You have done it.

Hope now you have an idea of view transition that forms an essential part in any custom iPhone app development. It is now possible to give an awesome experience to the user from what you learned in this tutorial about interactive view difference.

iphone app development ,mobile app development ,ios

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}