[SWIFT] Implementation of XLPagerTabStrip with TabBarController

Introduction

When using the iOS library made by Swift called XLPagerTabStrip, I implemented it in conjunction with TabBarController. I'm a little clogged with the settings in storyboard, so I'll post it as a memorandum.

Operating environment

【Xcode】Version 12.0.1 【Swift】Version 5.3 【CocoaPods】version 1.9.3

Screen after mounting

Implementation procedure

1. Preparation of TabBarController

1. Delete the original ViewController of Main.storyboard and add TabBarController. Please also delete the attached ViewController. (This is the reason for having one ViewController for one storyboard.)

2. Check Is Initial View Controller.

3. Create MainTabBarController.swift and assign it to Class in Main.storyboard.

MainTabBarController.swift

class MainTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        //Prepare variables to store the view controller for each screen
        var viewControllers = [UIViewController]()

        //Settings for each screen(tab image etc.)
        let tab1VC = UIStoryboard(name: "Bookmarks", bundle: nil).instantiateInitialViewController()
        tab1VC?.tabBarItem = UITabBarItem(tabBarSystemItem: .bookmarks, tag: 0)
        viewControllers.append(tab1VC!)

        let tab2VC = UIStoryboard(name: "Favorites", bundle: nil).instantiateInitialViewController()
        tab2VC?.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0)
        viewControllers.append(tab2VC!)
        
        self.setViewControllers(viewControllers, animated: false)
    }
}

2. Preparation of ViewController for each screen

• Prepare the above tab1VC as Bookmarks.storyboard and tab2VC as Favorites.storyboard. Set UINavigationController for each and give it a title so that you can distinguish it.

3. Introduced XLPagerTabStrip

• Use CocoaPods.

1. Open a terminal and navigate to the cd target file.
2. Create podfile with pod init
3. Add the following to podfile, save it, and complete with pod install.

podfile.rb

pod 'XLPagerTabStrip'

4. Preparation of management class ButtonBarPagerTabStripViewController

• Prepare a class that inherits ButtonBarPagerTabStripViewController that manages ViewControllers. This time, Bookmarks is the management source. Create BookmarksViewController.swift.

BookmarksViewController.swift

import UIKit
import XLPagerTabStrip

//Rewrite the inheritance source (UIViewController → ButtonBarPagerTabStripViewController)
class BookmarksViewController: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //Processing to return a managed view controller
        let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateViewController(withIdentifier: "First")
        let secondVC = UIStoryboard(name: "Second", bundle: nil).instantiateViewController(withIdentifier: "Second")
        let thirdVC = UIStoryboard(name: "Third", bundle: nil).instantiateViewController(withIdentifier: "Third")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }

}

1. Installation of Collection View which will be the button part

• Place the Collection View that will be the button part and set the Auto Layout as shown in the image below. Let's delete Cell.

• Connect the class of Collection View with ButtonBarView and set Module to XLPagerTabStrip.

• Right-click on Collection View. Drag the New Referencing Outlet from the Referencing Outlets to the ViewController and select ButtonBarView.

2. Installation of ScrollView which will be the switching part

• Place the ScrollView that will be the switching part and set the AutoLayout as shown in the image below.
• Uncheck Content Layout Guides as you will get ambiguous layouts and warnings.

• Right-click on ScrollView. Drag the New Referencing Outlet from the Referencing Outlets to the ViewController and select containerView.

• If the connection is correct, the ScrollView display will change to ContainerView.

5. Preparation of managed view controllers

• It becomes a ViewController that transitions by swiping or pressing a button.
• Prepare each of the following three UIViewControllers that implement the IndicatorInfoProvider protocol.

1. Prepare First.storyboard and FirstViewController. (The background color of storyboard is red)
2. Prepare Second.storyboard and SecondViewController. (The background color of storyboard is blue)
3. Prepare Third.storyboard and ThirdViewController. (The background color of storyboard is green)

FirstViewController.swift

import UIKit
import XLPagerTabStrip

class FirstViewController: UIViewController {
    
    //This is used for the button title
    var itemInfo: IndicatorInfo = "First"

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

extension FirstViewController: IndicatorInfoProvider {
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }
}

• Place Label and set Text to First, Font to 24, and AutoLayout.

• Set the Class assignment and the Storyboard ID.

6. Added the look and behavior of the buttonBar

MainTabBarController.swift

import UIKit
import XLPagerTabStrip

class BookmarksViewController: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        //Processing about screen UI
        setupUI()
        super.viewDidLoad()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        //Forcibly reselect and operate changeCurrentIndexProgressive (0th → 1st → 0th)
        moveToViewController(at: 1, animated: false)
        moveToViewController(at: 0, animated: false)
    }
    
    func setupUI() {
        //Background color of the entire ButtonBar
        settings.style.buttonBarBackgroundColor = UIColor.white
        //Background color of ButtonBarItem
        settings.style.buttonBarItemBackgroundColor = UIColor.white
        //Text color of ButtonBarItem
        settings.style.buttonBarItemTitleColor = UIColor.lightGray
        //Font size of ButtonBarItem
        settings.style.buttonBarItemFont = .boldSystemFont(ofSize: 14)
        //The color of the selected ButtonBar indicator
        settings.style.selectedBarBackgroundColor = UIColor.black
        //Thickness of the selected ButtonBar indicator
        settings.style.selectedBarHeight = 2.0
        //Leftmost margin of ButtonBar
        settings.style.buttonBarLeftContentInset = 8
        //Rightmost margin of ButtonBar
        settings.style.buttonBarRightContentInset = 8
        //Margins in Button
        settings.style.buttonBarItemLeftRightMargin = 32
        //Behavior when switching pages by swiping or tapping ButtonBarItem
        changeCurrentIndexProgressive = { oldCell, newCell, progressPercentage, changeCurrentIndex, animated in
            //Unwrap cells that have been changed or before and after selection
            guard changeCurrentIndex, let oldCell = oldCell, let newCell = newCell else { return }
            //Specify the state of the cell before selection
            oldCell.label.textColor = UIColor.lightGray
            //Specify the state of the selected cell
            newCell.label.textColor = UIColor.black
        }
    }
    
    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //Processing to return a managed view controller
        let firstVC = UIStoryboard(name: "First", bundle: nil).instantiateViewController(withIdentifier: "First")
        let secondVC = UIStoryboard(name: "Second", bundle: nil).instantiateViewController(withIdentifier: "Second")
        let thirdVC = UIStoryboard(name: "Third", bundle: nil).instantiateViewController(withIdentifier: "Third")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }

}

reference

• Create UITabBarController and UINavigationController with code
• [Swift 5] How to use (introduce) the library "XLPagerTabStrip"