UISplitViewController Tutorial

In this post we will learn on how to use the iPad split view controller.

Note: This post was voted high by the members of iPhone by radix on the facebook group so I thank all of them for sharing their views.

Before beginning with this post i would request you to read about the split view controller from my earlier post first and then begin with this post.

Design View: Here’s a look at the final output that will be displayed to you.

Employee list

when the user selects the name of the employee by hitting the bar button titled event then he will get the list of the employee and when he selects a particular employee then the image of that particular employee will be displayed in the detail view (the one which is blank).

Selected Employee Image

You can change the title of the bar button from event to any name of your choice we shall discuss this as we continue with the tutorial.

Step 1: Open Xcode create a new project and this time select the SplitViewController template from the template section.

click next give your project an appropriate name and save your application. Now once this is done their will be two classes that will be added into your project by the xcode with the name RootViewController and the DetailViewController.

RootView and DetailView

RootViewController: This class is a subclass of the UITableViewController and will contain the list of the employees at run time. You can do all the manipulations that you usually do with the iPhone’s table view controller.

DetailViewController: This class is a subclass of the UIViewController and will contain an instance of the UIImageView class and the UILabel class in which you will see the image and the name of the employee selected from the RootViewController (table view)

Step 2: Select the RootViewController.h file and declare an object of the NSMutableArray class and initialize it in the RootViewController.m file

#import <UIKit/UIKit.h>

@class DetailViewController;

@interface RootViewController : UITableViewController {

NSMutableArray *_empName;

}

@property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;

@end

The initialization part in the RootViewController.m file

- (void)viewDidLoad

{

[super viewDidLoad];

self.clearsSelectionOnViewWillAppear = NO;

self.contentSizeForViewInPopover = CGSizeMake(320.0, 600.0);

_empName = [[NSMutableArray alloc]initWithObjects:@"Radix", @"Riki",@"Jigar",@"Prem",@"Shrikant",nil];

}
Now when you traverse inside this file (RootViewController.m) you will see some of the commonly used delegate and datasource methods of the UITableView class so please add in the code that you used to display a table with the iPhone (Refer this tutorial in case you need help). Once when this is done I would request you to directly run the application and when you do hit the event bar button present in the toolbar to get the view which looks something like this

Step 3: In the groups and file their will be a DetailView.xib file select that file and add the UIImageView instance and the UILabel instance into it, and create the corresponding IBOutlets for the UILabel instances inside the DetailViewController.h file and connect it accordingly. Once this step is done then I would like you to add in some images inside the application bundle of your choice that you might want to see when you hit the table view.

After this step I want you to create a property of NSNumber class inside the DetailViewController.h file and synthesize it inside the DetailViewController.m file. Here’s a quick look at the code present in the DetailViewController.h file

#import <UIKit/UIKit.h>

@interface DetailViewController : UIViewController <UIPopoverControllerDelegate, UISplitViewControllerDelegate> {

UIImageView *_empImageView;

NSNumber *_theindexNumber;

IBOutlet UILabel *empNameLabel;

}

@property (nonatomic,retain) NSNumber *_theindexNumber;

@property (nonatomic, retain) IBOutlet UIToolbar *toolbar;

@property (nonatomic, retain) id detailItem;

@property (nonatomic, retain) IBOutlet UILabel *detailDescriptionLabel;

@end

Synthesize the NSNumber property inside the DetailViewController.m file

#import "DetailViewController.h"

#import "RootViewController.h"

@interface DetailViewController ()

@property (nonatomic, retain) UIPopoverController *popoverController;

- (void)configureView;

@end

@implementation DetailViewController

@synthesize toolbar=_toolbar;

@synthesize _theindexNumber;

@synthesize detailItem=_detailItem;

@synthesize detailDescriptionLabel=_detailDescriptionLabel;

@synthesize popoverController=_myPopoverController;

Step 4: All the settings that we did in step 3 will now make sense, we have to show the image of the employee who will be selected from the list into the image view present in the DetailViewController and we know that if any row of the table view is selected then in that case the

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

delegate method gets triggered so inside the RootViewController.m file locate the did select method and add this piece of code their

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

//passing the row index that is selected by the user

detailViewController._theindexNumber = [NSNumber numberWithInt:indexPath.row];

//passing the employee name selected by the user

detailViewController.detailItem = [_empName objectAtIndex:indexPath.row];

}

The code is pretty much explained here via comments.

Note: The DetailViewController is already added in the RootViewController class have a look at the .h file of the RootViewController via forward class declaration methodology.

Now the last part that needs to be done is making use of this data inside the DetailViewController class so here’s what needs to be done

Inside the DetailViewController.m file there is a function called as the configure view so just add this piece of code their

- (void)configureView

{

// Update the user interface for the detail item.

switch ([_theindexNumber intValue]) {

case 0: