0

I'm having this weird issue with my constraints which causes the UILabel (Caption Label) to be a fixed height instead of dynamically changing height depending on the text.

I have a view (Vertical View) with a top constraint on the label above it. The Vertical View contains a view (called View) which I'm using as a divider that is centered from top to bottom with a width of 1. On the left of the divider is a UIImageView (Left Image View) with constraints leading, top, bottom equal to superview and trailing equal to View. I want to do the exact same thing to the UIImageView on the right of the divider but here is where my issue comes up.

If I use a fixed height as seen below, the UILabel above Vertical View dynamically changes its height like I want but this is obviously not how I want the UIImageView on the right to appear. I want it to be similar to the UIImageView on the left of the divider with equal height and width.

Figure 1 with fixed height

If I set the top constraint of the UIImageView on the right to the superview Vertical View, similar to the UIImageView on the left of the divider, the UILabel above Vertical View doesn't dynamically change height anymore. The UILabel now has a fixed height which I believe comes from the fact that UILabel has a height of >= 14.

Figure 2 with top constraint

How can I properly set the constraints so that I can have both UIImageViews next to each other with equal and height contained within the Vertical View and still have the UILabel above Vertical View dynamically change height depending on the text that I set the UILabel to?

josealvarado111
  • 565
  • 1
  • 9
  • 24

1 Answers1

1

On the RightImageView, you first need to get rid of the "Height = 50" constraint. This is what is causing it to be small.

Next, if that alone doesn't fix you, can you try setting the following constraints instead of using the superview for the constrains (instead make it mirror the LeftImageView):

  • Left: Leading spacing to divider view
  • Top: Align top edges to LeftImageView
  • Right: Horizontal space to superview (your vertical container view)
  • Bottom: Align bottom edges to LeftImageView

This should allow the views to remain the same height and width (assuming your distances between left/right edge of vertical container view are the same, and the distances between divider are the same).

Now, ensure the size constraint for width of the divider is set to 1 and not >= 1. Also, ensure the vertical container view has a Compression lower than the Label.

One final note--your screenshot shows the result that IB is showing you (with the dotted yellow box) on the LeftImageView. One you update your constraints correctly, this yellow box should go away.

Regarding the UILabel - if you want this to grow dynamically, you need to do the following:

myUILabel.numberOfLines = 0;
myUILabel.text = @"Enter large amount of text here";
[myUILabel sizeToFit];
thephatp
  • 1,479
  • 1
  • 20
  • 37
  • can you expand on what you mean by "ensure the vertical container view has a Compression lower than the Label"? The caption label has a Content Hugging Priority of 251 for Horizontal and Vertical with a Content Compression Resistance Priority of 750 for both Hor and Ver. The vertical container view now has a content compression resistance priority of 750 horizontal and 250 vertical and a content hugging priority of 250 for both Hor and Ver. The label is still limited to only 1 line of text. – josealvarado111 Jun 01 '16 at 01:22
  • @user2492566, check out the post here: http://stackoverflow.com/questions/15850417/cocoa-autolayout-content-hugging-vs-content-compression-resistance-priority for solid info on compression vs hugging. I think you already get that, though, based on your numbers. I'll update my answer with details on getting the label to grow. Hope this helps. Let me know. – thephatp Jun 01 '16 at 02:26
  • Thank you so much! Your explanation plus the link you provided help me solve my problem! – josealvarado111 Jun 01 '16 at 04:43