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.
- Start with a single view application in Xcode.
- Download or clone the Ramotion: Animated Tab Bar library
- Drag the
RAMAnimatedTabBarControllerfolder into your project
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.
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.
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
Image attributes to your own, custom name and icon respectively. Give each View Controller a unique tab name and icon.
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.
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.
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
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.
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).
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:
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.
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.