Positioning objects in views during re-orientation

Question

iPad Gurus: Apple wants us to support all orientations. I take that to mean that a particular layout should either rotate so that all objects are positioned relatively the same OR, if that doesn't look good, then they ought to be repositioned, OR two views ought to be designed and built.

If I rely on the built-in rotation mechanism, the objects either get resized or they straddle the edge of the page in one orientation or the other, or they disappear from view altogether. I can't seem to find the right settings to get the objects to align clearly so they are seen in each orientation.

Repositioning leads to a lot of if statements in the View Controller. So I don't think Apple had that in mind.

I tried replacing views and even view controllers in "willRotateToInterfaceOrientation" method, but that either causes crashes or the portrait views end up in landscape unexpectedly and vv. Moreover, two view controllers means double the coding for the same view.

There must be proper way to handle orientation changes, but I have searched the internet and documentation and sample code in vain for something that works. How is this done properly?

Thanks!

Answer 1

The recommended, and straight forward way to do this is as follows:

1. Add all your subviews to the main view in a nib file or in the view controller's viewDidLoad method.
2. Override the view controller view's layoutSubviews method. In this method, check whether the view's orientation is portrait or landscape and set the frame property of every subview according to your desired size and position for that orientation.
3. Call said [self layoutSubviews] method in the view controller's -willRotateToInterfaceOrientation:duration: method. Note - layoutSubviews may be called automatically when the view rotates, I don't remember. If not, call it yourself.

Answer 2

Spend some time in Interface Builder getting to understand what "autosizing" and "size & position" do (size inspector). They can be configured separately for each UILabel, Button, Bar, Image etc.

Also scale to fill, aspect fit, aspect fill etc. are useful to understand (attributes inspector).

Don't forget to override shouldAutorotateToInterfaceOrientation to return YES and then everything should work using a single UIViewController and UIView.

Answer 3

Thanks to the great post at OranLooney.com I was able to get a java/icefaces web-app to resize nicely on the ipad.

the donnothing(); in the window.orientationchange is there as it seems sometimes without it the resize will (sometimes) not work, in your case though i imagine this is where you want to put the code to launch a new view.

// a function to parse the user agent string; useful for 
// detecting lots of browsers, not just the iPad.
function checkUserAgent(vs) {
    var pattern = new RegExp(vs, 'i');
    return !!pattern.test(navigator.userAgent);
}
if ( checkUserAgent('iPad') ) {
    // iPad specific stuff here
 window.onorientationchange = function() {
  donnothing();
 };
}

also if you figure out how to allow double click let us know !!

Answer 4

Head over to GitHub and take a look at NextMunich's NMView class (and NMViewController too). Very very powerful and pretty simple to implement. Basically, it's built for folks that need more complex view hierarchies, but don't want to write a lot of extra code to handle orientations. It does it for you once you lay it out.

Freaking awesome. I stole some of their ideas on view animation after I picked their brain a little. They're super friendly folks.