Monday, July 4, 2011

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:

            empNameLabel.text = [self.detailItem description];

            _empImageView.image = [UIImage imageNamed:@"Radix.jpg"];

            break;


        case 1:

            empNameLabel.text = [self.detailItem description];

            _empImageView.image = [UIImage imageNamed:@"Riki.jpg"];

            break;

        case 2:

            empNameLabel.text = [self.detailItem description];

            _empImageView.image = [UIImage imageNamed:@"jigar.jpg"];

            break;


        case 3:

            empNameLabel.text = [self.detailItem description];

            _empImageView.image = [UIImage imageNamed:@"prem.jpg"];

            break;


        case 4:

            empNameLabel.text = [self.detailItem description];

            _empImageView.image = [UIImage imageNamed:@"Shri.jpg"];

            break;


    }


}




Code Explanation: In the above code I am using a switch case block to change the image of the image view by making the usage of the row that is selected inside the RootViewController and the name of the employee is getting displayed in the label that we added. The configure view is called inside the method

-   (void)setDetailItem:(id)newDetailItem

which gets called whenever there is a change in the value of the detail item variable, 

Step 5: Run this application to get the output just like the image given below.

Employee List

Employee name: Riki
  
Employee name: Prem

I hope that this tutorial has helped you in working with the iPad split view controller, if you are having any sort of query then do let me know via comment or you may contact me via mails, my mail ID is given in the facebook badge above until then Happy iCoding and have a great Day.

5 comments:

  1. Isn't UISplitViewController a different one than UIPopOverController?

    ReplyDelete
  2. how to change the entire view controller instaed of detail view controller...

    ReplyDelete
  3. If possible please start from an empty template and move to a split-view app

    In that way users can get a better Idea of the code !

    ReplyDelete
  4. Hi Ravi,

    This is not UISplitViewController tutorial, this is UIPopOverController tutorial. please update the title name and provide UISplitViewController tutoria.

    Thanks,
    Amol

    ReplyDelete