Autolayout - When using NSLayoutAttributeCenterX what scale does the multiplier use?

Figuring out what the center constraint means when the multiplier is not 1.0 is tricky. I have been experimenting in Xcode 6 and here are my findings.

The corresponding constraint has the form A.center.x = B.center.x * m + c

, where A

and B

are the considered types, m

is the constraint multiplier, and c

is the constraint constant.

Suppose B center.x

is fixed by some other constraint. Then I believe that autorun behaves as if it were using this algorithm:

• Find the closest common ancestor of A and B. Name this common ancestor G.

• Let bxg = Bx center in coordinate system G. You can compute this in code as CGFloat bxg = [G convertPoint:B.center fromView:B.superview].x
  
  .

• Calculate axg = Desired x-center in G-coordinate system. CGFloat axg = bxg * m + c
  
  ...

• Convert axg to coordinate system A.superview
  
  and save it as A.center.x
  
  .

Okay, so with all that in mind, how do we use center constraints to achieve your "evenly distributed views" goal? We don't.

Here's the problem. Suppose all three of your subs have the same width, w. (The problem is even more complicated if they have different widths.) And let's say the container view has width W. There are four margins (one to the left of the leftmost subview, one between the left subview and the middle subview, one between the middle subhead and the right subview. and one to the right of the right peep.)

So the field width should be (W - 3 w) / 4. Then we want to connect this to another constraint somehow. You wanted to use the center constraint, but for the sake of simplicity, consider constraining the left edge in the left view L. We want the constraint to be L.left = (W - 3 w) / 4. This limitation is too difficult for autolayout to handle directly. Autodetect constraints can only include two view attributes, but this is related to three.

The solution is to introduce spacer views. Let's start with our three desired areas:

I've already constrained each of these three subzones to 80x80 and vertically centered.

Now I will add four spacer views, shown in gray:

I have limited each spacer height and vertical center, but I do not have a limit on their width. Next, I will constrain all spacers to the same width:

Then I will bind each leading and trailing edge of the spacer to its nearest neighbors by manually setting the constants to zero. This is how I make my first spacer:

I do the same for the other three pads. I will not show it here.

When I select a view controller and ask Xcode to update all frames, I get evenly spaced views:

Since I don't really want the spacers to be visible at runtime, I'll select them and close them. The hidden views are still part of the layout.

Now what if the subviews don't have the same width? Let's change the width of the blue subset:

Automatic layout updates the frames so that the spacers continue to have the same width.