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:

 

 

 

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:

 

 

 

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

 

 

 

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:

 

 

 

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:

 

 

 

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

Leave a Comment:

16 comments
C.Carlson says April 26, 2010

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.

Reply
alex says June 28, 2010

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

Reply
Sushant says June 28, 2010

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

Reply
Alex says June 28, 2010

Thank you

Reply
alex says June 29, 2010

thanks again

Reply
Fábio says July 7, 2010

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 !!

Reply
Jassi says July 14, 2010

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…

Reply
Jassi says July 14, 2010

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…

Reply
loosy says July 16, 2010

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.

Reply
lak says September 22, 2010

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

Reply
Ravi Kiran says January 12, 2011

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

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

Reply
Mikael says March 3, 2011

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

Reply
iCiccioMAC says June 19, 2011

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

Many thanks

Reply
eagle says June 25, 2011

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…

Reply
vinod says June 30, 2011

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

Reply
vijay says April 25, 2012

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

Reply
Add Your Reply