An issue with Content Hugging and Content Compression Resistance, Autolayout Constraints

Question

I have modified the question to be more information provided and clear.

I wanted to have a dynamic table view cell, with a flexible height of UITextView and an optional UIImageView. Based on the content size of the UITextView and the optional UIImageView, the cell can be shrunk or extended.

Here is what I expected to have (with the below picture):

• Normal size: height of TextView is fixed (say 77). ImageView width and height are also fixed (say 130, 130)
• When content size of TextView decreasing, cell is shrunk and ImageView moves up.
• When there is no image in ImageView, the ImageView is not displaying, cell is shrunk.

The below is the structure of views:

• mainView is subview of contentView
• topView, textView, bigImageView, bottomView are subviews of mainView

However, what I actually got is as follows.

• Left picture: if the content size is large, then the ImageView cannot be seen.
• Right picture: If the content size is one line, the ImageView can be seen, but its width and height are not fixed 130, 130

The warning issue is as follows:

If I fixed it by selecting "Add Missing Constraints", the result I got is as below:

• Right picture showing that the height of TextView is not flexible anymore.

TextView's constraints, Content Hugging Priority, Content Compression Resistance and Intrinsic Size:

• I didn't use Intrinsic size for this TextView

ImageView's constraints, Content Hugging Priority, Content Compression Resistance and Intrinsic Size:

• I used Intrinsic size for this ImageView

I have been playing around with the Hugging Priority and Compression Resistance Priority for both TextView and ImageView but no luck. None of the results are what I expected.

Please help point out what is wrong in the settings and how to achieve my goal.

Answer 1

The tricky part here would seem to be that when there is an image you want it to be 130x130 but when there is no image you want it to be hidden.

My suggestion would be to add a constraint for the height and width which is <= 130 rather than = 130 and to add a constraint for the aspect ratio which is 1:1.

This will allow the image view to shrink to 0x0 when there is no image.

When there is an image it will scale to the image size, but stay square. It will never go larger than 130x130. Not quite what you wanted but close.

You should not need to worry about hugging and compression I do not think.

To do exactly what you want I think requires code. You need to create IBOutlets for the height and width constraints but this time make them =130. In your code when you set the image into the image view, set the constraint constants in code to either 130 or 0. This I think is the only way to achieve exactly what you are asking for. To do this you CTRL drag from your width and height constraints into the .h for the controller and create the IBOutlets. This is how I deal with constraints which require a decision based on the state of the data model for cells.