With the help of UIProgressView and protocols Form entry is never fun. Especially on a device. In our app here at , we do require the user to enter some of their details manually, so we are striving to make that as painless for the user as possible! mobile WeVat One thing we have recently implemented is a simple progress view to subtly show the users how far through the process they are. I will be showing you how to code up this progress view in a generic way, so you can drop it into your and be done with it! So let’s get started. UINavigationController TL;DR create protocol which presents a UIProgressView as UINavigationController subview create protocol which updates UIProgressView conform your UINavigationController to the presenter protocol conform each UIViewController within your navigation stack to the updater protocol Just want the code? No beef! Download the sample project . here Form Setup I have set up a new project in Xcode with a stack of four in a . Each has their own next button, which will push segue to the next view controller, and a finish button which will take you back to the beginning with an unwind segue. UIViewControllers UINavigationController Our basic navigation flow Progress View Presenter As mentioned in my , we try to ‘ ’ bits of functionality as much as possible through the use of protocols. So lets create a protocol which will handle the displaying of the . previous articles componentise UIProgressView Once we have this, we can use protocol extensions to provide some default behaviour in how we want this view configured. We will need to ensure the view is added to its superview and laid out correctly. Be sure to pin the view to the property of the navigationBar UINavigationController By further extending for , we can provide views to the protocol to give a default behaviour for all navigation controllers that implement this. Man I love protocol extensions. UINavigationController We can now create our subclass of and implement our protocol here to add this functionality to all of the view controllers in our navigation stack. UINavigationController Don’t forget to add this as the custom class in the storyboard. Progress View Updater Okay so now we have the in our navigation bar, but how are we going to update the progress for each of the view controllers you ask? UIProgressView We can create another protocol to handle this functionality. I will talk you through what each of these functions will provide. with simply a float and animation . We will pass this through to the underlying later. updateProgress Bool UIProgressView.setProgress with an array of UIViewController types. This may look a bit strange, but this can give us a way to update progress based on all view controllers within a navigation stack. I will show you why this is useful below. updateProgress fills the progress bar to full. completeProgress Here we can extend the to work out what the actual progress is. We do this by iterating through our view controllers and working out the progress based on where in the stack we currently are. ProgressViewUpdater We are nearly there! Just one more thing and we have a fully functioning progress view within our flow. More Default Implementations For our view controllers, we can make it really simple to pass the navigation controller the information we need. And guess what is coming next, more protocols! We can conform to our protocol and provide a cleaner interface for our view controllers within this flow. ProgressViewUpdater Then, this gives us the ability to programatically define within the implementation of this function, each view controller in our navigation stack, in the order they appear in. Ensure our view controllers conform to and we can simply call to update the progress view based on where we are in the flow. MainFormProgressViewUpdater updateProgress() If you wanted to have another flow within your application with a similar functionality, all you would need to do is create another protocol similar to and drop it in to your view controllers. MainFormProgressUpdater Note: Be sure to call it from _viewDidAppear_ to see the animation. Wrap up I had fun making this one! Do let me know what you think, or if you would do it any differently. And be sure to check out my for similar iOSy goodness. previous articles

Flow

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Making manual form input a tiny bit better

Too Long; Didn't Read

Coin Mentioned

Harry Bloom

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Making manual form input a tiny bit better

Too Long; Didn't Read

Coin Mentioned

Harry Bloom

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES