iOS 5 Simple Master-Detail View Application With Storyboard Template Example

Part of the iOS Category.

I’m building an iPad application to work with my software partnership Newbound, Inc’s., software library. While using the new Xcode 4.2 Master-Detail Application Template (i.e., SplitView Controller) for iOS 5 using Storyboard I encountered the need for some simple help. After spending a lot of time looking on the Internet for answers to the simple question, “How do I start to develop on this new template using Storyboard?“, I found that no simple specific explanation covered the topic.

The examples I found, even those referring to the Xcode 4.2 iOS 5 the “SplitView Controller” template did not use Storyboard. Instead they skipped back to xib’s and the previous way of creating SplitViews. This was not what I was looking for.

So I decided to figure out the steps to use the new approach with Storyboard. I achieved that goal and then decided others might like to know the same easy steps. Here is the tutorial on how to get started.

First start up Xcode 4.2 after installing iOS 5. Choose New Project from the File Menu. Then select “Master-Detail Application” and click “Next“.

You’ll be given another set of options to set. Use these settings below to be in sync with the example code for this tutorial I provide. Click “Next” when you’ve done that.

Now you need to decide where to store this project. I have a “Developer” folder in my Home folder for my programming efforts. This is where I stored this project. Click “Create“.

Now we are ready to build the “Simple SplitView Controller Example” application.

Fortunately the template has setup the majority of work for us. The Storyboard User Interface only needs two changes to make it work with the forthcoming implentation.

First click on the Storyboard item in Xcode’s Navigation column, scroll over and take a look at the Table View scene. Make sure the Table View is scaled to full size by clicking the “+” button at the bottom right corner of the Storyboard pane. Note: You can’t make changes in Storyboard unless the scenes are full size.

The Table View Cell is in its default template setting as shown below. Notice the two regions highlighted in red. We need to change these settings.

The next image shows the changes we need to make. Click in the green highlighted Table View region. Then make the change from the popup menu shown highlighted in red.

Now looking at the image below, click the yellow highlighted region. This is the “Cell” that holds the information we want to display. We want to change the red highlighted parts to reflect the settings shown.

Once those Storyboard changes are made and verified we can move on to the Xcode 4.2 iOS 5 Objective-C code changes required to complete this example application. There aren’t too many and they are all in MasterViewController.m. :-)

The first change is to MasterViewController.h by entering the information highlighted in red. Click here to see a full size version in a new window.

Next make the entries to the viewDidLoad method shown in red highlight. Click here to see a full size version in a new window.

The rest of the entries take place all at once inside the red highlighted rectangle. Enter them after the last uncommented method block. They will appear above the “#pragma mark – Commented Out” block.

Click here to see a full size version in a new window.

Now all you need to “Run” the application and see it at work.

If you have any problems just review your steps. ;-)

I have included the Xcode 4.2 iOS 5 project here just in case you want to examine and run the completed application using the iPad Simulator. Use the Simulator’s Hardware Menu to change the orientation as needed. This project was completed using the same above steps.

Did you like this? Share it:

About Don Larson

Using computer technology since June 1980.
This entry was posted in Education, iOS, iOS Tutorials, Native Apps, Technology. Bookmark the permalink.