SplitView Application In iPad

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

Comments 16

  1. 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.

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

  3. 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…

  4. 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…

  5. 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.

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

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

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

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

    Many thanks

  9. 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…

  10. 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

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

Leave a Reply

Your email address will not be published. Required fields are marked *