This recipe illustrates how to use the UISplitViewController to display two view controllers with a master-detail relationship. This controller can only be used on the iPad.
Recipe
There are three components required to make a split view work: the master
view, the detail view and the split view that encapsulates them both.
To create these views and wire them up:
- Create a subclass of DialogViewController for the master view:
public class MasterViewController : DialogViewController { public MasterViewController () : base (null) { Root = new RootElement ("Items") { new Section () { from num in Enumerable.Range (1, 10) select (Element) new StringElement("Item " + num) } }; } public override bool ShouldAutorotateToInterfaceOrientation (UIInterfaceOrientation toInterfaceOrientation) { return true; } }
- Create a subclass of UIViewController for the detail view:
public class DetailViewController : UIViewController { UILabel label; public DetailViewController () : base() { View.BackgroundColor = UIColor.White; label = new UILabel(new RectangleF(100,100,300,50)); label.Text = "This is the detail view"; View.AddSubview (label); } public override bool ShouldAutorotateToInterfaceOrientation (UIInterfaceOrientation toInterfaceOrientation) { return true; } }
- Create a subclass of UISplitViewController, and assign the master and detail classes to its ViewControllers property.
public class SplitViewContoller : UISplitViewController { UIViewController masterView, detailView; public SplitViewContoller () : base() { // create our master and detail views masterView = new MasterViewController (); detailView = new DetailViewController (); // create an array of controllers from them and then // assign it to the controllers property ViewControllers = new UIViewController[] { masterView, detailView }; // order is important } public override bool ShouldAutorotateToInterfaceOrientation (UIInterfaceOrientation toInterfaceOrientation) { return true; } }
- Finally create and assign the SplitViewController in the AppDelegate:
splitView = new SplitViewContoller(); window.RootViewController = splitView;
Additional Information
The example above does not include any interaction between the views. See the [Communicating Between Detail and Master Controllers] recipe. It also does not allow you to view the master view in portrait orientation, which is explained in the [Showing and Hiding the Master View Button (SplitView)] recipe.
In iOS 5, you can also force the master view to appear in portrait orientation, by implementing the following delegate in the SplitViewController:
ShouldHideViewController = (svc, viewController, inOrientation) => { return false; // default behaviour is true };