This presentation will show you how to animate your default TabBar for subtle, but exciting effects!

1. Animated TabBar with Swift
www.letsnurture.com

2. UI & UX
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 presentation will show you how to animate your default
TabBar for subtle, but exciting effects!
If this piques your interest, you should review this carefully to
Make 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.
www.letsnurture.com

3. Project Setup
• Start with a single view application in Xcode.
• Download or clone the Ramotion: Animated
Tab Bar library
• https://github.com/Ramotion/animated-tab-
bar
• Drag the RAMAnimatedTabBarController
folder into your project
www.letsnurture.com

4. www.letsnurture.com

5. www.letsnurture.com

6. UITabBarController
www.letsnurture.com
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.

7. www.letsnurture.com

8. 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.
www.letsnurture.com

9. www.letsnurture.com

10. www.letsnurture.com

11. 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.
www.letsnurture.com

12. www.letsnurture.com

13. Build Now
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.
www.letsnurture.com

14. www.letsnurture.com

15. 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.
www.letsnurture.com

16. www.letsnurture.com

17. www.letsnurture.com

18. 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
toRAMAnimatedTabBarController.
• Do the same thing for each Tab Bar Item. Select
the item and set the class
toRAMAnimatedTabBarItem, make sure to do this
for each of your view controllers.
www.letsnurture.com

19. www.letsnurture.com

20. www.letsnurture.com

21. 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).
www.letsnurture.com

22. www.letsnurture.com

23. 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
www.letsnurture.com

24. 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
theObject that lives within the same parent
View Controller.
www.letsnurture.com

25. www.letsnurture.com

26. • 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.
www.letsnurture.com

27. www.letsnurture.com

28. www.letsnurture.com

29. Lets Developed Animated TabBar with Swift
www.letsnurture.com

30. Follow us on
https://www.facebook.com/LetsNurture
https://twitter.com/letsnurture
http://www.linkedin.com/company/letsnurture
Mail Us on
info@letsnurture.om
www.letsnurture.com | www.letsnurture.co.uk