Why are my subviews not centering correctly depending on device orientation?

Question

I'm trying to create programatically a custom view controller with subviews which center on the screen. I've succeeded, and when I navigate to this view, the centered view appears in the center, and rotates correctly when you rotate the device.

But, in this navigation application, if I enter the custom view when not in portrait mode, then the view which is supposed to be centered does position itself in a place which is not the center of the screen. I've put all the necessary autoresize properties on the views, the controller, the parent, the grandmother, the holy virgin... and I've run out of things to stick the autoresize mask to, and still the example looks bad.

I'm sure I'm missing a call to some magical method which will fix everything, but I've not figured what to call or where (setNeedsDisplay? setNeedsLayout?). To showcase this problem I've created a full example available at https://github.com/gradha/iPhone-centered-rotation-test which you can clone and run in the simulator or device. I created this from Apple's navigation controller, simply adding a fake cell which pushes the view I create manually.

The custom view can be found at https://github.com/gradha/iPhone-centered-rotation-test/blob/master/Classes/CenteredViewController.m and here is the loadView method in charge of creating the centered subviews:

/* Try to force the parent view to be as we want it. */
self.view.backgroundColor = [UIColor yellowColor];
self.view.autoresizesSubviews = YES;
self.view.autoresizingMask = UIViewAutoresizingFlexibleHeight |
    UIViewAutoresizingFlexibleWidth;

/* Top left blue square, for reference. */
blue_ = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 130, 130)];
[self.view addSubview:blue_];
blue_.backgroundColor = [UIColor blueColor];
[blue_ release];

/* Create red centered rectangle. */
red_ = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
red_.backgroundColor = [UIColor redColor];
red_.autoresizingMask = UIViewAutoresizingFlexibleBottomMargin |
    UIViewAutoresizingFlexibleTopMargin |
    UIViewAutoresizingFlexibleLeftMargin |
UIViewAutoresizingFlexibleRightMargin;
red_.center = self.view.center;
[self.view addSubview:red_];
[red_ release];

Here's a link to a screen capture walkthrough of the application, first entering in portrait mode and rotating the screen (works OK), then entering in landscape mode and rotating (depending on the rotation side it looks quite bad). When you enter the view in landscape mode, depending on the orientation the red square will have a top left corner of 196x34 or 140x34, which is too much of a difference.

What am I missing to make these subviews center properly when entering the view in landscape mode and follow auto rotation?

Tawny

Answer 1

It appears that in one of the landscape orientations, in loadView, the controller's view origin is set to (0, 20) which is confusing the rotation and autoresizing that occurs after the view is added to the screen. Oddly enough, it's (0, 0) in all other orientations.

To fix the problem, add this line after [super loadView]:

self.view.frame = self.view.bounds;

To elaborate: since the frame origin is not at (0, 0), the concept of self.view.center is incorrect in the context it is being used. The center property is the center of that view as visible in its superview. What you really want is the center of the view's bounds.

By resetting the view frame to the view's bounds, you effectively change the origin back to (0, 0), and center can be used properly.

Transmittal

I've decided to fill this in Apple's bug report database, got bug id 9187368 for tracking. – Tawny

Sounds good. Note, though, that self.view.center will also not work if, say, the view is hosted in a UIScrollView. Best to set red_.center to CGPointMake(self.view.bounds.size.width/2, self.view.bounds.size.height/2). – Transmittal