Xcode Interface Builder：使视图的中心X等于其超级视图的三分之一

Question

I have a two views I'd like to place in a way that they are equally spaced horizontally.

I'd like to define thier Center X so that they are the third and two-thirds of the width of the superview but I have found no constraint setting that allows you to do that.

Can you tell me how can this be achieved?

Answer 1

You can use a Center X constraint with the following settings:

For the second view the Multiplier has to be 2/3 of course.

Result:

Answer 2

Select Align Center X from the subView and the Superview (screen of only the last one)

Change the multiplier: 2:3 for the first one, and 4:3 for the second one:

Answer 3

You said:

I have a two views I'd like to place in a way that they are equally spaced horizontally.

I'd like to define their Center X so that they are the third and two-thirds of the width of the superview but I have found no constraint setting that allows you to do that.

It's worth noting that "equally spaced" and "center x that is ⅓ and ⅔ of the superview" are not actually the same thing. Consider the "⅓ and ⅔" scenario: Imagine a superview that is 300 pixels wide, which would put the ⅓ and ⅔ points at 100 and 200 respectively. If you then add two subviews that are 50 pixels wide, then the left and right margins will be 75 pixels each, but the center margin will be 50 pixels. If the subviews are wider, it gets worse (eg if the subviews were 100 pixels wide, there would be 50 pixel margins left and right, but absolutely no space in between).

If you really want them evenly spaced (where the horizontal space between the subviews is the same as the space between the subviews and the edges of their superview), you can use layout guides if doing it programmatically.

So, assuming you've already created two subviews and have taken care of their size and vertical constraints, you can then do:

// create three layout guides

let layoutGuides = (0 ..< 3).map { _ in UILayoutGuide() }

// add them to your view

layoutGuides.forEach { view.addLayoutGuide($0) }

// create dictionary for VFL

let views = ["layoutGuide0": layoutGuides[0], "layoutGuide1": layoutGuides[1], "layoutGuide2": layoutGuides[2], "subview0": subviews[0], "subview1": subviews[1]]

// define horizontal constraints where three layout guides are the same width

let vfl = "H:|[layoutGuide0][subview0][layoutGuide1(==layoutGuide0)][subview1][layoutGuide2(==layoutGuide0)]|"

let constraints = NSLayoutConstraint.constraints(withVisualFormat: vfl, metrics: nil, views: views)
NSLayoutConstraint.activate(constraints)

If you wanted to do this in IB, you can't create these sorts of layout guides, but you can add three invisible "spacer" views (ie simple UIView objects with alpha of 0) with constraints that keep their respective widths equal to each other. Then stick these five views (the two subviews plus the three spacer views) in stack view (or, if you are a masochist, bypass stack view and add the six leading/trailing constraints in between these five subviews yourself) and you achieve the desired effect of two evenly spaced subviews (in between these three non-visible "spacer" views).

So, this is what it looks like (making the three "spacer" views visible so you can see what's going on):

The net effect, when you give those three spacer views an alpha of 0 (to make them invisible) is as follows: