[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

output.gif

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.) スクリーンショット 2020-11-08 1.45.48(2).png

  2. Check Is Initial View Controller. スクリーンショット 2020-11-08 1.46.33(2).png

  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

3. Introduced XLPagerTabStrip

  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

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

2. Installation of ScrollView which will be the switching part

スクリーンショット 2020-11-08 2.35.37(2).png

5. Preparation of managed view controllers

  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
    }
}

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

Recommended Posts

Implementation of XLPagerTabStrip with TabBarController
[Swift 5] Implementation of membership registration with Firebase
Implementation of GKAccessPoint
Implementation of flash messages
Implementation of search function
Applied implementation of chat-space
Implementation of pagination function
Pagination implementation with gem'kaminari'
[Rails] Implementation of drag and drop function (with effect)
Rails implementation of ajax removal
[Swift] Simple implementation of UIImageView
Implementation of sequential search function
[Swift] Implementation of ultra-simple billing
Implementation of like function (Ajax)
[Rails 6] Implementation of search function
Implementation of image preview function
[Java] Implementation of Faistel Network
[Rails] Implementation of category function
[Java] Simplify the implementation of data history management with Reladomo
Implementation of a math parser with recursive descent parsing (Java)
Implementation of category pull-down function
Implementation of unit test code
Login function implementation with rails
Implementation of gzip in java
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
Implementation of tri-tree in Java
Implementation of HashMap in kotlin
[Details] Implementation of consumer applications with Kinesis Client Library for Java
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
[Rails] Implementation of user logic deletion
[Rails] Asynchronous implementation of like function
Implement UICollectionView of iOS14 with CustomCell.
[Rails] Implementation of image preview function
Implementation of ls command in Ruby
Easy implementation of Android file browsing
[Rails] About implementation of like function
Implementation of asynchronous processing in Tomcat
Implementation of validation using regular expressions
[Rails] Implementation of many-to-many category functions
Impressions of making BlackJack-cli with Ruby
Default implementation of Object.equals () and Object.hashCode ()
Implementation of like function in Java