Designing Separate Views For Landscape And Portrait

This guide is based on the excellent guide provided by Geoff Palin at A Series of Tubes.

Create View Controller Files

Create your View Controller as normal so you end up with a ‘.h’, ‘.m’ and ‘.xib’ file names something like #ViewController_iPad.#.

In #ViewController_iPad.h

@interface #ViewController_iPad : UIViewController
{
    IBOutlet UIView *mainPortraitView;
    IBOutlet UIView *mainLandscapeView;

    UIDeviceOrientation orientation;
}

@property (nonatomic, retain) UIView *mainPortraitView;
@property (nonatomic, retain) UIView *mainLandscapeView;

- (void)clearCurrentView;

@end

In #ViewController_iPad.m

Synthesize the views

@implementation NewReminderViewController_iPad

@synthesize mainPortraitView;
@synthesize mainLandscapeView;

Add the following:

//***********************************
//***********************************
//********** VIEW DID LOAD **********
//***********************************
//***********************************
- (void)viewDidLoad
{
    [super viewDidLoad];

    //----- SETUP ORIENTATION -----
    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didRotate:) name:@"UIDeviceOrientationDidChangeNotification"  object:nil];
    orientation = (UIDeviceOrientation)[[UIDevice currentDevice] orientation];
    if (orientation == UIDeviceOrientationUnknown || orientation == UIDeviceOrientationFaceUp || orientation == UIDeviceOrientationFaceDown)
    {
        orientation = UIDeviceOrientationPortrait;
    }
}

//**************************************
//**************************************
//********** VIEW WILL APPEAR **********
//**************************************
//**************************************
//View about to be added to the window (called each time it appears)
//Occurs after other view's viewWillDisappear
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    //----- SETUP ORIENTATION -----
    [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didRotate:) name:@"UIDeviceOrientationDidChangeNotification"  object:nil];
    //orientation = [[UIDevice currentDevice] orientation];
    orientation = (UIDeviceOrientation)[UIApplication sharedApplication].statusBarOrientation;    //This is more reliable than (self.interfaceOrientation) and [[UIDevice currentDevice] orientation] (which may give a faceup type value)
    if (orientation == UIDeviceOrientationUnknown || orientation == UIDeviceOrientationFaceUp || orientation == UIDeviceOrientationFaceDown)
    {
        orientation = UIDeviceOrientationPortrait;
    }
    // Do orientation logic
    if ((orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight))
    {
        // Clear the current view and insert the orientation specific view.
        [self clearCurrentView];
        [self.view insertSubview:mainLandscapeView atIndex:0];
    }
    else if (orientation == UIDeviceOrientationPortrait || orientation == UIDeviceOrientationPortraitUpsideDown)
    {
        // Clear the current view and insert the orientation specific view.
        [self clearCurrentView];
        [self.view insertSubview:mainPortraitView atIndex:0];
    }

}

//********************************
//********************************
//********** DID ROTATE **********
//********************************
//********************************
-(void)didRotate:(NSNotification *)notification
{

    UIDeviceOrientation newOrientation = [[UIDevice currentDevice] orientation];
    if (newOrientation != UIDeviceOrientationUnknown && newOrientation != UIDeviceOrientationFaceUp && newOrientation != UIDeviceOrientationFaceDown)
    {
        if (orientation != newOrientation)
        {
            //ORIENTATION HAS CHANGED
            NSLog(@"Changed Orientation");

            // Do orientation logic
            if (
                ((newOrientation == UIDeviceOrientationLandscapeLeft || newOrientation == UIDeviceOrientationLandscapeRight)) &&
                ((orientation == UIDeviceOrientationPortrait || orientation == UIDeviceOrientationPortraitUpsideDown))
                )
            {
                NSLog(@"Changed Orientation To Landscape");
                // Clear the current view and insert the orientation specific view.
                [self clearCurrentView];
                [self.view insertSubview:mainLandscapeView atIndex:0];

                //Copy object states between views
                //SomeTextControlL.text = SomeTextControlP.text;
            }
            else if (
                     ((newOrientation == UIDeviceOrientationPortrait || newOrientation == UIDeviceOrientationPortraitUpsideDown)) &&
                     ((orientation == UIDeviceOrientationLandscapeLeft || orientation == UIDeviceOrientationLandscapeRight))
                     )
            {
                NSLog(@"Changed Orientation To Portrait");
                // Clear the current view and insert the orientation specific view.
                [self clearCurrentView];
                [self.view insertSubview:mainPortraitView atIndex:0];

                //Copy object states between views
                //SomeTextControlP.text = SomeTextControlL.text;
            }
            orientation = newOrientation;
        }

    }
}

//*****************************************************************
//*****************************************************************
//********** REMOVE CURRENT VIEW WHEN LOADING A NEW VIEW **********
//*****************************************************************
//*****************************************************************
- (void) clearCurrentView
{
    if (mainLandscapeView.superview)
    {
        [mainLandscapeView removeFromSuperview];
    }
    else if (mainPortraitView.superview)
    {
        [mainPortraitView removeFromSuperview];
    }
}

//*****************************
//*****************************
//********** DEALLOC **********
//*****************************
//*****************************
- (void)dealloc
{
    [mainPortraitView release];
    [mainLandscapeView release];

    [super dealloc];
}

In #ViewController_iPad.xib

Open the .xib file.

Press the play button like arrow at the bottom of the layout designers left bar so you get a list of the layout components rather than the box icons (Files Owner, First Responder and View).

Drag a new ‘View’ from the objects toolbox to the Objects section so you add a new View and then add another.

Rename the two new views to ‘mainLandscapeView’ and ‘mainPortraitView’.

Next right click and drag from ‘File’s Owner’ to each of the views and choose the appropriate ‘mainLandscapeView’ and ‘mainPortraitView’ outlet.

Select the ‘mainLandscapeView’

Set Orientation to Landscape

Set View Size to 1024 x 748 (iPad)

Select the ‘mainPortraitView’

Set Orientation to Portrait

Set View Size to 768 x 1004 (iPad)

Select the original view (named ‘View’) and set it’s background colour to black

Thats it!  You can now click each view and drag the controls you want to use onto them and each view will automatically be selected when the user rotates the device.

Any action methods do not need to be duplicated as an action can be triggered by more than one control in a view, but any outputs (e.g. run time altered labels etc) will have to be duplicated with separate names and updated if the user changes the rotation.