Create an Animated TabBar

Login to Access Code

Application engagement improves with great user interface and user experience. Most of the time, the UITabBar is the best experience for the user, because it is a familiar interface, but by default it can feel rather plain. This screencast will show you how to animate your default TabBar for subtle, but exciting effects!

If this piques your interest, you should watch our first screencast on Making Apps Sexy which will introduce you to UIKit. With UIKit you can easily animate views, leverage physics, and add visual effects to really enhance the aesthetics of your iOS application.

Project Setup

  1. Start with a single view application in Xcode.
  2. Download or clone the Ramotion: Animated Tab Bar library
  3. Drag the RAMAnimatedTabBarController folder into your project

Add the RAMAnimatedTabBarController folder to your Xcode Project

Enable the copy items if needed option under destination

Now we need to embed our main view controller in a UITabBarController. To do this, open your Main.storyboard, select your existing view controller, and go to Main Menu > Editor > Embed In > Tab Bar Controller.

Embed the ViewController in a UITabBarController

Connecting View Controllers

Our application will run with five different views, and a tab in the Tab Bar accordingly. To create these views let’s start by dropping five View Controllers on our Storyboard. Then you need to right click your Tab Bar Controller to show its connections. Under Triggered Segues in your connection menu, you can now drag the view controllers connector to each of your views.

Connect your UITabBarController to multiple View Controllers

UITabBarController relationships

Name your Tab Bar Items

If you expand each of your View Controllers, you’ll now see that each one has a Item which represents the tab for the view controller on the tab bar. You can select these and set the Title and Image attributes to your own, custom name and icon respectively. Give each View Controller a unique tab name and icon.

Set the Title and Image attributes for each Tab Bar Item

Build the application now and you should see your custom tabs with title and icon. They look pretty good as-is, but now we want to add the animation effects and give them some color.

Simulator with default tabs and items

Color your Views

Let’s go ahead set a default background color for each of our five View Controllers. In your storyboard, select the View (UIView) in each of your controllers and under the attributes inspector on the right, you can set the Background to a custom color.

UIViewController custom background color

UIViewController custom background color

Inheriting from the Animated Tab Bar library

We’re now ready to extend the core functionality with the RAM library. Start by selecting your Tab Bar Controller in your storyboard, and under the Identity Inspector on the right, you will set the class to RAMAnimatedTabBarController.

The Tab Bar will inherit from the RAM Animated Tab Bar Controller class

Do the same thing for each Tab Bar Item. Select the item and set the class to RAMAnimatedTabBarItem, make sure to do this for each of your view controllers.

Each tab bar item will inherit from the RAM Animated Tab Bar Item class

Create an NSObject for each View Controller

The NSObject is what really pulls of the animation for the connecting item. We need to add an object into each view controller that will inherit from the animation class that we want to use, and then tell the Tab Bar Item to connect it’s animation call to that object.

Start by dragging and dropping an Object from your Object Library on the right, onto each of your View Controllers (but not your Tab Bar Controller).

Drag an object from the Object Library onto each View Controller

Now we need to have each of these Objects inherit from the appropriate class for the animation effect. Select the Object and assign it’s class (under the identity inspector) to one of the following:

  • RAMBounceAnimation
  • RAMLeftRotationAnimation
  • RAMRightRotationAnimation
  • RAMFlipLeftTransitionItemAniamtions
  • RAMFlipRightTransitionItemAniamtions
  • RAMFlipTopTransitionItemAniamtions
  • RAMFlipBottomTransitionItemAniamtions
  • RAMFumeAnimation

Connect the Animation to the Tab Bar Item

Select each Tab Bar Item and under the connections inspector you should see a new connection called animation. Drag and drop this connection to the Object that lives within the same parent View Controller.

Connect the animation to the object

Now that the connection is made, we can go ahead and set the custom IBInspectable attributes for both the Tab Bar Item and the Animation Object. Set the Text Color under the attributes inspector for the item, and set Text Selected Color and Icon Selected Color for the animation object.

Set the custom IBInspectable attributes