iosswiftxlpagertabstrip

Customizing NavigationBar per XLPagerTabStrip ButtonBarPagerTabStripViewController page


I am using XLPagerTabStrip library and using the ButtonBarPagerTabStripViewController. This is what the hierarchy looks like: enter image description here

The ButtonBarPagerTabStripViewController is embedded inside a navigationController and I have two different viewControllers that the ButtonBarPagerTabStripViewController contains. The problem is that I want to change how the navigationBar looks based one either ViewController1 or ViewController2.

For example, when the tab is one viewController1, I want to have a barButton "+". For viewController2, I want to have a barButton of report. However, I cannot make modifications to the navigationController bar from viewController1 and viewController2.

Is there a way?


Solution

  • ButtonBarPagerTabStripViewController class has a override function to handle this.

    override func updateIndicator(for viewController: PagerTabStripViewController, fromIndex: Int, toIndex: Int, withProgressPercentage progressPercentage: CGFloat, indexWasChanged: Bool) {
        if progressPercentage == 1 {
            // Add `+` button to navigation item
        } else {
            // Add `report` button to navigation item
        }
    }
    

    Add condition as per your total number of view controllers on the screen.

    Update

    Please see the below code used in the demo project.

    import UIKit
    import XLPagerTabStrip
    
    class MainTabBarViewController: ButtonBarPagerTabStripViewController {
    
        var isFirstView: Bool = true
        
        override func viewDidLoad() {
            super.viewDidLoad()
        }
        
        func getSegmentList() -> [UIViewController] {
            let firstViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(identifier: "FirstViewController")
            firstViewController.title = "First"
            let secondViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(identifier: "SecondViewController")
            secondViewController.title = "Second"
            return [firstViewController, secondViewController]
        }
        
        func setUI() {
            let addImage = UIImage(systemName: "plus")
            let addBarButton = UIBarButtonItem(image: addImage, style: .plain, target: self, action: #selector(addButtonAction(_:)))
            let reportImage = UIImage(systemName: "book")
            let reportBarButton = UIBarButtonItem(image: reportImage, style: .plain, target: self, action: #selector(reportButtonAction(_:)))
            navigationItem.rightBarButtonItem = isFirstView ? addBarButton : reportBarButton
        }
        
        @IBAction func addButtonAction(_ sender: UIBarButtonItem) {
            print("Add button action")
            // Add button action
        }
        
        @IBAction func reportButtonAction(_ sender: UIBarButtonItem) {
            print("Report button action")
            // Report button action
        }
        
        override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
            return getSegmentList()
        }
        
        override func updateIndicator(for viewController: PagerTabStripViewController, fromIndex: Int, toIndex: Int, withProgressPercentage progressPercentage: CGFloat, indexWasChanged: Bool) {
            if progressPercentage == 1 {
                let viewController = viewController.viewControllers[toIndex] as? FirstViewController
                isFirstView = viewController?.title == "First"
                setUI()
            }
        }
    
    }
    

    Output:

    enter image description here