iPad for iPhone Developers 101 in iOS 6: UISplitView Tutorial

Let's Display a List of Monsters in a Split View!

Let's Display a List of Monsters in a Split View!

Update 3/7/2013: Fully updated for iOS 6 (original post by Ray Wenderlich, update by Ellen Shapiro).

This is the first part of a three-part series to help get iPhone Developers up-to-speed with iPad development by first focusing on three of the most useful classes: UISplitView, UIPopoverController, and Custom Input Views. (Jump to Part 2 or Part 3 in the series.)

In this series, you’ll make an iPad app from scratch that makes use of all of the three most useful basic capabilities. First, the app will display a list of monsters from one of Ray’s Cocos2D games in a split view. Then, you’ll change the color of a label using a popover view. Finally, you’ll be able to change a monster’s weapon by using a custom input view.

By the end, you’ll have a good handle of some of the most important features of iPad development and will be able to hit the ground running!

Adding a Split View

In iPad development, it would rarely make sense to have a full-screen UITableView like you do so often in iPhone programming – there’s just too much space. To make better use of that space, the UISplitViewContoller comes to the rescue.

The Split View lets you carve up the iPad screen into two sections and display a view controller in each side. It’s typically used to display navigation on the left hand side, and a detail view on the right hand side.

So let’s start making this!

Starting From Scratch

Although you could use the “Master-Detail Application” template as a starting point, you’re going to start from scratch and pick the “Empty View Application” template. This is so you can get a better understanding of exactly how the UISplitView works. This knowledge will be helpful as you continue to use it in future projects (even if you choose the Master-Detail template in the future to save time!)

So create a new Project, and choose the iOS\Application\Empty Application template, and name the project MathMonsters. Choose iPad in the Product dropdown – Universal Apps is a topic for a later tutorial. Finally, make sure Use Automatic Reference Counting is checked, and the others are unchecked, and finish creating the project.

You can go ahead and compile and run if you want, but all you’ll see is a blank screen at this point. You’ll want to create a Storyboard file – go to File\New\File… and select the iOS\User Interface\Storyboard template.

Select iPad as the Device Family, and name this Storyboard MainStoryboard_iPad.storyboard.

Next, select your project in the Project Navigator and scroll to the iPad Deployment Info section. Then in the Main Storyboard entry, enter the name of your Storyboard: MainStoryboard_iPad.

Open MainStoryboard_iPad.storyboard and drag a SplitViewController into the empty storyboard:

This will add several elements to your storyboard:

• A Split View Controller. This is the root view of your application – the split view that will contain the entire rest of the app. One helpful hint: If you go to the Attributes Inspector and set Simulated Metrics > Orientation to Landscape, it will actually look like a SplitViewController:



• A Navigation Controller. This represents the UINavigationController that will be the root view of your Master View Controller (ie, the left pane of the SplitView). If you look in the Split View Controller, you’ll see the NavigationController has a Relationship Segue of “master view controller”. This allows you to create an entire navigation hierarchy in the Master View Controller without needing to affect the Detail View Controller at all.
• A Table View Controller Root View Controller. This is the rootViewController of the UINavigationController represented by the Navigation Controller. This will eventually be the view controller with the list of monsters.
• A View Controller. This will eventually display all the details of the monsters. If you look in the Split View Controller, you’ll see the View Controller has a Relationship Segue of “detail view controller”.

One final step before you can see this working in your app. Open AppDelegate.m and replace application:didFinishLaunchingWithOptions: with the following:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    return YES;
}

Here you removed the placeholder code the template added to create an empty UIWindow. You don’t need this anymore because you configured your app to use a Storyboard instead.

Build and run, and rotate your simulator to landscape. You should see an empty split view controller:

You’re going to want to have your own view controllers inside of here instead of these default ones, so let’s get started creating those.

Creating Custom View Controllers

You’re going to make two view controller placeholders to put inside your split view – a table view controller for the left hand side, and a “plain” view controller for the right hand side. Let’s start with the table view controller.

Go to File\New\File… and choose the iOS\Cocoa Touch\Objective-C class template. Name the class LeftViewController, make it a subclass of UITableViewController, and make sure both checkboxes are unchecked. Click Next and then Create.

Open LeftViewController.m, scroll down to numberOfSectionsInTableView: and replace the implementation as follows:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

Then scroll down to tableView:numberOfRowsInSection: and replace the implementation with the following:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 10;
}

This way, you’ll just have 10 empty rows to look at when you test this thing out later.

Open MainStoryboard_iPad.storyboard and select the Table View Controller. Change the Class under CustomClass to LeftViewController using the Identity Inspector (3rd tab):

In addition, you need to make sure the Prototype Cell in the Table View is given a reuse identifier, or it will cause a crash when the Storyboard tries to load. Within the Left View Controller, select the Prototype Cell and then change the Identifier to “Cell” (which is already set as the default for UITableViewController subclasses in code), and the cell Style to “Basic”.

Now, you’ll create the View Controller for the right side. Go to File\New\File… and choose the iOS\CocoaTouch\Objective-C class template. Name the class RightViewController, make it a subclass of UIViewController, and make sure both checkboxes are unchecked. Click Next and then Create.

Open MainStoryboard_iPad.storyboard, and in the generic View Controller, select the View Controller object. Change the Class under CustomClass to RightViewController:

Then drag a label into the middle, and pin it to the Horizontal and Vertical centers of the container with AutoLayout.

Change the text of the label to say say “Hello, World!” or something similar so you know it’s working when you test it out later. Note that if AutoLayout insists on pinning the width to something fixed that truncates what you’ve added, you can change the priority of that constraint to something less than 1000, and you should then be able to delete that constraint.

Build and run to try this out, and at this point you should see your custom view controllers: