SplitView application in iPad

This is the SplitView application. Split View application is applicable only for the iPad devices. We will see here how to use Split View in the application. We are using here UISplitViewController for displaying two side by side view controller.  Left side view controller presents a list of item and right side view controller  presents details of the selected item. So let see how it will be worked.

Step 1: Open the Xcode Create a new project using a Split View-base application template. Give the application name “SplitView”.

Figure 1: SplitView template

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: xpand classes and notice Interface Builder created the RootViewController and DetailViewController classes for you. Expand Resources and notice the template generated a separate nib, DetailView.xib, for the “SplitView”. (See the figure2)

Figure 2: Classes and Resources

Step 4: We need to add images in the Resources folder. Give the name of the images “ipod.jpg”,”mac-mini.jpg”,”macbook.jpg”,”macbook_pro.jpg”.

Step 5: Open the AppDelegate.m file, in the application  didFinishLaunchingWithOptions: method  allocated RootViewController and DetailViewController with the SplitViewController. So make the  following changes in the file:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

// Override point for customization after app launch

// Add the split view controller's view to the window and display.

rootViewController = [[RootViewController alloc] initWithStyle:UITableViewStylePlain];
UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:rootViewController];

detailViewController = [[DetailViewController alloc] initWithNibName:@"DetailView" bundle:nil];
rootViewController.detailViewController = detailViewController;

splitViewController = [[UISplitViewController alloc] init];
splitViewController.viewControllers = [NSArray arrayWithObjects:navigationController, detailViewController, nil];
splitViewController.delegate = detailViewController;

[window addSubview:splitViewController.view];
[window makeKeyAndVisible];

return YES;
}

Step 6: We need to add list of data in the Property list for this application. So add first property list in the Resources folder. Once it’s added to the project ,single click .plist its just look like (below figure 3).

Figure 3: pList

Step 7: Open the RootViewController.h file and added NSMutableArray, basically RootViewController handling left view of the SplitView simply it is showing a table view. So make the following changes in the file:

#import <uikit/UIKit.h>

@class DetailViewController;

@interface RootViewController : UITableViewController {
DetailViewController *detailViewController;

NSMutableArray * phone;
}

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

Step 8: Now open the RootViewController.m file and make the following changes in the file:


- (CGSize)contentSizeForViewInPopoverView {
return CGSizeMake(320.0, 600.0);
}

- (void)viewDidLoad {
[super viewDidLoad];
self.phone = [[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"phone" ofType:@"plist"]] retain];

- (NSInteger)tableView:(UITableView *)aTableView numberOfRowsInSection:(NSInteger)section {
// Return the number of rows in the section.
return [phone count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"CellIdentifier";

// Dequeue or create a cell of the appropriate type.
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
cell.accessoryType = UITableViewCellAccessoryNone;
}

// Configure the cell.
cell.textLabel.text = [self.phone objectAtIndex:indexPath.row];
return cell;
}

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

/*
When a row is selected, set the detail view controller's detail item to the item associated with the selected row.
*/
detailViewController.detailItem = [self.phone objectAtIndex:indexPath.row];
}

}

Step 9: In the DetailViewController.h file, we have added UIImageView for displaying image in the right pane and added navigationBar. DetailViewController handle the right pane of the SplitView. So make the following changes in the file:

#import <uikit/UIKit.h>

@interface DetailViewController : UIViewController <uipopoverControllerDelegate, UISplitViewControllerDelegate> {

   UIPopoverController *popoverController;
   UINavigationBar *navigationBar;
   id detailItem;
   IBOutlet UIImageView * phoneView;
}

@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar;
@property (nonatomic, retain) id detailItem;
@property (nonatomic, retain) IBOutlet UIImageView * phoneView;

Step 10: Double click the DetailView.xib file and open it to the Interface Builder. First drag the NavigationBar from the library and place it top portion of the view window. Next drag the ImageView from the library and place it to the view window. Now connect the File’s Owner icon to View icon and select the view. Next select the File’s Owner icon and bring up connection inspector connect navigationBar to the NavigationBar (See figure4) and connect the phoneView to the ImageView (See figure5). Now save the DetailView.xib file , close it and go back to the Xcode.

Figure 4: Connection between navigationBar to the NavigationBar

Figure 4: Connection between phoneView to the ImageView

Step 11: Open the DetailView.m file and make the following changes:

- (void)setDetailItem:(id)newDetailItem {
if (detailItem != newDetailItem) {
[detailItem release];
detailItem = [newDetailItem retain];

navigationBar.topItem.title = detailItem;
NSString * phoneimage = [NSString stringWithFormat:@"%@.jpg",detailItem];
[self.phoneView setImage:[UIImage imageNamed:phoneimage]];
}

if (popoverController != nil) {
[popoverController dismissPopoverAnimated:YES];
}
}

- (void)splitViewController: (UISplitViewController*)svc willHideViewController:(UIViewController *)aViewController withBarButtonItem:(UIBarButtonItem*)barButtonItem forPopoverController: (UIPopoverController*)pc {

barButtonItem.title = @"Phone List";
[navigationBar.topItem setLeftBarButtonItem:barButtonItem animated:YES];
self.popoverController = pc;

}

- (void)splitViewController: (UISplitViewController*)svc willShowViewController:(UIViewController *)aViewController invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem {

[navigationBar.topItem setLeftBarButtonItem:nil animated:YES];
self.popoverController = nil;

}

Step 12: Now compile and run the application in the Simulator.

Figure 5: In portrait mode

Figure 6: In landscape mode

You can Download SourceCode from here SplitView

  • Rick
  • April 21, 2010
  • iOS

About the Author

Leave a Reply 16 comments

C.Carlson - April 26, 2010 Reply

Thanks very much for sharing your knowledge and experience !

If I wanted some buttons in the rightveiw xib, and these buttons would swap views within the rightviewcontroller (independent from the mutable table list), how would I code the IBAction for such a button.

alex - June 28, 2010 Reply

thanks in advance but were is the source code for this tutorial ,thanks

Sushant - June 28, 2010 Reply

Thanks for your comment!!! I have uploaded source code,you can download it now.

Alex - June 28, 2010 Reply

Thank you

alex - June 29, 2010 Reply

thanks again

Fábio - July 7, 2010 Reply

Thanks for tutorial!! It is very clear and easy to understand!!

The only concern is about the changes in the source code, maybe the changes could be in bold !!

Jassi - July 14, 2010 Reply

How to implement SplitViewController on second level.

Actually what i want is to launch app with a login page and after login. I need SplitViewController.

Please help…

Jassi - July 14, 2010 Reply

How to implement SplitViewController on second level.

Actually what i want is to launch app with a login page and after login. I need SplitViewController.

Please help me…

loosy - July 16, 2010 Reply

Great Tutorial

I want to show UITableViewCells on Right side and Detailed View on left side when iPad in landscape mode.

It would show exactly same UITableViewCells in portrait mode as in this tutorial.
I need help. Thanks in advance.

lak - September 22, 2010 Reply

i got basic understanding from this tutorial only…

i need to show webview on right side so how to show it ,any sample code olease

Ravi Kiran - January 12, 2011 Reply

splitViewController.viewControllers = [NSArray arrayWithObjects:navigationController, detailViewController, nil];

in above just change like this
splitViewController.viewControllers = [NSArray arrayWithObjects:detailViewController, navigationController, nil];

Mikael - March 3, 2011 Reply

hi cool tutorial but what about if you could estens the tutorial with an example of Playing different .mp4 movies instead in the splitview.

iCiccioMAC - June 19, 2011 Reply

I need a spltview with a uiwebview on right detailview of each record of plist, one URL please tell me an example

Many thanks

eagle - June 25, 2011 Reply

How to implement SplitViewController on second level.

Actually what i want is to launch app with a login page and after login. I need SplitViewController.

Please help me…

vinod - June 30, 2011 Reply

Thanks I am satisfy with above code for right image view. but I want to split a new view which include Text Boxes, level or navigational table. If you have any solution so please help me. Thanks

vijay - April 25, 2012 Reply

– (void)setDetailItem:(id)newDetailItem is not being called when i remove the detailView and add a newDetailView….any help???

Leave a Reply: