user3832583
user3832583

Reputation: 371

creating a step based view controller flow

enter image description here

So if you look at the picture provided. I am wondering what the best pattern would be to implement a flow like this. I could just string together a bunch of ViewControllers, but I feel like I am repeating myself way too much. I have tried making a reusable xib, but even still I end up having to update the step for every ViewController and add the content/input type. I at the very least don't repeat all the constraints in my storyboard.

So these are all common components of this screen. They would naturally hold different content depending on the step. I also have a back button. I have a factory for the different input types which will produce render custom views inside this xib. I was wondering if anyone has done a similar design and what they best way of implementing this is?

Note: I could share the code but it is extremely repetitive at the moment, and I also have a lot of storyboards/xibs so I figure it be a lot to share. The picture might be easier to comprehend.

Upvotes: 0

Views: 194

Answers (2)

Mike Taverne
Mike Taverne

Reputation: 9352

You can do this with a single view controller in a storyboard.

  1. Create a view controller class file (in my example it's called ViewController).
  2. Add a view controller to your storyboard and set its Custom Class name to the class you just created.
  3. Embed the view controller in a navigation controller (with the view controller selected in the storyboard, select Editor > Embed In > Navigation Controller).
  4. Create a button on the view controller in the storyboard.
  5. Create a segue from the button to the view controller -- yes, the same view controller that contains the button! To do this, control drag from the button to the view controller. Give the segue an identifier, for example "nextStep".

Every time the button is tapped, it will segue to a new instance of the same view controller. You can repeat as many times as you want. Because you are in a navigation controller, you can easily go backward.

Of course, to do anything interesting your view controller class will need to keep track of the step you are on, manage state, determine when you've reached the end, etc.

Here is a simple implementation of the view controller that increments the step number as you advance:

class ViewController: UIViewController {

    var stepNumber = 1

    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "Step \(stepNumber)"
    }
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "nextStep" {
            if let destination = segue.destination as? ViewController {
                destination.stepNumber = stepNumber + 1
            }
        }
    }
} 

Upvotes: 1

Scott Thompson
Scott Thompson

Reputation: 23701

Put your view controller template into an independent nib file. Create a custom subclass of UIViewController that uses that nib file and understands how to present the data from one step of your wizard. At runtime create an instance of your subclass and feed it the data for each step. You could do this all at once (e.g. so you can stack them into a UIPageView) or you could do one step at a time if you want to present them some other way.

Upvotes: 0

Related Questions