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:
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:
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.
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:
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:
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:
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".
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:
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:
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:
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.