[SOLVED] Show fixed progress below navigation bar between different view controllers

There are various ways to do this...

One common approach is to set the "progress view" as the navigation bar's Title View -- but that won't show it below the navigation bar.

So, another approach is to subclass UINavigationController and add a "progress view" as a subview. Then, implement willShow viewController and/or didShow viewController to update the progress.

As a quick example, assuming we have 4 "steps" to navigate to...

We'll start with defining a "base" view controller, with two properties that our custom nav controller class will use:

class MyBaseVC: UIViewController {

    // this will be read by ProgressNavController
    //  to calculate the "progress percentage"
    public let numSteps: Int = 4
    
    // this will be set by each MyBaseVC subclass,
    //  and will be read by ProgressNavController
    public var myStepNumber: Int = 0
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // maybe some stuff common to the "step" controllers
    }
    
}

Then, each "step" controller will be a subclass of MyBaseVC, and will set its "step number" (along with anything else specific to that controller):

class Step1VC: MyBaseVC {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myStepNumber = 1
        
        // maybe some other stuff specific to this "step"
    }
    
}
class Step2VC: MyBaseVC {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myStepNumber = 2
        
        // maybe some other stuff specific to this "step"
    }
    
}
class Step3VC: MyBaseVC {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myStepNumber = 3
        
        // maybe some other stuff specific to this "step"
    }
    
}
class Step4VC: MyBaseVC {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        myStepNumber = 4
        
        // maybe some other stuff specific to this "step"
    }
    
}

Then we can setup our custom nav controller class like this (it's not really as complicated as it may look):

class ProgressNavController: UINavigationController, UINavigationControllerDelegate {
    
    private let outerView = UIView()
    private let innerView = UIView()
    private var pctConstraint: NSLayoutConstraint!
    
    override init(rootViewController: UIViewController) {
        super.init(rootViewController: rootViewController)
        commonInit()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    private func commonInit() {
        
        // for this example, we're using a simple
        //  green view inside a red view
        //  as our "progress view"
        
        // we set it up here, but we don't add it as a subview
        //  until we navigate to a MyBaseVC
        
        // we know we're setting
        //  outerView height to 20
        //  innerView height to 12 (4-points top/bottom "padding")
        // so let's round the ends of the innerView
        innerView.layer.cornerRadius = 8.0
        
        outerView.backgroundColor = .systemRed
        innerView.backgroundColor = .systemGreen
        
        outerView.translatesAutoresizingMaskIntoConstraints = false
        innerView.translatesAutoresizingMaskIntoConstraints = false
        
        outerView.addSubview(innerView)
        
        // initialize pctConstraint
        pctConstraint = innerView.widthAnchor.constraint(equalTo: outerView.widthAnchor, multiplier: .leastNonzeroMagnitude)

        NSLayoutConstraint.activate([
            innerView.topAnchor.constraint(equalTo: outerView.topAnchor, constant: 4.0),
            innerView.leadingAnchor.constraint(equalTo: outerView.leadingAnchor, constant: 4.0),
            innerView.bottomAnchor.constraint(equalTo: outerView.bottomAnchor, constant: -4.0),
            pctConstraint,
        ])

        self.delegate = self
        
    }
    
    func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
        
        // if the next VC to show
        //  is a MyBaseVC subclass
        if let _ = viewController as? MyBaseVC {
            
            // add the "progess view" if we're coming from a non-MyBaseVC controller
            if outerView.superview == nil {
                
                view.addSubview(outerView)
                
                let g = view.safeAreaLayoutGuide
                NSLayoutConstraint.activate([
                    
                    outerView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor, constant: 4.0),
                    outerView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
                    outerView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
                    outerView.heightAnchor.constraint(equalToConstant: 20.0),
                    
                ])
                
                // .alpha to Zero so we can "fade it in"
                outerView.alpha = 0.0
                
                // we just added the progress view,
                //  so we'll let didShow "fade it in"
                //  and update the progress width
                
            } else {
                
                self.updateProgress(viewController)

            }
            
        } else {
            
            if outerView.superview != nil {
                // we want to quickly "fade-out" and remove the "progress view"
                //  if the next VC to show
                //  is NOT a MyBaseVC subclass
                UIView.animate(withDuration: 0.1, animations: {
                    self.outerView.alpha = 0.0
                }, completion: { _ in
                    self.outerView.removeFromSuperview()
                    self.pctConstraint.isActive = false
                    self.pctConstraint = self.innerView.widthAnchor.constraint(equalTo: self.outerView.widthAnchor, multiplier: .leastNonzeroMagnitude)
                    self.pctConstraint.isActive = true
                })
            }
            
        }
        
    }
    
    func navigationController(_ navigationController: UINavigationController, didShow viewController: UIViewController, animated: Bool) {
        
        // if the VC just shown
        //  is a MyBaseVC subclass
        //  AND
        //  outerView.alpha < 1.0 (meaning it was just added)
        if let _ = viewController as? MyBaseVC, outerView.alpha < 1.0 {
            self.updateProgress(viewController)
        }
        
        // otherwise, updateProgress() is called from willShow

    }
    
    private func updateProgress(_ viewController: UIViewController) {
        
        if let vc = viewController as? MyBaseVC {
            
            // update the innerView width -- the "progress"
            let nSteps: CGFloat = CGFloat(vc.numSteps)
            let thisStep: CGFloat = CGFloat(vc.myStepNumber)
            var pct: CGFloat = .leastNonzeroMagnitude
            
            // sanity check
            //  avoid error/crash if either values are Zero
            if nSteps > 0.0, thisStep > 0.0 {
                pct = thisStep / nSteps
            }
            
            // don't exceed 100%
            pct = min(pct, 1.0)
            
            // we can't update the multiplier directly, so
            //  deactivate / update / activate
            self.pctConstraint.isActive = false
            self.pctConstraint = self.innerView.widthAnchor.constraint(equalTo: self.outerView.widthAnchor, multiplier: pct, constant: -8.0)
            self.pctConstraint.isActive = true
            
            // if .alpha is already 1.0, this is effectively ignored
            UIView.animate(withDuration: 0.1, animations: {
                self.outerView.alpha = 1.0
            })
            
            // animate the "bar width"
            UIView.animate(withDuration: 0.3, animations: {
                self.outerView.layoutIfNeeded()
            })

        }

    }
    
}

So, when we navigate to a new controller:

we check to see if it is an instance of MyBaseVC
if Yes
- add the progress view (if it's not already there)
- get the step number from the new controller
- update the progress
if Not
- remove the progress view

I put up a complete example you can check out and inspect here: https://github.com/DonMag/ProgressNavController