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