How to change uiview's height using auto layout?
Asked Answered
G

3

5

So I created this scenario in order to understand how views increase in height according to their content. However am still not able to make it happen.

This is what I have now:

enter image description here

the textview is growing according to content. however the uiview containing it is disappearing. what constraints should I use so that when the uitextview becomes bigger, its parent view also increase in height?

Gertrudgertruda answered 23/11, 2014 at 12:56 Comment(0)
D
1

ON UITextView make your you unselected These

  • Scrolling Enabled
  • Bounces
  • Bounce Horizontally
  • Bounce Vertically
  • Shows Horizontal Indicator
  • Shows vertical indicator

Now Change your auto layout constraints like this.

enter image description here

Constraints for parent view

Dappled answered 23/11, 2014 at 14:2 Comment(2)
Thanks a lot :) It made sense now !!Gertrudgertruda
Could you check my other scenario because I can't control the table's header view : #27078318Gertrudgertruda
B
10

Start by clearing all your constraints from everything so we have a fresh slate.

Step 1: Build your view hierarchy. In this example, we want something like this:

enter image description here

The view controller's view, which we'll call parentView has a subview, which we'll call redView. That redView has a child, a Text Field, which we'll call textField.

The hierarchy looks like this:

enter image description here

Step 2: Set any constraints that are specific to any individual view. In this case, we probably only want to set a width constraint on our text view. For now, I'll just set a width of 200pts.

enter image description here

Step 3: Set the constraints between textView and its parent, redView. Let's say we want a 10pt border all the way around. Let's add these constraints:

enter image description here

Once we've added these constraints we'll gets some auto layout warnings and errors. For starters, because the constraints I added for with and space to superview don't match the actual sizes, I'll get some warnings like this:

enter image description here

There will also be some errors describing missing X and Y positions for redView and for textView. There are really twice as many errors here as necessary. textView knows where to position itself relative to redView. We don't need more constraints to sort out textView's position. However, redView doesn't know where to position itself yet... and so ultimately, textView also sort of doesn't exactly know.

We can update the textView's frame to get rid of the warnings, but let's go ahead and fix the actual errors.

Step 5: Set up redView's constraints relative to the superView. redView already know what size to be. Notice we had no errors for redView's width. It just doesn't know where to be. In this case, I'll go simple and say we want redView to be centered. So we'll want to add these constraints:

enter image description here

Now we've fixed some of the problems. The only problem that remains is the height for everything.

To fix this, we must set the content sizing priorities of textView. Set these all to 1000 and change the "Intrinsic Size" property to "Placeholder".

enter image description here

By now, all of the auto layout errors should be gone and we should only be left with warnings because our storyboard frames don't match what our constraints say they should.

We can fix that by selecting parentView and updating all the frames:

enter image description hereenter image description here

There's one final caveat to this auto layout puzzle when it comes to autosizing based on content size: what happens if our text view has no content?

If our textview has no content, auto layout will choose a height of 0, and our users won't even be able to see that there's a text view there, much less tap in it to add content (and make it expand). When using auto layout and content-based sizing, we should almost always be sure that we've set either an explicit or minimum size for the content view.

We don't have to worry about our textView's width, as we set this explicitly to 200. So let's add a minimum height constraint. Start by adding any height constraint:

enter image description here

Now go to the size inspector for the textView, find this height constraint we added, and edit it into a greater than or equal to constraint:

enter image description here

Storyboard won't reflect the change in content in our textView and resize it appropriately, but your constraints are now set up correctly and this will behave appropriately on your device or in the simulator.

Bub answered 23/11, 2014 at 13:20 Comment(1)
I think we also need to add width constraint on the red view.Dappled
D
1

ON UITextView make your you unselected These

  • Scrolling Enabled
  • Bounces
  • Bounce Horizontally
  • Bounce Vertically
  • Shows Horizontal Indicator
  • Shows vertical indicator

Now Change your auto layout constraints like this.

enter image description here

Constraints for parent view

Dappled answered 23/11, 2014 at 14:2 Comment(2)
Thanks a lot :) It made sense now !!Gertrudgertruda
Could you check my other scenario because I can't control the table's header view : #27078318Gertrudgertruda
G
-2

On the Storyboard Page, click on your textview. Then click on the small triangular in the lower right corner.

Click first on "Clear Constraints". An then on "Add Missing Constraints".

Its the easiest way.

Guadalupeguadeloupe answered 23/11, 2014 at 13:13 Comment(2)
It might be easy, but it's far from explicit, and won't always do what you need it to do, such as in this case.Bub
I think the textview height is dynamic and you wont be able to adjust the height of the review directly.Dappled

© 2022 - 2024 — McMap. All rights reserved.