CODEWITHSUNDEEP
iosxcodeinterface-builderautolayout
RanLearns
RanLearns

Reputation: 4176

Basic Understanding of Autolayout

I've watched all relevant Autolayout WWDC Videos from 2012/13/14, and CS193P, and tutorials from a few other trusted sources. Using that knowledge and some trial and error, I've been able to use Autolayout to create some fairly complex screens, but occasionally I hit a stumbling block which shows me that my understanding of Autolayout is not complete. So I've recreated the simplest scenario I could think of to showcase one question that would be extremely useful to have answered:

Simple Autolayout Error

In this situation, we've got two views:

The vertical positioning is determined by the top and bottom constraints with no errors, but the views both report "Missing Constraints" as they "Need constraints for: X position or width."

I thought that the left view's X position is determined by being pinned to the left, and its width would grow/shrink as wide as it needs to be to still have a space between itself and the right view which is pinned to the right.

I can see how it would be an issue for Autolayout to know which of the views would be the one to grow to meet the other - but I thought that was resolved by giving one view a higher Horizontal Compression Resistance Priority (or Horizontal Hugging). The view that is more resistant to being compressed or has a higher hugging value would stay the same width that it had in the Canvas and the other view would change its width to satisfy the constraints. Changing these priority values is not affecting the missing constraints errors.

As can be seen in the screenshot, in the "Misplaced Views" section on the left, there is one view that has an expected width of more than double its canvas value, and one view that has an expected width of 0. This matches up with the error that we need constraints for width, but why?

I believe understanding why this is could be helpful in understanding more complex Autolayout relationships. Thanks in advance!

Upvotes: 1

Views: 1252

Answers (2)

Prajeet Shrestha
Prajeet Shrestha

Reputation: 8108

All the other constraints are set perfectly. One missing. Set Equal width between those two views. And if you dont see layout as you wanted, adjust, horizontal spacing between those two and leading space of red view with respect to super view and trailing space of blue view with respect to superview.

Upvotes: 2

Ken Thomases
Ken Thomases

Reputation: 90521

The Content Hugging and Compression Resistance priorities apply only to the view's intrinsic content size. Your views don't have any intrinsic content size, so they aren't relevant. (Paulw11's comment is incorrect in suggesting that those priorities would be in effect if the view had subviews with intrinsic content size. Those subviews would have meaningful Content Hugging and Compression Resistance priorities, but the containing view would not.)

If you add subviews with intrinsic content size and add constraints that effectively relate those subviews' size to the containing view's size, that would be sufficient.

Otherwise, you would need to provide explicit width constraints to one or both views. If you like, those constraints can have non-required priorities and, if you provide both, their priorities can (should) be different so that one would be broken before the other. You could even apply multiple width constraints at various priorities to achieve various layouts. (As a simple example, you could create constraints that require that the views width be greater than or equal to a certain amount. That way a view with a relatively low-priority preferred width will still shrink if necessary to accommodate the other view's higher-priority preferred width, but only so far.)

Upvotes: 2

Related Questions