Once your project is open in Xcode, expand the Classes folder, and single-click AutoSizeViewController.m. If you look at the code that's already there, you'll see that a method called shouldAutorotateToInterfaceOrientation: is already provided for you, courtesy of the template, but it's commented out. Uncomment it now by deleting the comment beginning and ending:

...

// Override to allow orientations other than the default portrait
//    orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)

interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

...

This method is the system's way of asking your view controller if it's OK to rotate to a specific orientation. Four defined orientations correspond to the four general ways that the iPhone can be held:

When the phone is changed to a new orientation, this method is called on the active view controller. The parameter interfaceOrientation will contain one of the four values in the preceding list, and this method needs to return either YES or NO to signify whether the application's window should be rotated to match the new orientation. Because every view controller subclass can implement this differently, it is possible for one application to support autorotation with some of its views but not with others.

The default implementation of this method looks at interfaceOrientation and returns YES only if it is equal to UIInterfaceOrientationPortrait, which limits this application to one orientation, effectively disabling autorotation.

If we wanted to enable rotation to any orientation, we'd simply change the method to return YES for any value passed in, like so:

- (BOOL)shouldAutorotateToInterfaceOrientation:
    (UIInterfaceOrientation)interfaceOrientation {
    return YES;
}

In order to support some but not all orientations, we have to look at the value of interfaceOrientation and return YES for those that we want to support and NO for those we don't. For example, to support portrait mode and landscape mode in both directions but not rotation to the upside down portrait mode, we could do this:

- (BOOL)shouldAutorotateToInterfaceOrientation:
    (UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation !=
        UIInterfaceOrientationPortraitUpsideDown);
}

Go ahead and change the shouldAutorotateToInterfaceOrientation: method to match the preceding version. As a general rule, UIInterfaceOrientationPortraitUpsideDown is discouraged by Apple, because if the phone rings while it is being held upside down, the phone is likely to remain upside down when it's answered.

Save, and then we'll look at setting autosize attributes in Interface Builder.

In Xcode, expand the Resources folder, and double-click AutosizeViewController.xib to open the file in Interface Builder. One nice thing about using autosize attributes is that they require very little code. We do have to specify which orientations we support, as we just did in our view controller, but everything else we need to do in order to implement this technique will be done right here in Interface Builder.

To see how this works, drag six Round Rect Buttons from the library over to your view, and place them as we've done in Figure 5-2. Double-click each button, and assign a title to each one so we can tell them apart later. We've numbered ours from 1 to 6.

Figure 5.2. Adding six numbered buttons to the interface

Save, and go back to Xcode. Let's see what happens now that we've specified that we support autorotation but haven't set any autosize attributes. Build and run. Once the iPhone simulator comes up, select Rotate Left from the Hardware menu, which will simulate turning the iPhone into landscape mode. Take a look at Figure 5-3. Oh, dear.

Figure 5.3. Well, that's not very useful, is it?

Most controls default to a setting that has them stay where they are in relation to the left side and top of the screen. There are some controls for which this would be appropriate. The top-left button, number 1, for example, is probably right where we want it—the rest of them, however, not so much.

Quit the simulator, and go back to Interface Builder.

Single-click the top-left button on your view, and then press

The size inspector allows you to set an object's autosize attributes. Figure 5-5 shows the part of the size inspector that controls an object's autosize attributes.

The box on the left in Figure 5-5 is where we actually set the attributes; the box on the right is a little animation that will show us how the object will behave during a resize. In the box on the left, the inner square represents the current object. If a button is selected, the inner square represents that button.

Figure 5.4. The size inspector allows you to set an object's autosize attributes.

The red arrows inside the inner square represent the horizontal and vertical space inside the selected object. Clicking either arrow will change it from solid to dashed or from dashed back to solid. If the horizontal arrow is solid, the width of the object is free to change as the window resizes; if the horizontal arrow is dashed, the iPhone will try to keep the width of the object at its original value if possible. The same is true for the height of the object and the vertical arrow.

Figure 5.5. The Autosizing section of the size inspector

The four red "I" shapes outside the inner box represent the distance between the edge of the selected object and the same edge of the view that contains it. If the "I" is dashed, the space is flexible, and if it's solid red, the amount of space should be kept constant if possible.

Huh?

Perhaps this concept will make a little more sense if you actually see it in action. Take a look back at Figure 5-5, which represents the default autosize settings. These default settings specify that the object's size will remain constant as its superview is resized and that the distance from the left and top edges should also stay constant. If you look at the animation next to the autosize control, you can see how it will behave during a resize. Notice that the inner box stays in the same place relative to the left and top edges of the parent view as the parent view changes in size.

Try this experiment. Click both of the solid red "I" shapes (to the top and left of the inner box) so they become dashed and look like the ones shown in Figure 5-6.

Figure 5.6. With all dashed lines, your control floats in the parent and keeps its size.

With all the lines set to dashed, the size of the object will be kept the same, and it will float in the middle of the superview as the superview is resized.

Now, click the vertical arrow inside the box and the "I" shape both above and below the box so that your autosize attributes look like the ones shown in Figure 5-7.

Figure 5.7. This configuration allows the vertical size of our object to change.

With this configuration, we are indicating that the vertical size of our object can change and that the distance from the top of our object to the top of the window and the distance from the bottom of our object to the bottom of the window should stay constant. With this configuration, the width of the object wouldn't change, but its height would. Change the autosize attributes a few more times and watch the animation until you grok how different settings will impact the behavior when the view is rotated and resized.

Now, let's set the autosize attributes for our six buttons. Go ahead and see if you can figure them out. If you get stumped, take a look at Figure 5-8, which shows you the autosize attributes needed for each button in order to keep them on the screen when the phone is rotated.

Figure 5.8. Autosize attributes for all six buttons

Once you have the attributes set the same as Figure 5-8, save the nib, go back to Xcode, and build and run. This time, when the iPhone simulator comes up, you should be able to select Rotate Left or Rotate Right from the Hardware menu and have all the buttons stay on the screen (see Figure 5-9). If you rotate back, they should return to their original position. This technique will work for a great many applications.

Figure 5.9. The buttons in their new positions after rotating

In this example, we kept our buttons the same size, so now all of our buttons are visible and usable, but there is an awful lot of unused white space on the screen. Perhaps it would be better if we allowed the width or height of our buttons to change so that there will be less empty space on the interface? Feel free to experiment with the autosize attributes of these six buttons, and add some other buttons if you want. Play around until you feel comfortable with the way autosize works.

In the course of your experimentation, you're bound to notice that, sometimes, no combination of autosize attributes will give you exactly what you want. Sometimes, you are going to need to rearrange your interface more drastically than can be handled with this technique. For those situations, a little more code is in order. Let's take a look at that, shall we?

To change a control's attributes, we need an outlet that points to the object we want to change. As a result, we need to declare an outlet for each of the six buttons in order to rearrange them. Add the following code to AutosizeViewController.h:

#import <UIKit/UIKit.h>

@interface AutosizeViewController : UIViewController {
    UIButton *button1;
    UIButton *button2;
    UIButton *button3;
    UIButton *button4;
    UIButton *button5;
    UIButton *button6;
}
@property (nonatomic, retain) IBOutlet UIButton *button1;
@property (nonatomic, retain) IBOutlet UIButton *button2;
@property (nonatomic, retain) IBOutlet UIButton *button3;
@property (nonatomic, retain) IBOutlet UIButton *button4;
@property (nonatomic, retain) IBOutlet UIButton *button5;
@property (nonatomic, retain) IBOutlet UIButton *button6;
@end

Save this file, and go back to Interface Builder. Control-drag from the File's Owner icon to each of the six buttons, and connect them to the corresponding outlet. Once you've connected all six, save the nib, and pop back over to Xcode.

To move these buttons to make the best use of space, we need to override the method willAnimateRotationToInterfaceOrientation:duration: in AutosizeViewController.m. This method gets called automatically after a rotation has occurred but before the final rotation animations have occurred.

Add the following code, and then we'll talk about what it's doing:

#import "AutosizeViewController.h"

@implementation AutosizeViewController
@synthesize button1;
@synthesize button2;
@synthesize button3;
@synthesize button4;
@synthesize button5;
@synthesize button6;

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)
    interfaceOrientation duration:(NSTimeInterval)duration {
    if (interfaceOrientation == UIInterfaceOrientationPortrait
        || interfaceOrientation ==
            UIInterfaceOrientationPortraitUpsideDown) {
        button1.frame = CGRectMake(20, 20, 125, 125);
        button2.frame = CGRectMake(175, 20, 125, 125);
        button3.frame = CGRectMake(20, 168, 125, 125);
        button4.frame = CGRectMake(175, 168, 125, 125);
        button5.frame = CGRectMake(20, 315, 125, 125);
        button6.frame = CGRectMake(175, 315, 125, 125);
}
else {
        button1.frame = CGRectMake(20, 20, 125, 125);
        button2.frame = CGRectMake(20, 155, 125, 125);
        button3.frame = CGRectMake(177, 20, 125, 125);
        button4.frame = CGRectMake(177, 155, 125, 125);
        button5.frame = CGRectMake(328, 20, 125, 125);
        button6.frame = CGRectMake(328, 155, 125, 125);
    }
}
- (BOOL)shouldAutorotateToInterfaceOrientation:
    (UIInterfaceOrientation)interfaceOrientation {
    return (interfaceOrientation !=
        UIInterfaceOrientationPortraitUpsideDown);
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}
- (void)viewDidUnload {
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.button1 = nil;

self.button2 = nil;
    self.button3 = nil;
    self.button4 = nil;
    self.button5 = nil;
    self.button6 = nil;
    [super viewDidUnload];
}
- (void)dealloc {
    [button1 release];
    [button2 release];
    [button3 release];
    [button4 release];
    [button5 release];
    [button6 release];
    [super dealloc];
}

The size and position of all views, including controls such as buttons, are specified in a property called frame, which is a struct of type CGRect. CGRectMake is a function provided by Apple that lets you easily create a CGRect by specifying the x and y positions along with the width and height.

Save this code. Now build and run to see it in action. Try rotating, and watch how the buttons end up in their new positions.

Because there are two buttons on each view that we're going to build and because an outlet can't point to more than one object, we need to declare four outlets, two for the landscape view buttons and two for the portrait view buttons. When using this technique, it becomes very important to put some thought into your outlet names to keep your code from becoming confusing to read.

But, oho! Is that somebody in the back saying, "Do we really need outlets for all these buttons? Since we're deactivating the button that was tapped, can't we just use sender instead?" And in a single-view scenario, that would be exactly the right way to go about it.

Think about this. What if the user taps the Foo button and then rotates the phone? The Foo button on the other view is a completely different button, and it will still be active, which isn't the behavior we want. We don't really want to advertise to the users that the object they're dealing with now isn't the same one they were dealing with a moment ago.

In addition to the outlets for the buttons, we need two more outlets to point to the two different versions of our view. When working with a single view only, our parent class's view property was all we needed. But, since we're going to be changing the value of view at runtime, we need to make sure we have a way to get to both views, hence the need for two UIView outlets.

Our buttons need to trigger an action, so we're definitely going to need at least one action method. We're going to design a single action method to handle the pressing of any of the buttons, so we'll just declare a single buttonPressed: action in our view controller class.

Add the following code to SwapViewController.h to create the outlets we'll need when we go to Interface Builder.

#import <UIKit/UIKit.h>
#define degreesToRadians(x) (M_PI * (x) / 180.0)
@interface SwapViewController : UIViewController {
    UIView    *landscape;
    UIView    *portrait;

    // Foo
    UIButton *landscapeFooButton;
    UIButton *portraitFooButton;

    // Bar
UIButton *landscapeBarButton;

UIButton *portraitBarButton;
}
@property (nonatomic, retain) IBOutlet UIView *landscape;
@property (nonatomic, retain) IBOutlet UIView *portrait;
@property (nonatomic, retain) IBOutlet UIButton *landscapeFooButton;
@property (nonatomic, retain) IBOutlet UIButton *portraitFooButton;
@property (nonatomic, retain) IBOutlet UIButton *landscapeBarButton;
@property (nonatomic, retain) IBOutlet UIButton *portraitBarButton;

-(IBAction)buttonPressed:(id)sender;
@end

This line of code:

#define degreesToRadians(x) (M_PI * (x) / 180.0)

is simply a macro to convert between degrees and radians. We'll use that in a few minutes when calling a function that requires radians as an input. Most people, including us, don't think in radians, so this macro will make our code much more readable by letting us specify angles in degrees instead of radians.

Everything else in this header should be familiar to you, so now that we have our outlets implemented, let's go to Interface Builder and build the two views we need. Double-click SwapViewController.xib in the Resources folder of the Groups & Files pane to open the file in Interface Builder.

Ideally, what you're seeing in Interface Builder right now should feel very familiar to you. We'll need two views in our nib. We don't want to use the existing view that was provided as part of the template because its size can't be changed. Instead, we'll delete the default view and create two new ones.

Single-click the View icon, and press the Delete button. Next, drag over two Views from the library. After doing that, you'll have two icons labeled View. That might get a little confusing, so let's rename them to make it obvious what each one does.

To rename an icon in the nib's main window, you have to single-click the view to select it, wait a second or two, and then click the name of the icon. After another second, the name will become editable, and you can type the new name. Note that this trick works only in the icon view mode. Name one view Portrait and the other Landscape.

Now, control-drag from the File's Owner icon to the Portrait icon, and when the gray menu pops up, select the portrait outlet. Then, control-drag from File's Owner to the Landscape icon, and select the landscape outlet. Now control-drag a third time from File's Owner to Portrait, and select the view outlet to indicate which view should be shown at launch time.

Double-click the icon called Landscape, and press

Control-drag from the File's Owner icon to the Foo button, and assign it to the landscapeFooButton outlet; then do the same thing to assign the Bar button to the landscapeBarButton outlet. Now, single-click the Foo button, and switch to the connections inspector by pressing

Double-click the Portrait icon to open that view for editing. Drag two more Round Rect Buttons from the library, placing them one above the other this time. Again, make the size of each button 125 pixels wide and 125 pixels tall. Double-click the top button, and give it a title of Foo. Then, double-click the bottom button, and assign it a title of Bar. Control-drag from the File's Owner icon to the Foo button, and assign it to the portraitFooButton outlet. Control-drag from the File's Owner icon once again to the Bar button, and assign it to the portraitBarButton outlet. Click the Foo button, and drag from the Touch Up Inside event on the connections inspector over to the File's Owner icon, and select the buttonPressed: action. Repeat this connection with the Bar button.

Save the nib, and go back to Xcode.

We're almost done now; we just need to put the code in place to handle the swap and the button taps. Add the code that follows to your SwapViewController.m file.

#import "SwapViewController.h"

@implementation SwapViewController
@synthesize landscape;

@synthesize portrait;
@synthesize landscapeFooButton;
@synthesize portraitFooButton;
@synthesize landscapeBarButton;
@synthesize portraitBarButton;

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)
    interfaceOrientation duration:(NSTimeInterval)duration {
    if (interfaceOrientation == UIInterfaceOrientationPortrait) {
        self.view = self.portrait;
        self.view.transform = CGAffineTransformIdentity;
        self.view.transform =
            CGAffineTransformMakeRotation(degreesToRadians(0));
        self.view.bounds = CGRectMake(0.0, 0.0, 300.0, 480.0);
    }
    else if (interfaceOrientation == UIInterfaceOrientationLandscapeLeft) {
        self.view = self.landscape;
        self.view.transform = CGAffineTransformIdentity;
        self.view.transform =
        CGAffineTransformMakeRotation(degreesToRadians(-90));
        self.view.bounds = CGRectMake(0.0, 0.0, 460.0, 320.0);
    }
    else if (interfaceOrientation ==
                       UIInterfaceOrientationPortraitUpsideDown) {
        self.view = self.portrait;
        self.view.transform = CGAffineTransformIdentity;
        self.view.transform =
            CGAffineTransformMakeRotation(degreesToRadians(180));
        self.view.bounds = CGRectMake(0.0, 0.0, 300.0, 480.0);
    }
    else if (interfaceOrientation ==
            UIInterfaceOrientationLandscapeRight) {
        self.view = self.landscape;
        self.view.transform = CGAffineTransformIdentity;
        self.view.transform =
            CGAffineTransformMakeRotation(degreesToRadians(90));
        self.view.bounds = CGRectMake(0.0, 0.0, 460.0, 320.0);
    }
}
-(IBAction)buttonPressed:(id)sender {

    if (sender == portraitFooButton || sender == landscapeFooButton) {
        portraitFooButton.hidden = YES;
        landscapeFooButton.hidden = YES;
    } else {
        portraitBarButton.hidden = YES;
        landscapeBarButton.hidden = YES;

}
}
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
    interfaceOrientation {
    return YES;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}
- (void)viewDidUnload {
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.landscape = nil;
    self.portrait = nil;
    self.landscapeFooButton = nil;
    self.landscapeBarButton = nil;
    self.portraitFooButton = nil;
    self.portraitBarButton = nil;
    [super viewDidUnload];
}
- (void)dealloc {
    [landscape release];

    [portrait release];
    [landscapeFooButton release];
    [portraitFooButton release];
    [landscapeBarButton release];
    [portraitBarButton release];

    [super dealloc];
}

@end

The first method in our new code is called willAnimateRotationToInterfaceOrientation:duration:. This is a method from our superclass that we've overridden that gets called as the rotation begins but before the rotation actually happens. Actions that we take in this method will be animated as part of the first half of the rotation animation.

In this method, we look at the orientation that we're rotating to and set the view property to either landscape or portrait, as appropriate for the new orientation. We then call CGAffineTransformMakeRotation, part of the Core Graphics framework, to create a rotation transformation. A transformation is a mathematical description of changes to an object's size, position, or angle. Ordinarily, iPhone takes care of setting the transform value automatically when the phone is rotated. However, when we swap in our new view here, we have to make sure that we give it the correct value so as not to confuse the iPhone. That's what willAnimateRotationToInterfaceOrientation:duration: is doing each time it sets the view's transform property. Once the view has been rotated, we adjust its frame so that it fits snugly into the window at the current orientation.

Next up is our buttonPressed: method, and there shouldn't be anything too surprising there. We look at the button that was tapped, hide it, and then hide the corresponding button on the other view.

You should be comfortable with everything else we wrote in this class. The new shouldAutorotateToInterfaceOrientation: method simply returns YES to tell the iPhone that we support rotation to any orientation, and the code added to the dealloc method is simple memory cleanup.

Now, we're ready to compile it and try it. Note that if you accidentally clicked both buttons, the only way to bring them back is to quit the simulator and rerun the project. Don't use this approach in your own applications.