Create a SplitViewController on the iPad

On the iPad you have more screen estate as on the iphone, so it wouldn't make sense to dispaly a large Table View. To make better use of that space you can create a UISplitViewController which displays a master and detail view at once. In this tutorial we will list some Top iOS Apps and display the icon's.

Open Xcode and create a new Master-Detail Application. For product name, use SplitViewControllerDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure iPad is selected in Devices, and that the Use Storyboards checkbox is deselected and Use Automatic Reference Counting checkbox is selected.

In the Scheme button, set the target to run on the iPad simulator instead of the iphone. Build and run, you should see an almost empty SplitViewController.

Change the Orientation to Portrait, and you will see only the detailViewController is displayed.

The are two files in the project template containing the layout:

  • MasterViewController - Table view controller on the left side of the split view controller on the iPad.
  • DetailViewController - Plain view controller on the right side of the split view controller on the iPad.

First, lets' change the User Interface from the DetailViewController. Go to DetailViewController.xib and delete the UILabel. Insert an imageView and make it a size of 250 by 250. Center the imageView and select it. At the bottom right of the Interface Builder press the align button and select "Horizontal Center in Container". Repeat, and select "Vertical Center in Container". This will keep the imageView centered when the device rotates.

Go to DetailViewController.h and add the following property to the @interface section.

@property (weak, nonatomic) IBOutlet UIImageView *iconImageView;

Select The Assistant Editor and show the DetailViewController.xib and DetailViewController.h file. Ctrl+Drag from the imageview to the property to connect them.

At the moment the SplitViewController doesn't contain any data, so let's make some arrays and fill the view controller with some data. In MasterViewController.m   declare the following properties in the interface section

@interface MasterViewController ()

@property (nonatomic, strong) NSArray *appNames;
@property (nonatomic, strong) NSArray *appIcons;


At this moment we need some images to fill the array with. Download the following zip file here and extract and import the files into the project. Of course you can also download the complete project from github.

Change the viewDidLoad method to

- (void)viewDidLoad 
[super viewDidLoad];

self.appNames = @[@"Whatsapp",@"Camera+",@"Angry Birds"];

self.appIcons = @[@"whatsapp-icon.jpeg",@"camera+-icon.jpeg",@"AngryBirds-icon.png"];

[self.tableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] animated:NO scrollPosition:UITableViewScrollPositionMiddle]];

The array are filled with the app and icon names. Next, change the tableView:numberOfRowsInSection to

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
return self.appNames.count;

Also, change tableView:selectForRowAtIndexPath method to

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

cell.textLabel.text = self.appNames[indexPath.row];

return cell;

This will display the app names into the table view. Next, change the tableView:didSelectRowAtIndexPath

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
NSString *iconFileName = self.appIcons[indexPath.row];

DetailViewController *detailViewController = self.detailViewController;
detailViewController.iconImageView.image = [UIImage imageNamed:iconFileName];

When a tableView cell is selected the image is loaded into the iconImageView property of our DetailViewController. We only need to change the following line from the initWithNibName:bundle method to give the table view a nice title.

self.title = NSLocalizedString(@"Top iOS Apps", @"Top iOS Apps");

Build and Run, select an App and the icon will be displayed.

Rotate the device to view only the DetailViewController.

You can download the source code of the SplitviewControllerDemo at the ioscreator repository on github.