• Jennifer Eve Vega

UISplitViewController Landscape

Updated: Apr 7, 2021

Tutorial Request from Mazrizan Kamisan


We\’ll have the portrait view in another tutorial which will be a continuation of this landscape tutorial of UISplitViewController.


/*Note: This works in OS versions greater than or equal to iOS 6.0 OS versions less than iOS 6.0 has a different look in its UIPopoverController and doesn\’t support Landscape Orientation.*/


I studied UISplitViewController by creating a Master Detail Application Template. For sure, you will also be able to understand by looking at its code. For those who want to do it themselves (not just merely creating a Master Detail Application), just follow this tutorial.


1. Create an Empty Application Template.

Select iPad for our Device Family.


2. Add a New File, subclass of UITableViewController, check ”With XIB for user interface.” This is the view on the left area of our application.


3. Create another File, subclass UIViewController. This is for the bigger area (right panel) of our application. I named it ”Detail” view because it acts and shows the detailed view of the cell selected in our tableview (left area).


4. Create a UISplitViewController property in our AppDelegate.h file.


Synthesize the splitViewController property and import the two new files we created from steps 2 and 3 in AppDelegate.m file.


5. Go to AppDelegate.m file and update the didFinishLaunchingWithOptions method such that:

  1. Create an instance of the two new classes we created.

  2. Allocate and initialize the splitViewController.

  3. Set the view controllers of our splitViewController.

  4. @[menuVC, detailVC] is just the same as saying [[NSArray alloc] initWithObjectsmenuVCdetailVC, nil];

  5. Set the rootViewController of our window to splitViewController.


Hit Run button and you should see something like this.


6. Open PopMenuViewController.h and create a PopMenuDetailViewController property. This will be our \”link\” to the two view controllers.


Open PopMenuViewController.m file and synthesize the PopMenuDetailViewController property. Also, create an array for our the list that we will be showing in our tableView.


7. Add objects in our array inside our ViewDidLoad method in PopMenuViewController.m file.

self.menu = [[NSArray alloc] initWithObjects: @”Menu 1, @”Menu 2, @”Menu 3];

Update the Table view Data Source methods such that:

  1. numberOfSections = 1

  2. numberOfRows = array.count

  3. cellForRowAtIndexPath >> cell Label will be from our array


8. Open PopMenuDetailViewController.xib file and add a UILabel at the middle of the view. Create an IBOutlet property of the UILabel and connect them.

// Interface Section
@property (nonatomic, strong) IBOutlet UILabel *passedObjLabel; 

//Implementation Section
@synthesize passedObjLabel; 

9. Make a function that will update the contents in our Detailed view depending on what was selected from our tableview. For now, let\’s have a very simple content such as NSString.


 (void)updateMenuLabel:(NSString *)passedObject {
 if (![self.passedObjLabel.text isEqualToString:passedObject]) {
 self.passedObjLabel.text = passedObject;
    }
}

Call this method in our viewDidLoad. You may choose whatever string you want to pass as a default value.


10. In our PopMenuViewController.m file, update table view\’s delegate method didSelectRowAtIndexPath. This will update the detailed view.


[self.detailViewController updateMenuLabel: [menu objectAtIndex:indexPath.row]];

Hit Run! Make sure you have your simulator in landscape. (If it\’s in portrait, press CMD + Left key)



But wait! There’s more!

How come there’s no Navigation Bar on top? I want one!


That’s simple! Just edit didFinishLaunchingWithOptions method in our AppDelegate.m. And add a self.title@”My Title” in the initialization function in our Menu and Detailed view controllers. You may also change the tint color of our Navigation Bar according to your preference, add navigation buttons, etc.


Hit Run! 


Download sample code here.

Follow me on my new Twitter Account: @iosmadesimple


#UISplitViewControllerLandscape #UISplitViewController #splitviewlandscape #splitview #UISplitViewControllerTutorial #splitviewcontrollerlandscape #iOS #splitviewcontroller

17 views0 comments

Recent Posts

See All

Hi Everyone! It has been a very long while since I last posted in this blog. This time, I will be making a tutorial in using blocks when we are accessing our API or web services. Disclaimer: I am also