Scaling UIImageView to fit width with AutoLayout

3
votes

I have a UIImageView on top of a UIScrollView, and I would like it to fit the device width, its height then being automatically set so that the image ratio is preserved.

I am using Auto Layout, so I used constraints to bind the UIImageView to the top, left and right edges of the screen. My problem is, the UIImageView automatically resizes its frame to fit the UIImage height. And I cannot really change this frame afterwards, as it lets a gap between the UIImageView and the other UI elements, that are supposed to be just under it.

I found a workaround by manually resizing the image to the good size before putting it into the UIImageView, but it isn't very efficient, and it creates problem when the view is resized, for example when the device rotates.

Has anyone found a way to force the UIImageView to change its frame and to keep it rather than using the image's size ?

Pierre

EDIT : I added screenshots so you can see the problem.

screenshot

And here is the expected result :

expected result

2
iosuiimageviewautolayout
Have you played with the content hugging priorities of the image view? Try lowering them. – Zev Eisenberg
They are already at 250, and no constraint is lower than them. I tried to put them at 249, and it didn't change anything. Again, I don't think that is the problem because the frame height is set to the image height when image is put into imageView. As everything is put on a scrollView, the imageView takes all the height it wants. – Pierre

2 Answers

8
votes

OK, I found a suitable solution to my problem.

I calculate the correct height that I want for my picture like this :

correctedHeight = screenWidth / width * height

After that, I add a height constraint programmatically in the updateViewConstraints method.

I use this code :

[imageView addConstraint:[NSLayoutConstraint constraintWithItem:imageView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant: correctImageViewHeight]];

Two things to think of after that :

  • removing the constraint each time this method is called (otherwise you end up with conflicting constraints). To achieve this, I use [imageView removeConstraint: imageView.constraints.lastObject] ;
  • putting[super updateViewConstraints] ; inside the method. If you forget, it crashes.

I haven't done it yet, but I can easily see how I could update my correctHeight variable when the device rotates.

0
votes

Use the following code

imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.autoresizingMask =   
    ( UIViewAutoresizingFlexibleBottomMargin
    | UIViewAutoresizingFlexibleHeight
    | UIViewAutoresizingFlexibleLeftMargin
    | UIViewAutoresizingFlexibleRightMargin
    | UIViewAutoresizingFlexibleTopMargin
    | UIViewAutoresizingFlexibleWidth );

Can you provide code?