CODEWITHSUNDEEP
iphoneipadsdkuiimagevieworientation
Salah
Salah

Reputation: 511

iPad SDK, how to handle orientation with an UIImageView

I'm developing an app for iPad and I try to handle multiple orientation. My app contains a webview and a loading UIImageView that appears when my webview is loading content.

This UIImageView has a background image that I set in InterfaceBuilder. When I change orientation to landscape, the image is cut.

I'd like the UIImageView to set image-portrait.png when the ipad is in portrait mode and image-landscape.png when it's in landscape mode.

Thank you for your help and advices!

Screenshots :

alt text alt text

Upvotes: 6

Views: 11523

Answers (6)

Daniel K
Daniel K

Reputation: 1129

It is interesting that programmers have such a tough time thinking outside the box (literally in this case).

Try this (how I solved this myself).

  1. Create a square image.
  2. Set the constraints of the uiimageview to fill in the screen (leading, trailing, top, bottom)
  3. Set the mode to aspect fill (which will enlarge the image, but keep its aspect ratio constant)

Done.

The key here is, of course, that you should create a square image (which is, as I said above, outside the box ;-)

Upvotes: 0

FractalDoctor
FractalDoctor

Reputation: 2546

I'd actually add another branch to docchang's code as when the iPad is rotated to portrait upside own it uses the portrait right-side-up image which can look a little odd. I added, 

if (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft) 
  {
  imageBackgroundView.transform = CGAffineTransformMakeRotation(M_PI / 2);
  }
else
  if (toInterfaceOrientation == UIInterfaceOrientationLandscapeRight)
    {
    imageBackgroundView.transform = CGAffineTransformMakeRotation(-M_PI / 2);
    }
  else
    if (toInterfaceOrientation == UIInterfaceOrientationPortraitUpsideDown)
    {
    imageBackgroundView.transform = CGAffineTransformMakeRotation(M_PI);
    }
    else 
      {
      imageBackgroundView.transform = CGAffineTransformMakeRotation(0);
      }

Upvotes: 0

Arunjack
Arunjack

Reputation: 621

You can handle the orientation by autoresizing the view. 

UIImageView *imageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"background-image"]];

imageView.frame = self.view.bounds;
imageView.autoresizingMask=UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight
iimageView.contentMode = UIViewContentModeScaleAspectFill;

[self.view addSubview:imageView];
[self.view sendSubviewToBack:imageView];

[imageView release];

This will be make solution to your problem.

Upvotes: 3

tiguero
tiguero

Reputation: 11537

While Salah your answer looks ok to me i believe you can do two improvements here:

  1. Set the background image within this function:

    -(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation

    duration (NSTimeInterval)duration

    if you do the change within the didRotateFromInterfaceOrientation you will change the background image once you have finished to rotate the IPad and the transition from the two background image won't be smooth: you will clearly see the new background image popup at the end of the rotation.

  2. Improve setting the myImageView.image value:

    _myImageView.image = UIInterfaceOrientationIsLandscape(interfaceOrientation) ? [UIImage imageNamed:@"image-landscape.png"] : [UIImage imageNamed:@"image-portrait.png"];

Upvotes: 1

docchang
docchang

Reputation: 1125

It took me awhile to understand this concept. I didn't want to create the same image portrait and landscape. The key here is that CGAffineTransformMakeRotation rotates from the original state of your UIImageView or any UIView for that matter. This assumes your background image has orientation to it. E.g. You want your UIImageView to stay put, while other objects behaves to normal orientation change event.

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation 
                                duration:(NSTimeInterval)duration {

    if (toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft) {        
        backgroundImage.transform = CGAffineTransformMakeRotation(M_PI / 2);
    }
    else if (toInterfaceOrientation == UIInterfaceOrientationLandscapeRight){
        backgroundImage.transform = CGAffineTransformMakeRotation(-M_PI / 2);
    }
    else {
        backgroundImage.transform = CGAffineTransformMakeRotation(0.0);
    }
}

Upvotes: 5

Salah
Salah

Reputation: 511

I found a solution :

In Interface Builder, I set the autosizing of my ImageView to auto fill the screen. In my ViewController, I add a method to detect the change of orientation and I set the appropriate image depending if the iPad is in portrait or landscape :

-(void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
if((self.interfaceOrientation == UIDeviceOrientationLandscapeLeft) || (self.interfaceOrientation == UIDeviceOrientationLandscapeRight)){
    myImageView.image = [UIImage imageNamed:@"image-landscape.png"];
} else  if((self.interfaceOrientation == UIDeviceOrientationPortrait) || (self.interfaceOrientation == UIDeviceOrientationPortraitUpsideDown)){
    myImageView.image = [UIImage imageNamed:@"image-portrait.png"];
} }

Upvotes: 7

Related Questions