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

1
votes

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.

enter image description here

The below is the structure of views:

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

enter image description here

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

enter image description here

The warning issue is as follows:

enter image description here

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.

enter image description here

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

  • I didn't use Intrinsic size for this TextView

enter image description here

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

  • I used Intrinsic size for this ImageView

enter image description here

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.

1
iosautolayoutconstraints
Are you getting any errors in the console about constraints not being satisfied? This layout should be ok as long as you have the image width/height fixed and the bottom of the image pinned to the outer view and the top pinned to the text area. If the blue area is a view inside the contentView, it needs pinned to the bottom of the contentView as well. Best to look at it in the preview panel to see how it will come out on screen. Your images seem to be from the storyboard? – Rory McKinnel
Thanks Rory. I was in rush to ask the question, but now I reckon the information of my question is not so clear and confusing. I will modify it now. – redstone
Setting "Intrinsic Size" in IB never has any effect at run time. It's just a way to inform IB that a view will have an intrinsic size at run time so that it doesn't complain or do the wrong thing at design time. If what you tell IB about run time is wrong, then you'll get wrong results. In other words, you should almost never change that setting. If you want the image view to always size itself based on the image it's showing, set its hugging and compression resistance priorities to 1000. Similarly for the text view. Avoid setting explicit size constraints if possible. – Ken Thomases
I changed 'intrinsic size' back to default, and also set their hugging and compression resistance priorities to 1000, but it is still wrong. Did I have anything missing? – redstone
Which specific wrongness are you getting now? – Ken Thomases

1 Answers

3
votes

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.