How to implement Android-Like Tab Layouts in iOS using swift 3

Traditional tabs in iOS are located at the bottom of your screen, on android applications on the other hand, your tabs are at the top. Today I m going to write a step by step tutorial on how to achieve the android-like version on an iOS application using an open source library called XLPagerTabStrip.

Below are images of what we are trying to achieve.

Introduction.

XLPagerTabStrip is a Container View Controller that allows us to switch easily among a collection of view controllers. Pan gesture can be used to move on to next or previous view controller. It shows a interactive indicator of the current, previous, next child view controllers.

SO basically, to achieve the layout, we ll have a 1 Parent View Controller that houses 2 or more children view controllers. The library provides 4 different ways to show the children view controllers, but today we are focusing on the most popular one, Button Bar, you must have come across it if you use apps such as such as instagram, youtube, skype and many others (see above images).

Set up the Xcode Project

If you are integrating in an existing project, you can skip this step.

• Create a new xcode project
• Select single View Application
• Name your project, and complete the remaining fields

Installation

We’ll be installing the XLPagerTabStrip via cocopods.

• Firstly, Exit XCode entirely and open the terminal
• From the terminal, navigate to your project directory, and run:

pod init

• Now, if you look inside your project file, you should see a podfile, open with any text editor

Uncomment the use_frameworks! and add ppod 'XLPagerTabStrip', :git => 'https://github.com/KelvinJin/XLPagerTabStrip', :branch => 'swift3'

If you started out with a new project, your podfile should look like this.

# Uncomment this line to define a global platform for your project
# platform :ios, ‘8.0’
# Uncomment this line if you’re using Swift
use_frameworks!
target ‘AndroidTabs’ do
pod 'XLPagerTabStrip', :git => 'https://github.com/KelvinJin/XLPagerTabStrip', :branch => 'swift3'
end

• Save the file, go back to terminal and run

pod install

• After a successful ‘pod installed’ message from the terminal, go back to the project directory, you should see ‘Your-project-name.xcworkspace’ file. Launch your project by double-clicking on that file.
• N.B: if after launching the .xcworkspace file, You encounter the convert to the latest swift version window, click update, and let xcode do its thing. Just make sure you clean build the project folder, and everything should be back to normal

Alt +Shift + Cmd + K

Set Up the Parent Controller.

• if you started with an empty project , go ahead and delete the ViewController.swift file, so we start afresh.
• Switch to your storyboard, you should have an Empty VC, if you don’t drag one onto the storyboard, we are going to make this the Parent ViewController.
• Create a new file: ParentViewController subclass UIViewController.
• Edit the content so you have:

//import the library
import XLPagerTabStrip
//Delete UIViewController, and Extend //ButtonBarPagerTabStripViewController instead
class ParentViewController: ButtonBarPagerTabStripViewController {
  ..
}

• Associate the VC in the storyboard with the ParentViewController.
• Drag a UIScrollView onto the VC, let it fully occupy the VC.

Add Constraints, should be top-64,right-0,bottom-0,left-0.

• Select the ScrollView and Right-click, Drag a new referencing outlet to the ViewController to connect containerView outlet with the scroll view.

• Drag a CollectionView on top of the View (Delete the cell that comes with it), same level as the ScrollView, but rearrange them so the CollectionView is on top.
• Set constraints 0-left, 0-top, 0-right, height 64.

• Associate the CollectionView with the ButtonBarView Class
• Select the ContainerView and Right-click, Drag a new referencing outlet to the ViewController to connect buttonBarView outlet with the ContainerView as above, also assign it to module: XLPagerTabStrip

• Open the ParentViewController.swift file, and set up the look and feel of the buttonBar.

let purpleInspireColor = UIColor(red:0.13, green:0.03, blue:0.25, alpha:1.0)
override func viewDidLoad() {
// change selected bar color
settings.style.buttonBarBackgroundColor = .white
settings.style.buttonBarItemBackgroundColor = .white
settings.style.selectedBarBackgroundColor = purpleInspireColor
settings.style.buttonBarItemFont = .boldSystemFont(ofSize: 14)
settings.style.selectedBarHeight = 2.0
settings.style.buttonBarMinimumLineSpacing = 0
settings.style.buttonBarItemTitleColor = .black
settings.style.buttonBarItemsShouldFillAvailiableWidth = true
settings.style.buttonBarLeftContentInset = 0
settings.style.buttonBarRightContentInset = 0
changeCurrentIndexProgressive = { [weak self] (oldCell: ButtonBarViewCell?, newCell: ButtonBarViewCell?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
guard changeCurrentIndex == true else { return }
oldCell?.label.textColor = .black
newCell?.label.textColor = self?.purpleInspireColor
}
super.viewDidLoad()
}

Set Up the Children

• Create 2 new ViewControllers ( you can create as many as you like but we’ ll stick with 2 here) , Drag to storyboard, and create corresponding files (ChildViewController1.swift, ChildViewController2.swift), associate the ViewControllers in StoryBoard with the appropriate classes.
• Also, Give them a storyboardId. I m using child1, child2
• you can do anything you would normally do with these controllers, but for the sake of this tutorial, I’m just going to drag a UILabel onto the VC just to differentiate.
• To Set up a child view: import XLPagerTabStrip, extend IndicatorInfoProvider, and implement one function to conform with the protocol.
• The Method returns the title for that child, to be used on the ButtonBar of the Parent.

• Same for the ChildController2.swift file

• Go back to the ParentViewController.swift to associate the children controllers to the the parent controllers.

override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
let child_1 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "child1")
let child_2 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "child2")
return [child_1, child_2]
}

Here is my full ParentViewController.swift file.

Go ahead and run your code, Here’s the result.