XCode Tutorial Practice 3: Storyboards, MapKit, View Navigation

Updated Oct 4 2013: This tutorial is compatible with XCode 5 AND XCode 4!

We’re taking a practical approach to learning iOS programming. This means lots of hands on work and practice!
In order to benefit the most from these lessons, you should open XCode and try to follow along.

This is part 8 of the lesson plan. Click here for the entire Learning Plan.

Click here for the coffee beans image used in the demo

What are Storyboards?

In Xcode 5, the project uses storyboards automatically. If you’re using Xcode 4, however, you have to explicitly choose to use them in the new project settings dialog window.

We’ve already been using storyboards in the last few practice demos but if we never talked about them explicitly, then here it is: Storyboards are a way to visually design your user interface, app flow and transitions from view to view. I’m sure you’ve realized that for yourself already! 🙂

How to Use Storyboards

Let’s create a brand new XCode single-view project and make sure that the “Use Storyboard” option is enabled. See below

Note: Xcode 5 users will automatically be using storyboards. The screenshots in this tutorial were taken with Xcode 4 and storyboards but after this initial project settings dialog, Xcode 5 users will find that it’s exactly the same!

XCode Tutorial New Project Use Storyboards Option

If you forgot what all of the project creation options mean, please refer back to the lesson where we created our first XCode project together.

When your XCode project is created, you’ll have a Storyboard file.

XCode Tutorial Storyboard Interface

Click on that file now and your Editor Area will turn into the Interface Builder view for storyboards.

Creating a Navigation Controller

We’ll explain what a navigation controller is in the next lesson when we do a recap. For now, click on the ViewController and then go up to the Editor Menu and choose “Embed in…” Navigation Controller.

XCode Storyboards Embed ViewController into NavigtationViewController

If your Navigation Controller and View Controller are overlapping, you can double click an empty space in the Storyboard to zoom out and then readjust the views. Note: In the zoomed out view, you won’t be able to drag any UIElements from the Library Pane onto the view

XCode Zoomed Out Storyboard View

Adding Another View Controller

Since our default single view application comes with a ViewController and view, it makes sense that in order to have a second view, we would need a second ViewController and View right?

Right! So let’s search for ViewController in the Library Pane and click and drag it into your Storyboard.

XCode Storyboard Adding a New ViewController

Now you have two views and view controllers!

However, because the ViewController we dragged onto the Storyboard has an auto generated code behind, let’s create our own UIViewController class and then tell Interface Builder that it should use the one we created instead.

So right click on the root folder and select “New File…”, “Objective-C Class”, then in the create file dialog, type in “MapViewController” and in the subclass box, put in UIViewController.

I’ll explain in the recap what subclassing means.

XCode Create New UIViewController

Now go to the Storyboard and select the second Viewcontroller than you had dragged in. In the Properties inspector, there’s a tab with a field called “Custom Class” that will let you select the “MapViewController” that we just created. Select it.

XCode Storyboard Use a custom class for your ViewController

Now this ViewController and View represented by the Storyboard will be an instance of the MapViewController class.

All you have to do is add the transition from one ViewController to the next.

Navigating Between Views

Storyboards make this part really easy.

In your first view, add a UIButton by searching for it in the Library pane and dragging the button onto the view.
Note: You won’t be able to add UIElements into views if you’re in the zoomed out view. Double click in an empty area of the Storyboard to zoom back in.

After you’ve added the button to the first ViewController, hold down the control key on your keyboard and click and drag a line from the button to the second ViewController.

XCode Storyboard Transition From One ViewController To Another ViewController

When you release your mouse, a small context menu will popup asking you how you want to transition. Choose “Push” for now (We’ll explore the other options in the recap lesson).

XCode Storyboard Transition Type Context Menu

You’ve just created a Segue (pronounced “seg-way”) between the Views!

Run your app and navigate between the two views!

Model View Controller Pattern In Action

Remember in the last recap, we talked about the model-view-controller pattern.

In this demo, let’s put that into action!

We’ll start by creating a new class.

Right click the root folder in your File Navigator and choose “New File…”, “Objective-C Class” from the context menu.

In the new file creation dialog, name it “Location” and in the Subclass field, make sure it says “NSObject”.

This class will represent a physical location.

XCode Create Location Class

Next we’re going to create a class to be our model and it will be in charge of supplying our ViewControllers the data that the our Views will display.

Once again, right click the root folder in your File Navigator and choose “New File…”, “Objective-C Class”.

This time you’ll name it “LocationDataController” and make sure that the Subclass field says “NSObject”.

XCode Create LocationDataController Class

Working on Location Class

Since the location class is going to represent a physical location, let’s give it some properties to store information that a location would have.

Open up Location.h and type out the following properties (If you need a refresher, check the last tutorial on properties).

Next, we’re going to LocationDataController.h and add the following method (If you need a refresher on methods, check the last tutorial on how to declare and use methods):

And then in LocationDataController.m, we’re going to implement that method like below:

This method will now return a hardcoded location object. “Hardcoded” is just a term that means the data is not coming from any data source, it’s just coded in and will always be the same. The opposite of “hardcoded” is a term we use called “dynamic” which means that the data could be anything.

Showing Data From The Model

Now, let’s make our initial ViewController display data from our model.
Go to the storyboard and add a UILabel and UIImageView to the initial view.

Adding a UILabel and UIImageView to the view

We’re going to want to resize the UILabel to accommodate a few lines and furthermore, to make sure the address wraps set “Lines” to 0.

Setting UILabel Properties For Multi-Line Label

Now that we have the UIElements in place, you’ll want to expose them as properties to the ViewController.

We’ve done this before with XIB files using the dual view Assistant Editor and it’s no different with Storyboards (if you forgot how to do this, check this tutorial).
So click the first ViewController in the Storyboard, click the “Assistant Editor” button in the upper right hand corner to go into dual view.

On the left pane, you should have the storyboard and on the right pane you should have ViewController.h.

Now hold down control and click and drag from the UILabel to the right hand side.
Name the property “addressLabel”.

Now do the same for the UIImageView and call it “photoImageView”.

Creating IBOutlet Properties in our Storyboard

Now we’re ready to use the data to set the UIElements.

Go to ViewController.m and at the top, import the LocationDataController.h and Location.h file.
Declare a method called “viewDidAppear” and in it, let’s create a new instance of LocationDataController, retrieve the data and set the properties of the UIElements.

In order for XCode to find the photo, you’ll have to include the photo below in your XCode project.
Right click and use Save As to save the image to your project directory.

Coffee Beans

Then drag and drop the image into the File Navigator area of your XCode project and click “Finish” in the dialog that pops up.

Run the app now and you should see this on your screen!

XCode Simulator Philz Coffee

Adding a Map

In the second view we’ll add a map, so go back to the storyboard and in the Library Pane, search for MapView.
Click and drag that onto the second View.

XCode Storyboard Add MapView

We also need to expose the MapView to the MapViewController as a property so that the MapViewController will be able to reference and call the methods or set the properties of the MapView element.

Following the same procedure as above, open up dual view and control-click drag the MapView UIElement to the right pane where MapViewcontroller.h is, and name the property “mapView”.

Adding the MapKit Framework
We need additional code libraries known as frameworks to add mapping functionality to our app.

Go to the project node and the Editor Area will show you the Project Settings.

Click on the app you want to add frameworks for and then click the Summary tab.
For Xcode 5 users, its the General tab.

XCode Adding Frameworks

Open up the “Linked Libraries and Frameworks” section and click the little “+” icon to bring up a list of frameworks you can add.
Search and add MapKit.

XCode Adding The MapKit Framework

Now you should see them in your File Navigator like this (I usually drag mine into the Frameworks folder):
For Xcode 5 users, its automatically added into the Frameworks folder 🙂

XCode The MapKit Framework In Your File Navigator

Finally, go back to MapViewController.h and import the MapKit header file.
You should end up with the below in MapViewController.h:

Setting The Map Location

Now go to MapViewController.h and in the “viewDidAppear” method, we’re going to move the map to the location of the point of interest by calling a special method of the map and passing in the latitude and longitude of our desired location.

But first at the top of MapViewController.m, import the Location and LocationDataController class headers (right under “#import MapViewController.h”

Type out a “viewDidAppear” method like below and inside of it, get the location from our LocationDataController class and move the map to the vicinity of the point of interest.

After doing that, run your project and you should be able to navigate between the two views and see the address and photo in one and a map of the point of interest in the other view.

iPhone Simulator Showing MapView

Click here to go to the next lesson now!

Frequently Asked Questions

If you have a question related to this tutorial or need me to clarify something, please ask in the comments below and I’ll update this FAQ section for everyone’s benefit.