By the end of this article you will have completed a really fun project, while also learning how navigation works in iOS. Start by creating a new Single View Application project in Xcode. Go to the storyboard and select the view controller. On the Xcode menu, go to Editor → Embed In → Navigation Controller. You will notice now the view has a navigation bar. Inside the view drag a text view and two buttons. Set the necessary constraints. Write You’re on the Home screen. What do you want to do next? in the text view. Name one of the buttons Go to scene 2 and the other Go to scene 3.
Now copy and paste four times our view controller so we can preserve its elements. To copy an entire view controller, with your mouse or touchpad drag a rectangle around it in the Storyboard so everything is selected, then just press command-c followed by command-v. The new view controller will be pasted on top of the old one, so just drag it aside to see them both. Let’s give names to all the scenes in the Attributes Inspector → Title so they will now show as scene 1, scene 2, scene 3, scene 4, scene 5.
Next we need to add Triggered Segues for the two buttons on the home screen. To do this, control + click on the first button in the home scene (scene 1) and drag a line from Triggered Segue → action to scene 2. Do the same for the second button to scene 3. Now go to scene 2 and delete the two buttons. In the text area write You’re on the 2nd screen. This is an end of a road. Then go to scene 3 and write in the text area You’re on the 3rd screen. What do you want to do next? Name the two buttons Go to scene 4 and Go to scene 5. Add Triggered Segues for the two buttons so they will present scene 4 and scene 5. The text in the text view for these last two scenes will say You’re on the 4th screen. This is an end of a road. and You’re on the 5th screen. This is an end of a road. respectively. The final storyboard should look like this:
So why did we do all this, you might be asking now… because this could be the beginning of a storyboard for a complex adventure game. As you might have already thought about, the message in each scene could give you a clue, and then present you with two choices that could determine how the game continues/ends. How easy and fun is to make this type of game only with a storyboard, right? There is one more thing we need to add to our scenes to make the game complete, a Start Over button. Since all our scenes are of type ViewController because we cloned them, we can simply add the button programmatically like this:
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Start Over", style: .Plain, target: self, action: "startOver")
}
func startOver() {
if let navigationController = self.navigationController {
navigationController.popToRootViewControllerAnimated(true)
}
}
}What we did here was to add a button at the right side end of the navigation bar and make it respond to an action method named startOver. This method simply checks if we there is a navigation controller and dismiss the view controllers recursively, one by one, until we reach the root view controller which in our case is the home scene (scene 1). To prove that all the view controllers are dismissed we can write a simple debugging method like this:
deinit {
print("deallocated")
}If you run the project and navigate all the way to scene 4 or scene 5 and then click the Start Over button, you will notice that deallocated is printed out twice, because the scene 4/5 is dismissed first, and then scene 3 is dismissed before reaching the home scene (scene 1). You now have the barebones for creating a great adventure game with lots and lots of scenes. To make the app more interesting, you could add some images beside the existing text. To make it even more interesting you could use a table view on the home scene to present a set of different adventures, instead of just this one.
Until next time!