Visualizing navigation flow progress

Last updated 48 days ago by Sebastian Osiński

ios

Users are impatient. That’s a harsh truth. It’s easy to lose their attention and we, as app creators, should do everything to prevent that. One case when user can get easily tired of our app are multi-screen flows, e.g. account registration, onboarding or finalizing order in e-commerce applications. Users don’t know how many steps are left - how much more involvement is needed from them to finish.

Such flows are often implemented with UINavigationController. In this article, I’ll show how to implement sleek, interactive navigation controller progress view which will display users how far in the flow they are. This is what we’ll get after we finish:

Displaying progress bar

We’ll start with creating subclass of UINavigationController. Let’s call it ProgressNavigationController.

```language-swift final class ProgressNavigationController: UINavigationController { private let progressView = UIProgressView(progressViewStyle: .bar)

override func viewDidLoad() {
    super.viewDidLoad()

    setupProgressView()
}

private func setupProgressView() {
    view.addSubview(progressView)
    progressView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint.activate([
        progressView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        progressView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        progressView.topAnchor.constraint(equalTo: navigationBar.bottomAnchor),
        progressView.heightAnchor.constraint(equalToConstant: 2.0)
    ])
}

} ```

For now, it contains only a UIProgressView just below navigationBar.

We can assign any value between 0.0 and 1.0 to UIProgressView’s progress property and it’ll display it. We’ll shortly make use of it to display our navigation flow progress. To do that, we need a way of getting progress value from view controllers on our navigation controller’s navigation stack. Let’s introduce simple protocol:

language-swift protocol FlowProgressReporting { var flowProgress: Float { get } }

This protocol has only one property – flowProgress. Each view controller which wants to display progress value should adopt this protocol.

Read full Article