iPad - Change image depending on device orientation (Portrait or Landscape)

Question

Inside my viewDidLoad method, I am applying a "loading image" that appears until a webView had completed loading. I would like to specify a different loading image depending on which orientation (portrait or landscape) the iPad is in.

I found this page which is what I based my code from.

My code is shown below. (this is all contained within my viewDidLoad method). This only works in Portrait mode at the moment. Any idea why my landscape code isn't being called? Please help!

//detect if iPad    
if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
//if in Portrait Orientation
            if([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationPortrait) {
                loadingImage = [UIImage imageNamed:@"webView-load-image-Portrait~ipad.png"];
                loadingImageView = [[UIImageView alloc] initWithImage:loadingImage];
                loadingImageView.animationImages = [NSArray arrayWithObjects:
                                                    [UIImage imageNamed:@"webView-load-image-Portrait~ipad.png"],
                                                    nil];
            }
//if in Landscape Orientation
            if([[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeLeft
               || [[UIApplication sharedApplication] statusBarOrientation] == UIInterfaceOrientationLandscapeRight) {
                loadingImage = [UIImage imageNamed:@"webView-load-image-Landscape~ipad.png"];
                loadingImageView = [[UIImageView alloc] initWithImage:loadingImage];
                loadingImageView.animationImages = [NSArray arrayWithObjects:
                                                    [UIImage imageNamed:@"webView-load-image-Landscape~ipad.png"],
                                                    nil];
            }

        }

UPDATE

I know you're supposed to be able to use image file name modifiers so that the device will automatically pull the correct image. I have tried putting webView-load-image.png in my app images folder with all the correct extensions (and removing the -Portrait~ipad from the file name):

• webView-load-image~iphone.png
• webView-load-image@2x~iphone.png
• webView-load-image-Landscape~ipad.png
• webView-load-image-Landscape@2x~ipad.png
• webView-load-image-Portrait~ipad.png
• webView-load-image-Portrait@2x~ipad.png

and it is still not working :(

Answer 1

Glad you figured it out, but for goodness sake, remove the hardcoded numeric values for orientation!! There are enums declared for this:

typedef NS_ENUM(NSInteger, UIDeviceOrientation) {
    UIDeviceOrientationUnknown,
    UIDeviceOrientationPortrait,            // Device oriented vertically, home button on the bottom
    UIDeviceOrientationPortraitUpsideDown,  // Device oriented vertically, home button on the top
    UIDeviceOrientationLandscapeLeft,       // Device oriented horizontally, home button on the right
    UIDeviceOrientationLandscapeRight,      // Device oriented horizontally, home button on the left
    UIDeviceOrientationFaceUp,              // Device oriented flat, face up
    UIDeviceOrientationFaceDown             // Device oriented flat, face down
};

and

typedef NS_ENUM(NSInteger, UIInterfaceOrientation) {
    UIInterfaceOrientationPortrait           = UIDeviceOrientationPortrait,
    UIInterfaceOrientationPortraitUpsideDown = UIDeviceOrientationPortraitUpsideDown,
    UIInterfaceOrientationLandscapeLeft      = UIDeviceOrientationLandscapeRight,
    UIInterfaceOrientationLandscapeRight     = UIDeviceOrientationLandscapeLeft
};

And you should probably check your viewController's interfaceOrientation rather than device orientation.

Also, check out the following macros:

UIInterfaceOrientationIsPortrait(orientation)
UIInterfaceOrientationIsLandscape(orientation)

Your code should look more like:

UIInterfaceOrientationIsLandscape(self.interfaceOrientation) {
    // show landscape image
} else {
    // show portrait image
}

Answer 2

I figured it out myself. Here's what worked for me in case anyone else is having the same issue:

//ViewController.h
@interface ViewController : GAITrackedViewController {
    // ...other code
    UIImage *loadingImage;
}

@property(nonatomic, strong) UIImageView *loadingImageView;


//ViewController.m
    - (void)viewDidLoad
    {
        [super viewDidLoad];

        ...bunch of other code....

    // Subscribe to device orientation notifications, and set "orientation" - will return a number 1-5, with 5 being "unknown".
        [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
        UIInterfaceOrientation orientation = [UIDevice currentDevice].orientation;

    //**************** Start Add Static loading image  ****************/
        //if iPhone
        if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone) {
        loadingImage = [UIImage imageNamed:@"webView-load-image~iphone.png"];
        loadingImageView = [[UIImageView alloc] initWithImage:loadingImage];
            loadingImageView.animationImages = [NSArray arrayWithObjects:
                                                [UIImage imageNamed:@"webView-load-image~iphone.png"],
                                                nil];
        }

       if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
           if(orientation == 3 || orientation == 4) {
               loadingImage = [UIImage imageNamed:@"webView-load-image-Landscape~ipad.png"];
               loadingImageView = [[UIImageView alloc] initWithImage:loadingImage];
               loadingImageView.animationImages = [NSArray arrayWithObjects:
                                                   [UIImage imageNamed:@"webView-load-image-Landscape~ipad.png"],
                                                   nil];
               NSLog(@"Set webView-load-image iPhone Landscape");

           }
           if(orientation == 5) {
               NSLog(@"Set webView-load-image UNKNOWN");
           }
           if(orientation == 1) {
                loadingImage = [UIImage imageNamed:@"webView-load-image-Portrait~ipad.png"];
                loadingImageView = [[UIImageView alloc] initWithImage:loadingImage];
                loadingImageView.animationImages = [NSArray arrayWithObjects:
                                                    [UIImage imageNamed:@"webView-load-image-Portrait~ipad.png"],
                                                    nil];
                NSLog(@"Set webView-load-image iPad Portrait");
            }


        }

        [self.view addSubview:loadingImageView];
        // End Add Static loading image

Answer 3

I looked back at an App I worked on a while ago and I was doing something similar. This is how I got it to work...

I created a method to handle the change in orientation...

BOOL isPortraitView = YES;

@implementation MyViewController
{
    // a bunch of code...

    - (void)setOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
        if (UIInterfaceOrientationIsPortrait(interfaceOrientation))
        {
            isPortraitView = YES;

            // do other stuff
        }
        else
        {
            isPortraitView = NO;

            // do other stuff
        }
    }

    // other code...
}

It accepts a UIInterfaceOrientation value so you don't have to use the status bar method (if I remember correctly, that method is not the best/most predictable). I also store a class level Boolean value for quick reference. I then call this on the willRotateToInterfaceOrientation method.

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self setOrientation:toInterfaceOrientation];
}

This can also handle an orientation change during the load process.