Split View Controller in iPad

Introduction

In this article I will create an Empty View application. Here I will implement a SplitViewcontroller for iPad Programmatically. Here I use a table view controller class and UIView controller class from cocoa touch -> Objective-C class. When we click on the RootViewContoller button it shows a split type table view on it. I will add two UIView Controller Classes.

To understand it we use the following.

Step 1

Open Xcode by double-clicking on it.

Step 2

Create a New XCode Project by clicking on it.

Step 3

Now Select Empty View Application and click on Next.

Step 4

Now provide your Product Name.

Step 5

Select the location where you want to save your project and click on Create. 

Step 6

Now we write the code, as in the following:

AppDelegate.h

//

// AppDelegate.h

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import <UIKit/UIKit.h>

@class RootViewController;

@interface AppDelegate : NSObject <UIApplicationDelegate> {

UIWindow *window;

UISplitViewController *splitViewController;

}

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UISplitViewController *splitViewController;

@end

AppDelegate.m

//

// AppDelegate.m

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import "AppDelegate.h"

#import "RootViewController.h"

@implementation AppDelegate

@synthesize window, splitViewController;

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

[window addSubview:splitViewController.view];

[window makeKeyAndVisible];

return YES;

}

- (void)dealloc {

[splitViewController release];

[window release];

[super dealloc];

}

@end


RootViewController.h

//

// RootViewController.h

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import <UIKit/UIKit.h>

@protocol SubstitutableDetailViewController

- (void)showRootPopoverButtonItem:(UIBarButtonItem *)barButtonItem;

- (void)invalidateRootPopoverButtonItem:(UIBarButtonItem *)barButtonItem;

@end

@interface RootViewController : UITableViewController <UISplitViewControllerDelegate> {

UISplitViewController *splitViewController;

UIPopoverController *popoverController;

UIBarButtonItem *rootPopoverButtonItem;

}

@property (nonatomic, assign) IBOutlet UISplitViewController *splitViewController;

@property (nonatomic, retain) UIPopoverController *popoverController;

@property (nonatomic, retain) UIBarButtonItem *rootPopoverButtonItem;

@end


RootViewController.m

//

// RootViewController.m

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import "RootViewController.h"

#import "FirstDetailViewController.h"

#import "SecondDetailViewController.h"

@implementation RootViewController

@synthesize popoverController, splitViewController, rootPopoverButtonItem;


#pragma mark -

#pragma mark View lifecycle

- (void)viewDidLoad {

[super viewDidLoad];

// Set the content size for the popover: there are just two rows in the table view, so set to rowHeight*2.

self.contentSizeForViewInPopover = CGSizeMake(310.0, self.tableView.rowHeight*2.0);

}

-(void) viewDidUnload {

[super viewDidUnload];

self.splitViewController = nil;

self.rootPopoverButtonItem = nil;

}

#pragma mark -

#pragma mark Rotation support

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

return YES;

}

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

// Keep references to the popover controller and the popover button, and tell the detail view controller to show the button.

barButtonItem.title = @"Root View Controller";

self.popoverController = pc;

self.rootPopoverButtonItem = barButtonItem;

UIViewController <SubstitutableDetailViewController> *detailViewController = [splitViewController.viewControllers objectAtIndex:1];

[detailViewController showRootPopoverButtonItem:rootPopoverButtonItem];

}

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

// Nil out references to the popover controller and the popover button, and tell the detail view controller to hide the button.

UIViewController <SubstitutableDetailViewController> *detailViewController = [splitViewController.viewControllers objectAtIndex:1];

[detailViewController invalidateRootPopoverButtonItem:rootPopoverButtonItem];

self.popoverController = nil;

self.rootPopoverButtonItem = nil;

}

#pragma mark -

#pragma mark Table view data source

- (NSInteger)tableView:(UITableView *)aTableView numberOfRowsInSection:(NSInteger)section {

// Two sections, one for each detail view controller.

return 2;

}

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

static NSString *CellIdentifier = @"RootViewControllerCellIdentifier";

// Dequeue or create a cell of the appropriate type.

UITableViewCell *cell = [self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

}

// Set appropriate labels for the cells.

if (indexPath.row == 0) {

cell.textLabel.text = @"First Detail View Controller";

}

else {

cell.textLabel.text = @"Second Detail View Controller";

}

return cell;

}

#pragma mark -

#pragma mark Table view selection

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

/*

Create and configure a new detail view controller appropriate for the selection.

*/

NSUInteger row = indexPath.row;

UIViewController <SubstitutableDetailViewController> *detailViewController = nil;

if (row == 0) {

FirstDetailViewController *newDetailViewController = [[FirstDetailViewController alloc] initWithNibName:@"FirstDetailView" bundle:nil];

detailViewController = newDetailViewController;

}

if (row == 1) {

SecondDetailViewController *newDetailViewController = [[SecondDetailViewController alloc] initWithNibName:@"SecondDetailView" bundle:nil];

detailViewController = newDetailViewController;

}

// Update the split view controller's view controllers array.

NSArray *viewControllers = [[NSArray alloc] initWithObjects:self.navigationController, detailViewController, nil];

splitViewController.viewControllers = viewControllers;

[viewControllers release];

// Dismiss the popover if it's present.

if (popoverController != nil) {

[popoverController dismissPopoverAnimated:YES];

}

// Configure the new view controller's popover button (after the view has been displayed and its toolbar/navigation bar has been created).

if (rootPopoverButtonItem != nil) {

[detailViewController showRootPopoverButtonItem:self.rootPopoverButtonItem];

}

[detailViewController release];

}

#pragma mark -

#pragma mark Memory management

- (void)dealloc {

[popoverController release];

[rootPopoverButtonItem release];

[super dealloc];

}

@end


FirstDetailViewController.h

//

// FirstDetailViewController.h

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import <UIKit/UIKit.h>

#import "RootViewController.h"

@interface FirstDetailViewController : UIViewController <SubstitutableDetailViewController> {

UIToolbar *toolbar;

}

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

@end


FirstDetailViewController.m

//

// FirstDetailViewController.m

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import "FirstDetailViewController.h"

@implementation FirstDetailViewController

@synthesize toolbar;

#pragma mark -

#pragma mark View lifecycle


- (void)viewDidUnload {

[super viewDidUnload];

self.toolbar = nil;

}

#pragma mark -

#pragma mark Managing the popover

- (void)showRootPopoverButtonItem:(UIBarButtonItem *)barButtonItem {

// Add the popover button to the toolbar.

NSMutableArray *itemsArray = [toolbar.items mutableCopy];

[itemsArray insertObject:barButtonItem atIndex:0];

[toolbar setItems:itemsArray animated:NO];

[itemsArray release];

}

- (void)invalidateRootPopoverButtonItem:(UIBarButtonItem *)barButtonItem {

// Remove the popover button from the toolbar.

NSMutableArray *itemsArray = [toolbar.items mutableCopy];

[itemsArray removeObject:barButtonItem];

[toolbar setItems:itemsArray animated:NO];

[itemsArray release];

}

#pragma mark -

#pragma mark Rotation support

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

return YES;

}

#pragma mark -

#pragma mark Memory management

- (void)dealloc {

[toolbar release];

[super dealloc];

}

@end


SecondDetailViewController.h

//

// SecondDetailViewController.h

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import <UIKit/UIKit.h>

#import "RootViewController.h"

@interface SecondDetailViewController : UIViewController <SubstitutableDetailViewController> {

UINavigationBar *navigationBar;

}

@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar;

@end


SecondDetailViewController.m

//

// SecondDetailViewController.m

// SplitViewControllerDemo

//

// Created by Sachin Bhardwaj on 18/12/12.

// Copyright (c) 2012 Sachin Bhardwaj. All rights reserved.

//

#import "SecondDetailViewController.h"

@implementation SecondDetailViewController

@synthesize navigationBar;

#pragma mark -

#pragma mark View lifecycle

-(void) viewDidUnload {

[super viewDidUnload];

self.navigationBar = nil;

}

#pragma mark -

#pragma mark Managing the popover

- (void)showRootPopoverButtonItem:(UIBarButtonItem *)barButtonItem {

// Add the popover button to the left navigation item.

[navigationBar.topItem setLeftBarButtonItem:barButtonItem animated:NO];

}

- (void)invalidateRootPopoverButtonItem:(UIBarButtonItem *)barButtonItem {

// Remove the popover button.

[navigationBar.topItem setLeftBarButtonItem:nil animated:NO];

}

#pragma mark -

#pragma mark Rotation support

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

return YES;

}

#pragma mark -

#pragma mark Memory management

- (void)dealloc {

[navigationBar release];

[super dealloc];

}

@end

Step 7

Finally we click on the Run button to show the output.

Step 8

Output 1 in iPad:

Output1-in-iPad.png

Output 2 in iPad:


Output2-in-iPad.png

Output 3 in iPad:

Output3-in-iPad.png