Make a UIImageView and its UIImage scale proportionally without additional padding

Question

I have a UIView that contains a UIImageView. UIImageViews works as an app brand logo. When I rotate the device containing the UIView, it resizes to fit the landscape or portrait proportions of the screen.

I am trying to get the UIImageView to scale accordingly, keeping the proportions also in the left margin.

This is the actual code for the top white banner:

UIView *topBanner = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, height_topBanner)]; [topBanner setAutoresizingMask:(UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin)]; [topBanner setBackgroundColor:[UIColor whiteColor]]; topBanner.autoresizesSubviews = YES; // the logo UIImage *topBanner_logo = [UIImage imageNamed:@"logo.png"]; float logoAspectRatio = topBanner_logo.size.width/topBanner_logo.size.height; topBanner_logoView = [[UIImageView alloc] initWithFrame:CGRectMake(topBanner.frame.size.width/100*3, topBanner.frame.size.height/100*7, (topBanner.frame.size.height/100*86)*logoAspectRatio, topBanner.frame.size.height/100*86)]; [topBanner_logoView setImage:topBanner_logo]; topBanner_logoView.backgroundColor = [UIColor blueColor]; topBanner_logoView.contentMode = UIViewContentModeScaleAspectFit; [topBanner_logoView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleRightMargin)]; [topBanner addSubview:topBanner_logoView]; [self.view addSubview:topBanner]; 

This is my starting point: iPad portrait at startup:

This is what happens when I rotate it in the landscape:

As you can see, the proportions of the UIImage are fine, but I get extra borders (I set the background color of the UIImageView to highlight it), because the UIImageView is stretched to keep track of the resizing of its container, and the UIImage fits into the UIImageView and fits in its center .

The same thing - the opposite - happens when I launch the application directly in landscape mode:

Then rotate it:

... and I get a logo with extra borders at the top and bottom.

I see that I can write a function to recalculate each size each time the rotation changes, but I ask myself if there is a way to set UIImageView and UIImage so that it works without breaking the autorotation / resizing of the iOS procedure. It sounds so simple!

Answer 1

You have configured the auto resize mask to flexible height and width:

 [topBanner_logoView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin|UIViewAutoresizingFlexibleBottomMargin|UIViewAutoresizingFlexibleRightMargin)]; 

If you do not, the default is that the view will not have a random size, so the image will not be either.

Answer 2

I think this is due to topBanner_logoView.contentMode = UIViewContentModeScaleAspectFit;

Try topBanner_logoView.contentMode = UIViewContentModeCenter or topBanner_logoView.contentMode = UIViewContentModeLeft so that the UIImageView image does not change (and it fills).

If the UIImageView resizes, remove the autoresist mask.

Answer 3

You can solve this problem without using the UIViewContentModeScaleAspectFit , and instead calculate the aspect ratio of the image and use this for an explicit width or height based on another (width or height).

eg. I turn to the landscape and therefore want the height to be 80% of the point of view.

  CGFloat w = logo.image.size.width; CGFloat h = logo.image.size.height; CGFloat a = w / h; CGFloat h_use = self.view.height *0.8; CGFloat w_use = h_use*a; 

Also, now set the content mode to UIViewContentModeScaleAspectFill if you explicitly set the aspect ratio.