Monday, January 24, 2011

Interface Orientations

In this post we will learn how to work with orientations in iPhone,

What is Orientations: Orientations are changing the view of your application as per the device’s current orientation, in lay man terms orientation is when you rotate your device in left, right or upside down.

Design Phase: We will have four buttons in our iPhone window and we will try to support both the orientation that’s portrait and landscape, here’s a view at our final output

The above image is when your device is in portrait mode.

Step 1: Open Xcode create a window based application and add UIViewController subclass file to your project with the name myviewController, now you must be having two new files with the name myviewController.h and myviewController.m.

Step 2: Select the myviewController.h file and add declare four objects of UIButton class here’s how the code looks in the myviewController.h file

@interface myviewController : UIViewController {

UIButton *btn1,*btn2,*btn3,*btn4;

Now select the myviewController.m file and set the frames and titles to your button objects that you have created in the init method, here’s the code to that

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        // Custom initialization
btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn1 setFrame:CGRectMake(20, 66, 72, 37)];
[btn1 setTitle:@"BTN 1" forState:UIControlStateNormal];
btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn2 setFrame:CGRectMake(228, 66, 72, 37)];
[btn2 setTitle:@"BTN 2" forState:UIControlStateNormal];

btn3 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn3 setFrame:CGRectMake(20, 388, 72, 37)];
[btn3 setTitle:@"BTN 3" forState:UIControlStateNormal];

btn4 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn4 setFrame:CGRectMake(228, 388, 72, 37)];
[btn4 setTitle:@"BTN 4" forState:UIControlStateNormal];
    return self;

Don’t forget to add this buttons to the self view in the loadView method

- (void)loadView {
[super loadView];
[self.view addSubview:btn1];
[self.view addSubview:btn2];
[self.view addSubview:btn3];
[self.view addSubview:btn4];

Step 3: In the myviewController.m file there is a method that is commented the name of the method is 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {

This is a Boolean method which will rotate your views as per the device orientations, 

Uncomment this method and  delete the code in the return that is present by default and replace it with YES which means that now your application will support all sort of orientation let it be portrait or landscape, 

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

Now add this view to the iPhone window by selecting the appDelegate.m file of your application and make the object of myviewController, heres the code to do that

#import "OrientationAppDelegate.h"
#import "myviewController.h"

@implementation OrientationAppDelegate
@synthesize window;
- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
myviewController *obj = [[myviewController alloc]init];
[window addSubview:obj.view];
    [window makeKeyAndVisible];

run your application, try to rotate the iPhone simulator by selecting the hardware menu,

Step 4: But there is one problem with the above code and that problem is that when you will rotate the hardware to right or left you will find that the buttons that are present at the bottom will be gone from the window, 

so inorder to avoid this add this piece of code in the shouldAutorotateToInterfaceOrientation method, here’s how it looks

-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
UIInterfaceOrientation currentOrientation = [[UIDevice currentDevice]orientation];
switch (currentOrientation) {
case UIInterfaceOrientationPortrait:
case UIInterfaceOrientationPortraitUpsideDown:
[btn1 setFrame:CGRectMake(20, 66, 72, 37)];
[btn2 setFrame:CGRectMake(228, 66, 72, 37)];
[btn4 setFrame:CGRectMake(228, 388, 72, 37)];
[btn3 setFrame:CGRectMake(20, 388, 72, 37)];
case UIInterfaceOrientationLandscapeLeft:
case UIInterfaceOrientationLandscapeRight:
[btn1 setFrame:CGRectMake(20, 66, 72, 37)];
[btn2 setFrame:CGRectMake(388, 66, 72, 37)];
[btn4 setFrame:CGRectMake(388, 247, 72, 37)];
[btn3 setFrame:CGRectMake(20, 247, 72, 37)];
    return YES;

Code Explanation: In the above code the line

UIInterfaceOrientation currentOrientation = [[UIDevice currentDevice]orientation];

Will get the current orientation position of your device and then with then help of switch case, you can select what sort of look will your view have when your iPhone will be rotated in either landscape mode or in portrait mode, you can do that by setting the frames of the views.

So now your final output will be something like this

I hope this post was helpful to you comments and queries are always welcome,
Happy iCoding and have a great Day

No comments:

Post a Comment