Setting Uiimageview Image Affects Layout Constraints

Setting UIImageView image affects layout constraints

Try to lower the content compression/hugging. I think (correct me if I am wrong) the UIImageView has by default a higher compression/hugging resistance than a UIView (251 to 250). You could try the code below:

someImage.setContentHuggingPriority(UILayoutPriority(rawValue: 249), for: .horizontal)
someImage.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 249), for: .horizontal)
someImage.setContentHuggingPriority(UILayoutPriority(rawValue: 249), for: .vertical)
someImage.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 249), for: .vertical)

what is wrong with constraints in my UIImageView and why I cannot stretch the image on my UIViewController?

To have the image stick to both sides of screen and maintain the aspect ratio, set these 4 constraints:

1. Leading Edge of ImageView to Leading Edge of SuperView.
2. Trailing Edge of ImageView to Trailing Edge of SuperView.
3. Top Edge of ImageView to Top Layout Guide Bottom.

4. Set an aspect ratio constraint: ImageView Width equal to ImageView Height with multiplier 480:640. To set this, control-drag diagonally in the ImageView and select Aspect Ratio from the pop-up. Then change the multiplier to 480:640.

   

Set the content mode for the image to Scale to fill.

UIImageView auto-created content size auto layout constraints overlap with trailing/leading constraints

I've googled the source of your view and found it at GitHub.
After looking into the implementation I found following code fragment:

- (CGSize)intrinsicContentSize
{
    // Default to let UIImageView handle the sizing of its image, and anything else it might consider.
    CGSize intrinsicContentSize = [super intrinsicContentSize];

    // If we have have an animated image, use its image size.
    // UIImageView's intrinsic content size seems to be the size of its image. The obvious approach, simply calling `-invalidateIntrinsicContentSize` when setting an animated image, results in UIImageView steadfastly returning `{UIViewNoIntrinsicMetric, UIViewNoIntrinsicMetric}` for its intrinsicContentSize.
    // (Perhaps UIImageView bypasses its `-image` getter in its implementation of `-intrinsicContentSize`, as `-image` is not called after calling `-invalidateIntrinsicContentSize`.)
    if (self.animatedImage) {
        intrinsicContentSize = self.image.size;
    }

    return intrinsicContentSize;
}

It seems that in case of animatedImage the size will be reduced to the original image size.

The apple documentation tells about intrinsic content size:

In general, the intrinsic content size simplifies the layout, reducing the number of constraints you need

This can be interpreted as intrinsic content size usage already adds size constraints. For more informations about intrinsic content size usage see: Apple Documentation

One solution might be (not sure if there are some side effects) to use a subclass that overrides intrinsic content size like that:

override var intrinsicContentSize: CGSize {
    return CGSize(width: UIViewNoIntrinsicMetric, height: UIViewNoIntrinsicMetric)
}

BTW: Please provide a link to the sources in next questions, it save us time searching for it. Thanks!

Setting UIImageView Width, Height, Aspect Ratio & Constraints X, Y

As soon as you set headerImage.translatesAutoresizingMaskIntoConstraints = false, the frame is ignored. You need to set some constraint to establish the height of your UIImageView. Unfortunately, the image contents does not affect the height of the UIImageView.

Set either:

1. an absolute height constraint
2. an offset from the bottom of the superView
3. height relative to the width with a multiplier (an "aspect ratio constraint")

Based on my comment, you turned off headerImage.translatesAutoresizingMaskIntoConstraints = false and it worked.

This gives you extra constraints (your 3 plus the 4 that are generated from the frame), but luckily they aren't conflicting.

Instead, I would suggest you leave the translatesAutoresizingMaskIntoConstraints set to false and set a constraint for the height:

headerImage.heightAnchor.constraint(equalToConstant: 95).isActive = true

---

Related Topics