SplitView application in iPad

SplitView application in iPad
On April 21, 2010, in iPad Development, by Sushant
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.

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
@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
@interface DetailViewController : UIViewController {

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