Custom Split View for iOS

Hi Guys,

This tutorial explains you how to create a custom split view controller in iOS. Default UISplitViewController will hides some part of Details part when we see Master view in portrait mode.

I got some requirement in one of my project to show Master and Detail views completely in both portrait and landscape modes. So, I have googled some of the technical tutorials about custom split view, got inspiration and came up with a custom split view controller, which we are going to discuss now. It will display both Master and Detail views in portrait and landscape modes without hiding any content.

NOTE : From iOS 5.0 there is a new delegate method - (BOOL)splitViewController:(UISplitViewController *)svc shouldHideViewController:(UIViewController *)vc inOrientation:(UIInterfaceOrientation)orientation added to UISplitViewControllerDelegate.
By implementing this delegate method we can make both Master and Detail views appear in both landscape and portrait modes. The reason I went for custom split view controller is to have provision  for customization.

Okay, here I start. Lets create a empty application.

Give product name and select ARC.

Okay, now create a subclass of UIViewController called MLKViewController. I have a habit of creating a subclass of UIViewController which will be super class for all my ViewControllers present in my project. I will keep all common code there.

MLKViewController implementation :

Now, create Master View. Master View contains a table view with 10 rows. If we select a particular row in master view that corresponding row details will be displayed in detail row.

MasterViewController implementation :

Here is the view hierarchy for Master View :

Create Detail View. Detail View will just have a UILabel which displays the contents of the selected row in Master View.

DetailViewController implementation :

Here is the view hierarchy for Master View :

Here comes the actual piece. Creating our custom Split View Controller. This class has a initializer method which accepts two View Controllers.

Implementation of MLKSplitViewController :

I am not using any xib for our split view. I am loading the view programmatically by overriding "loadView" method. You can add your split view customization code here.  I have overridden other View Controller life cycle methods too.

I have overridden methods related to Orientation.

Hmmmm!!!! here is the actual layout code. This method takes care of laying out master view and detail view on split view. I have applied simple mathematics and its very easy to understand.

In AppDelegate, create split view controller, corresponding view controllers and hook it up with the window.

 Ok. Now we will run and see the actual output :

I hope you guys have enjoyed the tutorial. It is easy to use and simple to customize. In our next tutorial, we will add animations to show/hide the Master View.

 Please feel free to add your comments and suggestions. You can find source code here Source Code

Starting iOS/iPhone Programming

Hi Guys,

This tutorial is purely targeted for programmers who are planning to start iOS programming. Okay, lets start now. First see what are the pre-requisites of iOS programming :

1. Understanding of Object Oriented Concepts.
2. Mac Machine
3. Some spare time....

Apple providing a lot of frameworks to programmers to develop third party iOS applications. You can find list of available frameworks here http://developer.apple.com/library/ios/#documentation/miscellaneous/conceptual/iphoneostechoverview/iPhoneOSFrameworks/iPhoneOSFrameworks.html

All these frameworks are written in Objective C programming language. So, to build an iOS application we need learn Objective C. We will discuss more about Objective C in our next tutorials.

For now lets build an simple iOS application to give a better understanding of the tools we use to build iOS/iPhone/iPad applications.

XCode : This is the IDE we use to develop iOS applications. This is where we can write code, debug, compile and execute.

Interface Builder : For the benefit of iOS programmer, Apple provided interface builder feature to drag-drop UI elements instead of writing code to create them. If we want we can write code to programmatically create UI components though. Earlier this is independent application till Xcode 3.x. From Xcode 4.x Interface builder is integrated into Xcode itself. (See right bottom corner. U will see UI elements like label, button etc).

iPhone and iPad Simulators : Ok, here comes the actual component. Simulators!!!! If we develop an web application we will see the output on a web browser. Similarly, if we want to see output of an iOS application, we have iPhone/iPad simulators. We can use real iPhone/iPad devices also to test the output. But to do that we need a apple developer account(https://developer.apple.com/). We will see how to run an iOS applications on a real device in our future tutorials.

Okay, now first create a XCode project. Select, Xcode from dock. From top menu, select File -> New -> Project

Select Single View Application

Give Project name, Organization Name and select iPhone in devices option. Uncheck all the check boxes. We will do examples related those in next tutorials.

Now, lets select ViewController.xib from the project navigator menu of XCode. It is a interface builder file. We can drag and drop UI elements on to the xib file. Drag and drop a label and set its properties from the properties view which appears above the elements group.

Lets center align label text and give text as "My First iOS Application". You can give label text by double clicking on the label or assigning text to "Text" property in properties view.

Now using color panel, change the background color of the view to white color.

Now run the iPhone application using command "Cmd+R" keys or by clicking the Run button appears on top left corner of the XCode. You see out put on iPhone simulator. (iPhone 3.5 inches).

Following screen shows output for iPhone 5(4 inches) retina display.

I hope you guys have enjoyed the tutorial. Please feel to add your comments. Please download source code from here MyFirstiOSApplication Source Code