TRY IT OUT: Supporting Different Screen Orientations

1. Using Xcode, create a new Single View Application (iPhone) project and name it ScreenRotations. You will also use the project name as the Class Prefix and ensure that you have the Use Automatic Reference Counting option unchecked.
2. Press Command-R to test the application on the iPhone 4 Simulator.
3. Change the iPhone Simulator orientation by pressing either Command-→ (rotate it to the right) or Command-← (rotate it to the left) key combination. Observe that the application stays upright when the Simulator is either in portrait (upright) mode or in landscape mode (see Figure 7-2). However, if the Simulator is in the portrait upside down mode, the application's orientation stays in its previous orientation (before it was rotated).

   

   FIGURE 7-2

How It Works

By default, the iPhone Application project you created using Xcode supports three screen orientations: portrait and the two landscape modes (landscape left and landscape right). This is evident in the shouldAutorotateTolnterfaceOrientation: method defined in the View controller:

(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
 interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}

The shouldAutorotateToInterfaceOrientation: method is called when the View window is loaded and whenever orientation of the device changes. This method passes in a single parameter — the orientation to which the device has been changed. The returning value of this method determines whether the current orientation is supported. For a particular orientation to be supported, this method must return YES. In other words, the preceding states that the application should stay upright for all orientation modes, except when the device is in the portrait upside-down mode (see Figure 7-3).

FIGURE 7-3

To support all orientations, simply return a YES to allow your application to display upright for all orientations:

- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    //return (interfaceOrientation !=
      UIInterfaceOrientationPortraitUpsideDown);
    return YES;
}

TRY IT OUT: Repositioning Views during Orientation Change

1. Using the project created earlier, select the ScreenRotationsViewController.xib file and add a Round Rect Button to the View window (see Figure 7-4).

   

   FIGURE 7-4

2. Observe its size and positioning by viewing the Size Inspector window. Here, its position is (20,20) and its size is 233 by 37 points.
3. Rotate the orientation of the View window from portrait to landscape mode by changing its Orientation attribute to Landscape in the Attributes Inspector window (see Figure 7-5).

   

   FIGURE 7-5

4. Reposition the Round Rect Button by relocating it to the bottom-right corner of the View window (see Figure 7-6). Also observe and take note of its new position.

   

   FIGURE 7-6

5. In the ScreenRotationsViewController.h file, add the following code shown in bold:

   #import <UIKit/UIKit.h>
   
   @interface ScreenRotationsViewController : UIViewController
   {
       IBOutlet UIButton *btn;
   }
   
   @property (nonatomic, retain) UIButton *btn;
   
   @end

6. In Interface Builder, connect the outlet you have created by Control-clicking the File's Owner item and dragging over to the Round Rect Button. Select btn.
7. In the ScreenRotationsViewController.m file, add the following bold code:

   #import “ScreenRotationsViewController.h”
   
   @implementation ScreenRotationsViewController
   
   @synthesize btn;
   
   -(void) positionViews {
       UIInterfaceOrientation destOrientation = self.interfaceOrientation;
       if (destOrientation == UIInterfaceOrientationPortrait ||
           destOrientation == UIInterfaceOrientationPortraitUpsideDown) {
           //--if rotating to portrait mode--
           btn.frame = CGRectMake(20, 20, 233, 37);
       } else {

   //--if rotating to landscape mode--
           btn.frame = CGRectMake(227, 243, 233, 37);
       }
   }
   
   - (void)willRotateToInterfaceOrientation:
   (UIInterfaceOrientation) toInterfaceOrientation
       duration:(NSTimeInterval) duration {
       [self positionViews];
   }
   
   - (BOOL)shouldAutorotateToInterfaceOrientation:
   (UIInterfaceOrientation)interfaceOrientation
   {
       // Return YES for supported orientations
       return YES;
   }
   
   - (void)viewDidLoad {
       [self positionViews];
       [super viewDidLoad];
   }
   
   - (void)dealloc {
       [btn release];
       [super dealloc];
   }

8. Press Command-R in Xcode to deploy the application onto the iPhone Simulator.
9. Observe that when the iPhone Simulator is in portrait mode, the Round Rect Button is displayed in the top-left corner; but when you change the orientation to landscape mode, it is repositioned to the bottom-right corner (see Figure 7-7).

   

   FIGURE 7-7

How It Works

This project illustrated how you can reposition the views on your application when the device changes orientation. You first created an outlet and connected it to the Round Rect Button on the View window.

When the device is being rotated, the willRotateToInterfaceOrientation: method that you implemented is called so that you can reposition the Round Rect Button. When this method is called, you can obtain the destination orientation using the interfaceOrientation property of the current View window (self), like this:

UIInterfaceOrientation destOrientation = self.interfaceOrientation;

Using this information, you position the Round Rect Button according to the destination orientation by altering its frame property via the positionViews method, which you have defined:

-(void) positionViews {
    UIInterfaceOrientation destOrientation = self.interfaceOrientation;
    if (destOrientation == UIInterfaceOrientationPortrait ||
        destOrientation == UIInterfaceOrientationPortraitUpsideDown) {
        //--if rotating to portrait mode--
        btn.frame = CGRectMake(20, 20, 233, 37);
    } else {
        //--if rotating to landscape mode--
        btn.frame = CGRectMake(227, 243, 233, 37);
    }
}

You should also call the positionViews method in the viewDidLoad method so that the Round Rect Button can be displayed correctly when the View window is loaded:

- (void)viewDidLoad {
    [self positionViews];
    [super viewDidLoad];
}