Implementing Android’s TabLayout like feature in iOS

As I have worked on both native android and iOS applications, I have implemented some great features provided by the both platforms. But as these two platforms are different, they use different tool and different set of frameworks. Some of these feature are unique to their platforms and are not available in the other.

One such feature is android’s TabLayout provided by Material Design Support library. It’s really easy to implement in android. Unfortunately, iOS does not have any native widget similar to it.

In this article I will walk you through the steps to build a functionality like TabLayout in iOS using UIKit.

The approach we will follow require use of UIPageViewController. We can also create this functionality using UIScrollView and UIView’s by calculating drag or gesture, or by using CollectionView.

I find current approach better when each tab’s view is heavy and have inside it complex widgets like UICollectionView and UITableView.

Use of UIPageViewController gives us full controller over the foregrounds tab and we can do everything on tab’s view as itself a UIViewController.

Lets have a look at our end product

Let’s get started!

1. Create a single view project.

2. Since we need to create equal sized tabs, we will add a horizontal StackView and 3. buttons inside. We will keep first tab(button) filled as first tab will open by default.

Note: this demo is only for three static tabs. If tab are more than three, then use of UIScrollView or UICollectionView is recommended.

Here is how it’ll look in storyboard.

3. Add a UIView beneath the UIStackView and add constraints such it fills rest of the screen.
4. We will make buttons to change colour when tapped. Create outlets and actions for all the all the buttons.

I have created function updateButtons() to highlight the tapped button and deselect the others. We will call this function from the button actions with respective arguments. Below is the code implementation

5. Add UIPageViewController in your storyboard. Add a respective swift class and connect them. We will add this as a subview in main view controller.

Main function of UIPageViewController is to enable transition between our controller. It is somewhat similar to android’s ViewPager class.

6. Add three controllers that we’ll associate with the tabs. You can adding anything in these controllers as per your needs. To keeps things we will just added different background colours on the main view of controller.

Description of transition between controllers

7. Now we’ll add UIPageViewController as subview below the tabs in main view controller.

8. Now we have added page controller inside MainController. We’ll now configure UIPageViewController.

Initialise an array of view controllers. We don’t want all three controllers to be in memory . Hence, for loose coupling array of view controllers are set as lazy.

We want first tab to be selected and visible when app loads . Add the follow code block inside viewDidLoad() and don’t forget to implement UIPageViewControllerDelegate in main class.

We’ll now two important delegate functions viewControllerAfter and viewControllerBefore. These two page controller functions update the controller and index when user swipes in either direction. These added as extension for cleaner code.

9. Build the app, you could see swiping changes the controller, indicated by the background colour.

Now we have to connect tabs with the controllers. What we will do is to create functions to update tabs in PageController and access it on button actions in main controller through its object.

I have compared current tab index with tab we intend to move and determined the direction of swipe animation.

Build again and check the app. Tab are working now. Great!. Now we are close to our final product.

You could see the tabs(buttons) don’t update automatically on swipe. We have to send an action from the page controller(tab controllers) to the page main controller.

There are multiple ways to do it. You can use delegate, accessing the parent class(main controller) and calling a function to update tabs or you can use NotificationCenter.

In this demo I have use NotificationCenter. We post a notification and it’s like a pulse that can be caught by any observer by the same name. I posted notification in UIPageViewControllerDelegate’s didFinishAnimating function. It sends current index by embedding it an Dictionary

We will now add observer in PageController’s viewDidLoad() function. We’ll also add a handler function that will do the task of updation tabs.

And that’s it!!.

We did it!

Build and check the app. It should be working fine.

You can check this GitHub link. I’ve added all controllers in it, you just need to add those files in your project and set outlets, action and controllers in you storyboard.

!!! KEEP CODING !!!

Thank you for reading, please hit the recommend icon if like. Questions or Doubts? Leave them in the comment.