Rotating a full screen UIImageView

Question

I have two images:

Help-Portrait.png (320 x 480)
Help-Landscape.png (480 x 320)

When a user clicks the help button on any view, they need to be presented with the correct image, which should also rotate when the device does. I have tried adding the imageView to both the window, and the navigation controller view.

For some reason I am having issues with this. Could anyone shed light on what I am doing wrong?

UIImage *image = nil;
CGRect frame;
if (UIInterfaceOrientationIsPortrait([[UIApplication sharedApplication] statusBarOrientation])) {
    image = [UIImage imageNamed:@"Help-Portrait.png"];
    frame = CGRectMake(0, 0, 320, 480);
} else {
    image = [UIImage imageNamed:@"Help-Landscape.png"];
    frame = CGRectMake(0, 0, 480, 320);
}
if (!helpImageView) {
    helpImageView = [[UIImageView alloc] initWithFrame:frame];
    helpImageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
    helpImageView.image = image;
}
[[UIApplication sharedApplication] setStatusBarHidden:YES];

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(helpImageTapped:)];
helpImageView.userInteractionEnabled = YES;
[helpImageView addGestureRecognizer:tap];
[self.view addSubview:helpImageView];
[tap release];

willRotateToInterfaceOrientation:

if(helpImageView) {
    [(id)[UIApplication sharedApplication] setStatusBarHidden:NO animated:YES];
    if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation)) {
        helpImageView.image = [UIImage imageNamed:@"Help-Portrait.png"];
    } else {
        helpImageView.image = [UIImage imageNamed:@"Help-Landscape.png"];
    }
}

When you rotate the device the image and the frame don't change, and you end up with two thirds of the portrait image displayed on the left part of the screen.

What I want is it for it to show the correct image for the orientation, the right way up. Also I would like animation for the image rotation, but thats a side issue

is it just the image inside it that is not appearing correctly? or is it the button position and rotation that isn't working well either? — Michael Dautermann, Dec 19 '11 at 14:38
The UIViewController underneath is rotating fine and the image always initially adds to the view correctly. I just get the wrong image displayed on two thirds of the screen when it rotates. (Rotating back displays the image correctly again) — Andrew, Dec 19 '11 at 14:42
are you working in the simulator or on a device? The simulator doesn't get initial orientation but the device does. — Damo, Dec 19 '11 at 14:46
The code is in shouldAutorotateToInterfaceOrientation using if (UIInterfaceOrientationIsPortrait(toInterfaceOrientation)) { helpImageView.image = [UIImage imageNamed:@"Help-Portrait.png"]; } else { helpImageView.image = [UIImage imageNamed:@"Help-Landscape.png"]; } — Andrew, Dec 19 '11 at 15:00
Updated the code to what I am using now. This displays the portrait image correctly, but displays the landscape one squashed the wrong way — Andrew, Dec 19 '11 at 15:18

Michael Dautermann · Answer 1 · 2011-12-19T18:09:15.500

0

The place where you need to adjust your button image is in your ViewController's shouldAutorotateToInterfaceOrientation method (documentation linked for you).

Do something like:

- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation
{
    UIImage *image = NULL;

    if (UIInterfaceOrientationIsPortrait(interfaceOrientation))
    {
        image = [UIImage imageNamed:@"Help-Portrait.png"];
    } else {
        image = [UIImage imageNamed:@"Help-Landscape.png"];
    }
    [yourButton setImage: image forState: UIControlStateNormal]
    return YES;
}

edited Dec 19 '11 at 18:09

answered Dec 19 '11 at 14:50

Michael Dautermann

88,797
17
166
215

I'm doing that already. Its still getting the frame wrong, and the image the wrong way around – Andrew Dec 19 '11 at 15:02
did you set your struts and springs correctly on your button within the xib in Xcode's Interface Builder? You should not have to be doing a `setFrame` call when you rotate... unless you are actually changing the size of the button depending on orientation. – Michael Dautermann Dec 19 '11 at 15:06
I've fixed the frame issue by setting the auto resize mask: UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth on the UIImageView (its not a button) but its now displaying the landscape help image squashed portrait – Andrew Dec 19 '11 at 15:09
Should I be rotating the UIImageView the opposite way to the UIViewController rotating to compensate? – Andrew Dec 19 '11 at 15:13
sure! try that for the upside down views... [here is another S.O. question with answers that may help you](http://stackoverflow.com/questions/1315251/how-to-rotate-a-uiimage-90-degrees). – Michael Dautermann Dec 19 '11 at 16:06
You could remove that horrible `switch` statement with a simpler `if (UIInterfaceOrientationIsPortrait(interfaceOrientation)) {` which is much nicer to look at and possibly easier to follow. – Paul.s Dec 19 '11 at 17:12
Done. I appreciate that everyone has a different programming style. – Michael Dautermann Dec 19 '11 at 18:10

score 0 · Answer 2 · answered Dec 19 '11 at 20:02

Michael Dautermann's answer looks to have almost all the answer, but I'm opposed to using shouldAutorotateToInterfaceOrientation. This method is designed only to determine if a rotation should or should not occur, nothing else.

You should use either didRotateFromInterfaceOrientation: willAnimateRotationToInterfaceOrientation:duration instead.

didRotateFromInterfaceOrientation: - interfaceOrientation is already set on your UIViewController so you can get the current orientation. In this case the rotation animation is already complete.

willAnimateRotationToInterfaceOrientation:duration - The benefit of this method is execution time. You are inside the rotation animation so you won't have the less than pretty effects which happens when you change UI either after the rotation animation completes.

score 0 · Accepted Answer · answered Dec 20 '11 at 09:20

Got it working, with this code:

- (void)showHelpImage {

    NSString *imageName = @"Help_Portrait.png";
    CGRect imageFrame = CGRectMake(0, 0, 320, 480);

    helpImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
    helpImageView.frame = imageFrame;
    [self.view addSubview:helpImageView];
    [self updateHelpImageForOrientation:self.interfaceOrientation];

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(helpImageTapped:)];
    helpImageView.userInteractionEnabled = YES;
    [helpImageView addGestureRecognizer:tap];
    [self.view addSubview:helpImageView];
    [tap release];
}

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

- (void)updateHelpImageForOrientation:(UIInterfaceOrientation)orientation {
    NSString *imageName = nil;
    CGRect imageFrame = helpImageView.frame;
    if (orientation == UIInterfaceOrientationPortrait || orientation == UIInterfaceOrientationPortraitUpsideDown) {
        imageName = @"Help_Portrait.png";
        imageFrame = CGRectMake( 0, 0, 320, 480);
    } else if (orientation == UIInterfaceOrientationLandscapeLeft || orientation == UIInterfaceOrientationLandscapeRight) {
        imageName = @"Help_Landscape.png";
        imageFrame = CGRectMake( 0, 0, 480, 320);
    }
    helpImageView.image = [UIImage imageNamed:imageName];
    helpImageView.frame = imageFrame;
}

Got the idea from: http://www.dobervich.com/2010/10/22/fade-out-default-ipad-app-image-with-proper-orientation/

For those who ask, this method wouldn't work without altering the frame. So that code DOES need to be there — Andrew, Dec 20 '11 at 09:22

Rotating a full screen UIImageView

3 Answers3