Navigate with segues

The aim here will be to show you how to navigate with segues a through an IOS storyboard (forwards, backwards, from code and setting a manual segue). This is my first IOS blog post as I’m working on an app for work. The next tutorial will be on how to send through information to another view controller through the segue. Open up a single page application.

Make sure to choose storyboards.

So I will create a few view controllers now, connect them up with segues so that we can move through them with buttons. I will show you with segues how to move forward and backwards through the application. I will also show you how to trigger segues programmatically.

A “push” Segue only works if managed through a navigation view controller. So add a navigation view controller to the storyboard and a couple view controllers. See the picture, I also added some buttons and labels. Now wire up everything so we can move forward through all the view controllers. This done as follows:

• Select the Navigation View Controller, hold down “ctrl” and drag over to the next view controller. A dialog will show up, choose “root view controller” under “Relationship Segue” as in the picture.
• Select the button in the first view controller (view controller 1), hold down “ctrl” and drag over to view controller 2. A dialog will show up, choose “push” under “segue” as in the picture.
• Do this to the next few view controllers, wire them up to the next view controller. Should look like the picture below.

Run the application and you’ll move from view controller to the next. Thanks to the navigation view controller you can go back easily with the back button. Cool so thanks to storyboards you can have a very simple app without touching code. Now lets add a popup window opening from view controller 2. That is to show some extra information and will not be part of the navigation view controller. Here are the steps:

• Add another button called “popup” to view controller 2.
• Add another view controller with a “go back” button.
• Wire up the popup button to the new view controller just like we did previously (hold “ctrl” and drag). Except choose “modal” under the “segue” dialog.

Run the application and you will see the popup view will show without the navigation bar when you tap “popup”. Now we need to get back from the popup. We don’t want to wire another modal segue to view controller 2 because that would be adding another view on top and not really going back. You could use this simple snippet in the button click to close the controller.

[self dismissViewControllerAnimated:YES completion:nil];

However if we wanted to send information back from the controller we would have problems. So we want to use a segue to go back, this is called unwinding the segue. So don’t add this code. Now have to get some code going. So we need to add a view controller class to the view controllers in play, which are the modal popup and view controller 2 (RDModalViewController and RDModalViewController). See the pictures.

Back to the unwind segue, add an IBAction to the to the RDModalViewController.h.

#import <UIKit/UIKit.h>

@interface RDTwoViewController : UIViewController

- (IBAction)backFromModal:(UIStoryboardSegue *)segue;

@end

Then in RDTwoViewController.m we need to add what will happen after we call ‘backFromModal’. It could be a reload function or display something. Our function will be empty right now (see next tutorial for passing arguments). Add the this code to RDTwoViewController.m before the @end.

- (IBAction)backFromModal:(UIStoryboardSegue *)segue{
    NSLog(@"We back from modal popup!");
}

This will be what you can attach to when you unwind the segue (tap ‘go back’). To attach the ‘go back’ button do the following in the Storyboard:

• Select the button hold ‘ctrl’ and drag towards the green exit icon, a dialog should popup and select your IBAction ‘backFromModal’. See picture below.

Run and you should see the modal popup open and close without affecting the navigation view controller. Cool, finally let’s take this method a bit further and unwind back to any view controller that is attached to the navigation view controller. Add the following buttons to the last view controller (view controller 4): ‘go back’, ‘go back to 2’, ‘go back to 1’, ‘go back to 1’. Like the previous example, add IBAction receivers to each view controllers h and m files. Example in RDOneViewController.h

    - (IBAction)backToOne:(UIStoryboardSegue *)segue;

and in RDOneViewController.m

    - (IBAction)backToOne:(UIStoryboardSegue *)segue{
        NSLog(@"back to 1 from vc 4");
    }

Then again wire up the segue, ‘ctrl’ drag down to exit and select the ‘backToOne’ action. Picture below.

Add the rest of the connections and code for the other buttons. Now if you run the application you will be able to move around the storyboard with these buttons.