Yalantis: iOS, Android And Web App Development Company

How We Created Tab Bar Animation for iOS

Today’s smartphones are becoming more like tablets, or there is even a better word – phablets. Big screens undoubtedly have their advantages, but there are certain drawbacks as well. One of them is reachability. You can’t possibly use a device like iPhone 6 Plus in a traditional one-handed manner.

While the size keeps growing, the same doesn’t happen to user experience. Somehow neither Apple nor Google seem to be in a hurry to change the interaction guidelines to meet the needs of the owners of large iOS and Android devices.

“I think design should adapt to big screens to improve user experience,” said Vitaly Rubtsov, our designer. That’s why we created the Folding Tab Bar Animation (Dribbble and Github). It significantly improves user experience on big screens of new iPhones and can also be implemented on Android devices. The core idea of the animation is to concentrate all control elements at the bottom of the screen so that a user can navigate through pages with one hand.

The design was created by Vitaly Rubtsov and then implemented by Igor Muzyka and Eugene Goloboyar, our iOS developers.

Tab Bar animation project by Yalantis

How we developed the component

To build this animation our team of iOS developers created two things: a custom tab bar YALFoldingTabBar and a custom tab bar controller YALFoldingTabBarController. Here is what we did step by step:

  1. Designed elements of the component and their interaction patterns.
  2. Wrote a custom Folding Tab Bar component and built animations into it.
  3. Wrote a custom Folding Tab Bar Controller.
  4. Made a demo project for Github.

You can watch the video that shows how to create the Tab Bar animation for iOS. The video is made by Webucator, the company that provides Mobile Apps Development Classes

How we implemented a custom Folding Tab Bar

Our custom Folding Tab Bar (YALFoldingTabBar) is a subclass of a standard UIView. We wanted to make this component expand and contract in response to a user tapping. When the component is closed you can only see a central button (“+”). When tapping on it, our custom Folding Tab Bar expands letting other tabBarItems appear, so that the user can switch the controllers.

Each separate tabBarItem can have two additional buttons on the left and right. These buttons can be used to let a user interact with a selected screen on the Folding Tab Bar Controller (YALFoldingTabBarController) without even having to leave it. For example, a user can do searches, write a message, and move to another screen.

Tab Bar animation by Yalantis

How we implemented a custom Folding Tab Bar Controller

Our custom controller (YALFoldingTabBarController) is responsible for switching screens. In order to develop it we made a subclass from a standard UITabBarController, because this way we could use our custom controller in the Storyboard. Then we simply hid a standard UITabBar and put our custom tab bar (YALFoldingTabBar) on top.

Issues we had to address:

1. Height.

UITabBar has a standard height, but we needed to customize it to our needs, so we redefined the method viewWillLayoutSubviews in the subclass of UITabBarViewController:

- (void)viewWillLayoutSubviews {
 [super viewWillLayoutSubviews];
 
 CGRect tabFrame = self.tabBar.frame;
 tabFrame.size.height = self.tabBarViewHeight;
 tabFrame.origin.y = self.view.frame.size.height - self.tabBarViewHeight;
 self.tabBar.frame = tabFrame;
}

Then we had to configure UIVIewController which is located in the Folding Tab Bar Controller. However, Bottom Layout Guide which you’re supposed to use in this case, doesn’t adapt to the new height of the UITabBar. In order to configure the UIViewController in the Storyboard we had to:

  • Go to the Attributes Inspector -> View Controller -> Uncheck the option ‘Under bottom bars’
  • Create Vertical Space Constraint aligned with the bottom of the view of UIViewController. (We completely ignored Bottom Layout Guide)

2. Interaction between parts of the component.
We implemented it with Delegate and DataSource standard patterns.  

3. Animations.
Implementation of the spring animation for buttons in the tab bars turned out to be a complicated issue. Our animation is all about changing angles, deviations, acceleration, and damping. We found a nice piece of code on Github which implements spring animation on CALayer in Swift and reworked it for our needs.

Read also: How we created animated preloaders

How you can customize our component

We managed to implement a custom Folding Tab Bar Controller with all the animations planned. The current version of the component is pretty simple to use. We also give you a possibility to customize the YALFoldingTabBar. You can change the indent, its color, the color for the background, and the height of additional buttons. Here is how you can specify these parameters:

1. Height

tabBarController.tabBarViewHeight = YALTabBarViewDefaultHeight;

2. Inset and offset

 tabBarController.tabBarView.tabBarViewEdgeInsets = YALTabBarViewHDefaultEdgeInsets;
 tabBarController.tabBarView.tabBarItemsEdgeInsets = YALTabBarViewItemsDefaultEdgeInsets;
 tabBarController.tabBarView.offsetForExtraTabBarItems = YALForExtraTabBarItemsDefaultOffset;

3. Colors

 tabBarController.tabBarView.backgroundColor = [UIColor colorWithRed:94.0/255.0 green:91.0/255.0 blue:149.0/255.0 alpha:1];
 tabBarController.tabBarView.tabBarColor = [UIColor colorWithRed:72.0/255.0 green:211.0/255.0 blue:178.0/255.0 alpha:1];

4. Height for additional left and right buttons

tabBarController.tabBarView.extraTabBarItemHeight = YALExtraTabBarItemsDefaultHeight;

You can find all these configurations in our demo project on the GitHub repository. Here are the links:

 


 

Tech

Koloda Tinder-Like Animation Version 2. Prototyping in Pixate and Development in Swift

Design

UIDynamics, UIKit or OpenGL? 3 Types of iOS Animations for the Star Wars

Design

How We Created Guillotine Menu Animation for iOS

See what else we can do

Check out our knowledge and capabilities

Let's talk code