Monday, May 20, 2013

UISplitViewController Landscape

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:
  • Create an instance of the two new classes we created.
  • Allocate and initialize the splitViewController.
  • Set the view controllers of our splitViewController.
    • @[menuVC, detailVC] is just the same as saying [[NSArray alloc] initWithObjectsmenuVCdetailVC, nil];
  • 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:
  • numberOfSections = 1
  • numberOfRows = array.count
  • 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.
@property (nonatomic, strong) IBOutlet UILabel *passedObjLabel; // Interface Section
@synthesize passedObjLabel; //Implementation Section




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

4 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. ThnQ so much Dude you really helped a lot because there is no such a good tutorial even in raywendarlitch its really simple and amazing to use and learn
    thanQ so much n thnQ again
    It proved its name really it is making iOS simple

    ReplyDelete
  3. From your detail view how to navigate to other pages using a button or something so the navigation happens within the detail view and the master view stays the same. How can i achieve it any idea?

    ReplyDelete
  4. Plz help me...


    I have just created a new "empty application" project I Xcode 5.

    and i used split viewcontroller

    Then on my TableView Controller, I have added up a few items: Home, View 1, View 2.

    I have removed the default databinding, so when i run it now it appears as intended.

    As default my "Home" view is my Detail View Controller.

    Now I would like: When i press "View 1" it changes my Detail View Controller to a new view I have created on my xib.

    But how do I do that?

    I have tried to push in my "View 1" but then i first have to go back to my Detail View, before I can get the menu to show up...

    I guess I have to make my "View 1" the root controller?

    ReplyDelete