In iOS version >= 3.0, it’s very simple to support interface orientation changes and layout your GUI elements accordingly. Support for landscape and portrait mode are very important for user experience and I think even essential on iPad. In this short text, we’ll cover several UIViewController instance methods that help dealing with UIInterfaceOrientation on iOS devices.
As an example, we can use the YouTube app that comes installed with iOS operating system. This great app shows how simple GUI provides perfect user experience in both landscape and portrait mode. Rotating your iPad makes it remove not needed GUI elements, at the same time unclutter the screen and resize visible controls to fit new layout.

YouTube iPad app
In order to support a certain interface orientation, first you need to override the following method:
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
//we want to support all orientations
return YES;
} |
Now that you enabled the interface rotation, you would want to implement the methods that inform you when the rotation (and rotation animation) starts and finishes. Those are:
- willRotateToInterfaceOrientation:duration:
- willAnimateRotationToInterfaceOrientation:duration:
- didRotateFromInterfaceOrientation:
Simple enough – willRotateToInterfaceOrientation will be called just before the the device layout rotates, willAnimateRotationToInterfaceOrientation gets called inside animation block just before the animation of the rotation starts and finally didRotateFromInterfaceOrientation gets called once everything is finished and the rotation ended.
With these descriptions alone it’s easy to understand that your logic would be to:
- Create views/controllers inside willRotateToInterfaceOrientation and add them to the layout
- Modify view’s attributes (position, size etc…) inside willAnimateRotationToInterfaceOrientation
- Clean up & remove not needed views inside didRotateFromInterfaceOrientation
Important thing to mention is that willAnimateRotationToInterfaceOrientation method is called inside an animation block so every animatable properties of your views you modify inside this method will be automatically animated. This is very neat, for example, if you just need to reposition and resize your views. You would just change pass desired CGRect as view’s frame and the change would be automatically animated for you when the device changes it’s orientation. to either portrait or landscape.
- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration {
if (UIInterfaceOrientationIsLandscape(interfaceOrientation)) {
previewLayout.frame = CGRectMake(695, 13, previewLayout.frame.size.width, previewLayout.frame.size.height);
} else {
previewLayout.frame = CGRectMake(413, 575, previewLayout.frame.size.width, previewLayout.frame.size.height);
}
} |
This example demonstrates view reposition only and as you can see the coordinates are hardcoded. I also used a macro UIInterfaceOrientationIsLandscape() which totally simplifies how you determine whether the interface orientation is portrait or landscape.
Besides mentioned methods for responding to view rotation events, there are another 3 that I’m just going to mention now and possibly cover in a future post. Basically they are triggered during animation and inform you about the first half of animation start/finish and the second half animation start. They are also called during animation block just like willAnimateRotationToInterfaceOrientation.
- willAnimateFirstHalfOfRotationToInterfaceOrientation:duration:
- didAnimateFirstHalfOfRotationToInterfaceOrientation:
- willAnimateSecondHalfOfRotationFromInterfaceOrientation:duration:
Check out the Apple’s developer docs for more info.
To sum up – by responding to view rotation events using above mentioned methods, you can create rich user experience and make you app accessible in all orientations. Transitions from one orientation to another can also be enriched with nice animations in few lines of code so make sure you take advantage of that.