iOS - Auto Layout issue with constraints priority and compression resistance

Question

I have been working on improving myself concerning Auto Layout and creating design.

I have read a lot about constraints priority, compression resistance and hugging priority but also intrinsic content size.

After re-creating almost all xib/storyboard files in my project, I have been struggling with a simple design of a custom UICollectionViewCell.

Here is the required design :

But I can't seem to create appropriate constraints in order to handle all screen resolution (specifically iPhone 5).

Here is what I have done :

I have create 2 separated views, title view at the top, and contentView.

Concerning the Blue and Gray Views :

Now in order to always have approximately same look on different screen device, I added a constraint equal height between the blue view and the contentView (white view), with constant 1:3. Which means the blue view will always be 1/3 of the parent white view.

And for the gray view, I have added an equalHeight constraint with the blue view equal to 1:2.

The UILabel and the 2 UIImage Views:

Now the fun part begin, I have setup trailing, top and bottom constraint for the UILabel in the blue view, and same but leading for the big ImageView which is outside, with horizontal constraints between the UILabel and the alert icon Image View, and horizontal constraint between the 2 Images Views.

Now I know I have auto layout constraint ambiguity because it doesn't know which element to compress or to clip.

EDIT : So I changed the content hugging priority of the UILabel to 1000 and now I have all my 3 elements but on an iPhone 5 the result is a catastrophe.

EDIT : Here is a global image with all the constraints. It doesn't look good on iPhone 5.

Answer 1

You have a constraint ambiguity because you have to set width/height constraints for the alertImageView and warningImageView, beside set contentHugging priority horizontal of the label to 1000

Also it's possible to create H spacing between the alertView and the warningView despite not being on the same container.