在容器视图中均匀地分隔多个视图

我一直在坐过山车，爱自动布局和讨厌它。喜欢它的关键似乎是接受以下几点:

1. 接口构建器的编辑和“有帮助的”自动创建约束在大多数情况下几乎无用
2. 创建类别来简化常见操作是一种拯救，因为代码是如此重复和冗长。

也就是说，你正在尝试的不是直接的，在接口构建器中很难实现。这在代码中很简单。这段代码在viewDidLoad中，创建并定位你所要求的三个标签:

// Create three labels, turning off the default constraints applied to views created in code
UILabel *label1 = [UILabel new];
label1.translatesAutoresizingMaskIntoConstraints = NO;
label1.text = @"Label 1";


UILabel *label2 = [UILabel new];
label2.translatesAutoresizingMaskIntoConstraints = NO;
label2.text = @"Label 2";


UILabel *label3 = [UILabel new];
label3.translatesAutoresizingMaskIntoConstraints = NO;
label3.text = @"Label 3";


// Add them all to the view
[self.view addSubview:label1];
[self.view addSubview:label2];
[self.view addSubview:label3];


// Center them all horizontally
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:label1 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];


[self.view addConstraint:[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];


[self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0]];


// Center the middle one vertically
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0]];


// Position the top one half way up
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:label1 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:label2 attribute:NSLayoutAttributeCenterY multiplier:0.5 constant:0]];


// Position the bottom one half way down
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:label3 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:label2 attribute:NSLayoutAttributeCenterY multiplier:1.5 constant:0]];

正如我说的，这段代码在UIView中使用了几个类别方法，但为了清晰起见，我在这里已经做了很长一段路。

这个类别是在这里，它有一个方法，沿着特定的轴均匀地间隔一个视图数组。

另一种方法可能是让顶部和底部标签分别具有相对于视图顶部和底部的约束，并让中间视图分别具有相对于第一个和第三个视图的顶部和底部约束。

请注意，通过将视图拖到另一个视图附近，直到出现引导虚线，您可以对约束进行更多的控制——这些虚线表示将形成的两个对象之间的约束，而不是对象和父视图之间的约束。

在这种情况下，您可能希望将约束更改为“大于或等于”所需的值，而不是“等于”以允许它们调整大小。不确定这是否能达到你的目的。

我知道距离第一个答案已经有一段时间了，但我刚刚遇到了同样的问题，我想分享我的解决方案。为了子孙后代……

我在viewDidLoad上设置了视图:

- (void)viewDidLoad {


[super viewDidLoad];


cancelButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];
cancelButton.translatesAutoresizingMaskIntoConstraints = NO;
[cancelButton setTitle:@"Cancel" forState:UIControlStateNormal];
[self.view addSubview:cancelButton];


middleButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];
middleButton.translatesAutoresizingMaskIntoConstraints = NO;
[middleButton setTitle:@"Middle" forState:UIControlStateNormal];
[self.view addSubview:middleButton];


nextButton = [UIButton buttonWithType: UIButtonTypeRoundedRect];
nextButton.translatesAutoresizingMaskIntoConstraints = NO;
[nextButton setTitle:@"Next" forState:UIControlStateNormal];
[self.view addSubview:nextButton];




[self.view setNeedsUpdateConstraints];


}

然后，在updateViewConstrains上，首先删除所有约束，然后创建视图字典，然后计算视图之间使用的空间。在那之后，我只是使用视觉语言格式设置约束:

- (void)updateViewConstraints {




[super updateViewConstraints];


[self.view removeConstraints:self.view.constraints];


NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(cancelButton, nextButton, middleButton);


float distance=(self.view.bounds.size.width-cancelButton.intrinsicContentSize.width-nextButton.intrinsicContentSize.width-middleButton.intrinsicContentSize.width-20-20)/  ([viewsDictionary count]-1);  // 2 times 20 counts for the left & rigth margins
NSNumber *distancies=[NSNumber numberWithFloat:distance];


//    NSLog(@"Distancies: %@", distancies);
//
//    NSLog(@"View Width: %f", self.view.bounds.size.width);
//    NSLog(@"Cancel Width: %f", cancelButton.intrinsicContentSize.width);
//    NSLog(@"Middle Width: %f", middleButton.intrinsicContentSize.width);
//    NSLog(@"Next Width: %f", nextButton.intrinsicContentSize.width);






NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"|-[cancelButton]-dis-[middleButton]-dis-[nextButton]-|"
options:NSLayoutFormatAlignAllBaseline
metrics:@{@"dis":distancies}
views:viewsDictionary];




[self.view addConstraints:constraints];






constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[nextButton]-|"
options:0
metrics:nil
views:viewsDictionary];
[self.view addConstraints:constraints];






}

这种方法的好处是你只需要做很少的数学运算。我并不是说这是完美的解决方案，但我为我试图实现的布局工作。

我希望这能有所帮助。

在InterfaceBuilder中解决这个问题非常简单:

设置居中标签(label2)为“水平容器中心”和“垂直容器中心”

选择居中标签和顶部标签(label1 + label2)，并为垂直间距添加两个约束。一个与大于或等于的最小间距。一个和小于或等于为最大间距。

中间的标签和底部的标签(label2 + label3)也是如此。

此外，您还可以添加两个约束label1 -顶部空间到SuperView和两个约束label2 -底部空间到SuperView。

结果是所有4个空格的大小变化相同。

大多数解决方案都依赖于项目的奇数，这样你就可以把中间的项目放在中间。如果你有偶数个项目想要平均分配呢?这是一个更一般的解。这个类别将沿垂直或水平轴均匀分布任意数量的项目。

在它们的父视图中垂直分布4个标签的示例:

[self.view addConstraints:
[NSLayoutConstraint constraintsForEvenDistributionOfItems:@[label1, label2, label3, label4]
relativeToCenterOfItem:self.view
vertically:YES]];

NSLayoutConstraint + EvenDistribution.h

@interface NSLayoutConstraint (EvenDistribution)


/**
* Returns constraints that will cause a set of views to be evenly distributed horizontally
* or vertically relative to the center of another item. This is used to maintain an even
* distribution of subviews even when the superview is resized.
*/
+ (NSArray *) constraintsForEvenDistributionOfItems:(NSArray *)views
relativeToCenterOfItem:(id)toView
vertically:(BOOL)vertically;


@end

NSLayoutConstraint + EvenDistribution.m

@implementation NSLayoutConstraint (EvenDistribution)


+(NSArray *)constraintsForEvenDistributionOfItems:(NSArray *)views
relativeToCenterOfItem:(id)toView vertically:(BOOL)vertically
{
NSMutableArray *constraints = [NSMutableArray new];
NSLayoutAttribute attr = vertically ? NSLayoutAttributeCenterY : NSLayoutAttributeCenterX;


for (NSUInteger i = 0; i < [views count]; i++) {
id view = views[i];
CGFloat multiplier = (2*i + 2) / (CGFloat)([views count] + 1);
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view
attribute:attr
relatedBy:NSLayoutRelationEqual
toItem:toView
attribute:attr
multiplier:multiplier
constant:0];
[constraints addObject:constraint];
}


return constraints;
}


@end

我也有类似的问题，发现了这篇文章。但是，目前提供的答案中没有一个能以您想要的方式解决问题。他们没有使间距相等，而是平均分配标签的中心。重要的是要明白这是不一样的。我画了一个小图来说明这一点。

有3个视图，都是20点高。使用任何建议的方法都可以均匀地分布视图的中心，并为您提供插图布局。注意，视图的y中心间隔相等。但是，父视图和顶视图之间的间距是15pt，而子视图之间的间距只有5pt。为了使视图间距相等，这两个视图的间距都应该是10pt，即所有蓝色箭头的间距都应该是10pt。

然而，我还没有想出一个好的通用解决方案。目前我最好的想法是插入“间距视图”之间的子视图和设置间距视图的高度相等。

我的方法允许你在接口构建器中做这个。你要做的是创建“间隔视图”，你已经设置为匹配高度相等。然后在标签上添加顶部和底部约束(见截图)。

更具体地说，我在“Spacer View 1”上有一个顶部约束，以优先级低于1000的高度约束来superview，并且高度等于所有其他的“Spacer views”。'Spacer View 4'有一个用于superview的底部空间约束。每个标签都有各自的顶部和底部约束到其最近的“间隔视图”。

注意:确保你的标签上没有额外的顶部/底部空间限制;只有那些“空间视图”。这是可以满足的，因为顶部和底部的约束分别在'Space View 1'和'Spacer View 4'上。

废话1:我复制了我的视图，只是把它设置为横向模式，这样你就可以看到它工作了。

废话2:“间隔视图”本可以是透明的。

废话3:这种方法可以横向应用。

 [self.view addConstraints: [NSLayoutConstraint fluidConstraintWithItems:NSDictionaryOfVariableBindings(button1, button2, button3)
asString:@[@"button1", @"button2", @"button3"]
alignAxis:@"V"
verticalMargin:100
horizontalMargin:50
innerMargin:25]];

将导致垂直分布(抱歉，没有10声望来嵌入图像)。如果你改变坐标轴和一些边距值

alignAxis:@"H"
verticalMargin:120
horizontalMargin:20
innerMargin:10

你会得到水平分布。

< / p >

我是iOS的新手，但是voilà !

EvenDistribution.h

@interface NSLayoutConstraint (EvenDistribution)


/**
* Returns constraints that will cause a set of subviews
* to be evenly distributed along an axis.
*/
+ (NSArray *)  fluidConstraintWithItems:(NSDictionary *) views
asString:(NSArray *) stringViews
alignAxis:(NSString *) axis
verticalMargin:(NSUInteger) vMargin
horizontalMargin:(NSUInteger) hMargin
innerMargin:(NSUInteger) inner;
@end

EvenDistribution.m

#import "EvenDistribution.h"


@implementation NSLayoutConstraint (EvenDistribution)


+ (NSArray *) fluidConstraintWithItems:(NSDictionary *) dictViews
asString:(NSArray *) stringViews
alignAxis:(NSString *) axis
verticalMargin:(NSUInteger) vMargin
horizontalMargin:(NSUInteger) hMargin
innerMargin:(NSUInteger) iMargin


{
NSMutableArray *constraints = [NSMutableArray arrayWithCapacity: dictViews.count];
NSMutableString *globalFormat = [NSMutableString stringWithFormat:@"%@:|-%d-",
axis,
[axis isEqualToString:@"V"] ? vMargin : hMargin
];






for (NSUInteger i = 0; i < dictViews.count; i++) {


if (i == 0)
[globalFormat appendString:[NSString stringWithFormat: @"[%@]-%d-", stringViews[i], iMargin]];
else if(i == dictViews.count - 1)
[globalFormat appendString:[NSString stringWithFormat: @"[%@(==%@)]-", stringViews[i], stringViews[i-1]]];
else
[globalFormat appendString:[NSString stringWithFormat: @"[%@(==%@)]-%d-", stringViews[i], stringViews[i-1], iMargin]];


NSString *localFormat = [NSString stringWithFormat: @"%@:|-%d-[%@]-%d-|",
[axis isEqualToString:@"V"] ? @"H" : @"V",
[axis isEqualToString:@"V"] ? hMargin : vMargin,
stringViews[i],
[axis isEqualToString:@"V"] ? hMargin : vMargin];


[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:localFormat
options:0
metrics:nil
views:dictViews]];




}
[globalFormat appendString:[NSString stringWithFormat:@"%d-|",
[axis isEqualToString:@"V"] ? vMargin : hMargin
]];


[constraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:globalFormat
options:0
metrics:nil
views:dictViews]];


return constraints;


}


@end

是的，你可以只在接口构建器中这样做，而不需要编写代码——需要注意的是，你是在调整标签的大小，而不是分配空白。在本例中，将标签2的X和Y对齐到父视图，使其固定在中心。然后将标签1的垂直空间设置为superview，标签2设置为standard，重复标签3。在设置标签2之后，设置标签1和3最简单的方法是调整它们的大小，直到它们断开。

这里是水平显示，注意标签1和2之间的垂直空间被设置为标准:

下面是肖像版:

我意识到，由于标签之间的标准空间和父视图的标准空间之间的差异，它们在基线之间不是绝对100%等间距的。如果这让您感到困扰，可以将大小设置为0而不是standard

这里有一个解决方案，将垂直居中任意数量的子视图，即使它们有唯一的大小。你要做的是创建一个中层容器，在父视图中居中，然后将所有子视图放入容器中并按顺序排列它们。但至关重要的是，你还需要将它们约束到容器底部的top 而且，这样容器就可以在父视图中正确地大小和居中。通过从它的子视图中计算正确的高度，容器可以垂直居中。

在这个例子中，self是父视图，你在其中居中所有子视图。

NSArray *subviews = @[ (your subviews in top-to-bottom order) ];


UIView *container = [[UIView alloc] initWithFrame:CGRectZero];
container.translatesAutoresizingMaskIntoConstraints = NO;
for (UIView *subview in subviews) {
subview.translatesAutoresizingMaskIntoConstraints = NO;
[container addSubview:subview];
}
[self addSubview:container];


[self addConstraint:[NSLayoutConstraint constraintWithItem:container attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0.0f]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:container attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeRight multiplier:1.0f constant:0.0f]];
[self addConstraint:[NSLayoutConstraint constraintWithItem:container attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual
toItem:self attribute:NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f]];


if (0 < subviews.count) {
UIView *firstSubview = subviews[0];
[container addConstraint:[NSLayoutConstraint constraintWithItem:firstSubview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
toItem:container attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f]];
UIView *lastSubview = subviews.lastObject;
[container addConstraint:[NSLayoutConstraint constraintWithItem:lastSubview attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual
toItem:container attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f]];


UIView *subviewAbove = nil;
for (UIView *subview in subviews) {
[container addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual
toItem:container attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f]];
if (subviewAbove) {
[container addConstraint:[NSLayoutConstraint constraintWithItem:subview attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual
toItem:subviewAbove attribute:NSLayoutAttributeBottom multiplier:1.0f constant:10.0f]];
}
subviewAbove = subview;
}
}

查看开源库PureLayout。它提供了一些用于分布视图的API方法，包括每个视图之间的间距是固定的(视图大小根据需要而变化)，以及每个视图的大小是固定的(视图之间的间距根据需要而变化)。注意，所有这些都是通过使用任何“spacer views”实现的。

从NSArray + PureLayout.h:

// NSArray+PureLayout.h


// ...


/** Distributes the views in this array equally along the selected axis in their superview. Views will be the same size (variable) in the dimension along the axis and will have spacing (fixed) between them. */
- (NSArray *)autoDistributeViewsAlongAxis:(ALAxis)axis
alignedTo:(ALAttribute)alignment
withFixedSpacing:(CGFloat)spacing;


/** Distributes the views in this array equally along the selected axis in their superview. Views will be the same size (fixed) in the dimension along the axis and will have spacing (variable) between them. */
- (NSArray *)autoDistributeViewsAlongAxis:(ALAxis)axis
alignedTo:(ALAttribute)alignment
withFixedSize:(CGFloat)size;


// ...

由于它都是开源的，如果您有兴趣了解如何在没有间隔视图的情况下实现这一点，只需查看实现即可。(它依赖于利用constant 而且 multiplier作为约束。)

我找到了一个完美而简单的方法。自动布局不允许你平等地调整空间大小，但它允许你平等地调整视图大小。简单地在你的字段之间放置一些不可见的视图，并告诉自动布局保持它们相同的大小。它工作得很完美!

但有一件事值得注意;当我在界面设计器中减小尺寸时，有时它会混淆，在原来的地方留下一个标签，如果大小改变了奇数个量，它就会发生冲突。除此之外，它工作得很完美。

编辑:我发现冲突成了一个问题。因此，我删除了其中一个间距约束，并将其替换为两个约束，一个大于或等于，一个小于或等于。两者的大小相同，优先级比其他约束低得多。结果没有进一步的冲突。

检查https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html有很好的描述解决你的问题。

看，没有间隔!

根据我最初回答的评论部分的建议，特别是@Rivera的有用建议，我简化了我的原始答案。

我用动图来说明这有多简单。我希望这些动图对你有帮助。为了防止你对动图有问题，我在下面附上了旧的答案和简单的屏幕截图。

产品说明:

1）添加按钮或标签。我用了3个按钮。

从每个按钮添加一个center x约束到父视图:

从每个按钮添加一个约束到底部布局约束:

4）调整在上面#3中添加的约束如下:

一)选择约束， b)删除常量(设置为0)， c)修改乘数如下:取按钮的数量+ 1，并从顶部开始，设置乘数为buttonCountPlus1:1，然后是buttonCountPlus1:2，最后是buttonCountPlus1:3。(我在下面的旧答案中解释了我从哪里得到这个公式，如果你感兴趣的话)。

这里是一个演示运行!

注意:如果你的按钮有较大的高度，那么你需要在常量值中补偿这一点，因为约束是从按钮的底部开始的。

旧的答案

不管Apple的文档和Erica Sadun的优秀书籍(自动布局去神秘化)说什么，没有间隔器可以均匀地分隔视图。这在IB和代码中是非常简单的，适用于任意数量的元素。你所需要的是一个数学公式，叫做“剖面公式”。做起来比解释起来简单。我将尽我最大的努力在IB中演示它，但在代码中也很容易做到。

在这个例子中，你会

1)首先设置每个标签有一个中心约束。这很简单。只需从每个标签control拖动到底部。

2)按住shift，因为你也可以添加我们将要使用的另一个约束，即“底部空间到底部布局指南”。

3)选择“bottom space to bottom layout guide”，“在容器中水平居中”。对所有3个标签都这样做。

基本上，如果我们将我们想要确定其坐标的标签除以标签总数加1，那么我们就有一个数字可以加到IB中得到动态位置。我简化了这个公式，但你可以用它来设置水平间距或者同时设置垂直和水平间距。这是超级强大的!

这是乘数。

Label1 = 1/4 = .25，

Label2 = 2/4 = .5，

Label3 = 3/4 = .75

(编辑:@Rivera评论说，你可以简单地直接在乘数字段使用比率，xCode与做数学!)

5)在属性检查器中选择“第二项”。

6)在下拉菜单中选择“反转第一项和第二项”。

7)将常数归零，wC值为any。(如果需要，可以在这里添加偏移量)。

8)这是关键部分:在乘数字段中添加我们的第一个乘数0.25。

9)当你在它设置顶部的“第一项”为“CenterY”，因为我们想把它居中到标签的y中心。这是所有这些应该看起来的样子。

10)对每个标签重复这个过程，并插入相应的乘数:Label2为0.5,Label3为0.75。这里是最终产品在所有方向与所有紧凑的设备!超级简单。我一直在研究许多涉及大量代码和间隔的解决方案。这无疑是我在这个问题上看到的最好的解决办法。

更新:@kraftydevil补充说底部布局指南只出现在故事板中，而不是在xib中。在xibs中使用'Bottom Space to Container'。好赶上!

我可以在IB中完全解决这个问题:

1. 使约束使每个子视图的中心Y对齐到父视图的下边缘。
2. 将每个约束的乘数设置为1/2n, 3/2n, 5/2n，…，n-1/2n，其中n是要分布的子视图的数量。

因此，如果您有三个标签，请将每个约束的乘数设置为0.1666667、0.5、0.833333。

对于标签，这至少是可行的:

@"H:|-15-[first(==second)]-[second(==third)]-[third(==first)]-15-|

如果第一个和第二个有相同的宽度，第二个和第三个有相同的宽度，第三个和第一个有相同的宽度……你可以做水平(H)和垂直(V)。

非常快速的接口构建器解决方案:

对于在父视图中均匀间隔的任意数量的视图，只需为每个视图提供一个“对齐中心X到父视图”的水平布局约束，或为垂直布局提供“对齐中心Y父视图”约束，并将Multiplier设置为N:p (注意:有些人在p:N上有更好的运气-见下文)

在哪里

N = total number of views,

p = position of the view including spaces

第一个位置是1，然后是一个空格，使得下一个位置是3，所以p变成了一个序列[1,3,5,7,9，…]。适用于任何数量的视图。

如果你有3个视图来分隔，它看起来是这样的:

N:p或p:N的选择取决于对齐约束的关系顺序。如果“第一项”是Superview。如果使用Superview. Center，则可以使用p:N。中心是“第二项”，你可以使用N:p。如果有疑问，可以两种都试一试。: -)

我为第一个项目设置了宽度值(>=宽度)和每个项目之间的最小距离(>=距离)。然后我用Ctrl拖动第二个，第三个…项连接项之间的依赖项。

基于Ben Dolman的回答，这将更均匀地分配视图(使用填充等):

+(NSArray *)constraintsForEvenDistributionOfItems:(NSArray *)views
relativeToCenterOfItem:(id)toView vertically:(BOOL)vertically
{
NSMutableArray *constraints = [NSMutableArray new];
NSLayoutAttribute attr = vertically ? NSLayoutAttributeCenterY : NSLayoutAttributeCenterX;


CGFloat min = 0.25;
CGFloat max = 1.75;
CGFloat d = (max-min) / ([views count] - 1);
for (NSUInteger i = 0; i < [views count]; i++) {
id view = views[i];
CGFloat multiplier = i * d + min;
NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:view
attribute:attr
relatedBy:NSLayoutRelationEqual
toItem:toView
attribute:attr
multiplier:multiplier
constant:0];
[constraints addObject:constraint];
}


return constraints;
}

我刚刚用乘数特性解决了我的问题。我不确定它是否适用于所有情况，但对我来说，它非常有效。我在Xcode 6.3供你参考。

我最后做的是:

1)首先将我的按钮放置在320px宽度的屏幕上，以我希望它在320px设备上的方式分布。

.

2)然后我在所有按钮的superview上添加了一个领先的空间约束。

.

3)然后我修改了前导空间的属性，使常量为0，乘数是x偏移量除以屏幕宽度(例如，我的第一个按钮距离左边缘8px，所以我将乘数设置为8/320)

4)那么这里重要的一步是将约束关系中的第二个Item更改为superview。尾随而不是superview.leading。这很关键，因为superview。在我的例子中，前导为0，后拖为320，所以8/320在320px设备上是8px，然后当父视图的宽度改变为640或其他什么时，视图都以相对于320px屏幕大小的宽度的比例移动。这里的数学比较容易理解。

许多答案是不正确的，但得到许多计数。这里我只是用编程的方式写了一个解决方案，三个视图都是水平对齐的，不使用间隔视图，但它只有在故事板中使用标签宽度已知时才有效。

NSDictionary *views = NSDictionaryOfVariableBindings(_redView, _yellowView, _blueView);


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|->=0-[_redView(40)]->=0-[_yellowView(40)]->=0-[_blueView(40)]->=0-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:views]];


[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[_redView(60)]" options:0 metrics:nil views:views]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:_redView attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]];


[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.view attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_yellowView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:_redView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_yellowView attribute:NSLayoutAttributeLeading multiplier:0.5 constant:0]];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:_blueView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:_yellowView attribute:NSLayoutAttributeLeading multiplier:1.5 constant:40]];

在iOS 9中，苹果通过(期待已久的)UIStackView使这变得非常容易。只需选择要包含在接口构建器中的视图，并选择编辑器->嵌入->堆栈视图。为堆栈视图设置适当的宽度/高度/边距约束，并确保将Distribution属性设置为'Equal spacing':

.

当然，如果你需要支持iOS 8或更低版本，你必须从其他选项中选择一个。

迟到的派对，但我有一个工作的解决方案，创建一个菜单水平间距。这可以在NSLayoutConstraint中使用==轻松完成

const float MENU_HEIGHT = 40;


- (UIView*) createMenuWithLabels: (NSArray *) labels
// labels is NSArray of NSString
UIView * backgroundView = [[UIView alloc]init];
backgroundView.translatesAutoresizingMaskIntoConstraints = false;


NSMutableDictionary * views = [[NSMutableDictionary alloc] init];
NSMutableString * format = [[NSMutableString alloc] initWithString: @"H:|"];
NSString * firstLabelKey;


for(NSString * str in labels)
{
UILabel * label = [[UILabel alloc] init];
label.translatesAutoresizingMaskIntoConstraints = false;
label.text = str;
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor whiteColor];
[backgroundView addSubview: label];
[label fixHeightToTopBounds: MENU_HEIGHT-2];
[backgroundView addConstraints: [label fixHeightToTopBounds: MENU_HEIGHT]];
NSString * key = [self camelCaseFromString: str];
[views setObject: label forKey: key];
if(firstLabelKey == nil)
{
[format appendString: [NSString stringWithFormat: @"[%@]", key]];
firstLabelKey = key;
}
else
{
[format appendString: [NSString stringWithFormat: @"[%@(==%@)]", key, firstLabelKey]];
}
}


[format appendString: @"|"];


NSArray * constraints = [NSLayoutConstraint constraintsWithVisualFormat: (NSString *) format
options: 0
metrics: nil
views: (NSDictionary *) views];
[backgroundView addConstraints: constraints];
return backgroundView;
}

这里还有另一个答案。我在回答一个类似的问题时看到了这个问题的链接。我没有看到任何与我类似的答案。所以我想写在这里。

  class ViewController: UIViewController {


override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.whiteColor()
setupViews()
}


var constraints: [NSLayoutConstraint] = []


func setupViews() {


let container1 = createButtonContainer(withButtonTitle: "Button 1")
let container2 = createButtonContainer(withButtonTitle: "Button 2")
let container3 = createButtonContainer(withButtonTitle: "Button 3")
let container4 = createButtonContainer(withButtonTitle: "Button 4")


view.addSubview(container1)
view.addSubview(container2)
view.addSubview(container3)
view.addSubview(container4)


[


// left right alignment
container1.leftAnchor.constraintEqualToAnchor(view.leftAnchor, constant: 20),
container1.rightAnchor.constraintEqualToAnchor(view.rightAnchor, constant: -20),
container2.leftAnchor.constraintEqualToAnchor(container1.leftAnchor),
container2.rightAnchor.constraintEqualToAnchor(container1.rightAnchor),
container3.leftAnchor.constraintEqualToAnchor(container1.leftAnchor),
container3.rightAnchor.constraintEqualToAnchor(container1.rightAnchor),
container4.leftAnchor.constraintEqualToAnchor(container1.leftAnchor),
container4.rightAnchor.constraintEqualToAnchor(container1.rightAnchor),




// place containers one after another vertically
container1.topAnchor.constraintEqualToAnchor(view.topAnchor),
container2.topAnchor.constraintEqualToAnchor(container1.bottomAnchor),
container3.topAnchor.constraintEqualToAnchor(container2.bottomAnchor),
container4.topAnchor.constraintEqualToAnchor(container3.bottomAnchor),
container4.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor),




// container height constraints
container2.heightAnchor.constraintEqualToAnchor(container1.heightAnchor),
container3.heightAnchor.constraintEqualToAnchor(container1.heightAnchor),
container4.heightAnchor.constraintEqualToAnchor(container1.heightAnchor)
]
.forEach { $0.active = true }
}




func createButtonContainer(withButtonTitle title: String) -> UIView {
let view = UIView(frame: .zero)
view.translatesAutoresizingMaskIntoConstraints = false


let button = UIButton(type: .System)
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle(title, forState: .Normal)
view.addSubview(button)


[button.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor),
button.leftAnchor.constraintEqualToAnchor(view.leftAnchor),
button.rightAnchor.constraintEqualToAnchor(view.rightAnchor)].forEach { $0.active = true }


return view
}
}

同样，这也可以用iOS9 UIStackViews很容易做到。

class ViewController: UIViewController {


override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.greenColor()
setupViews()
}


var constraints: [NSLayoutConstraint] = []


func setupViews() {


let container1 = createButtonContainer(withButtonTitle: "Button 1")
let container2 = createButtonContainer(withButtonTitle: "Button 2")
let container3 = createButtonContainer(withButtonTitle: "Button 3")
let container4 = createButtonContainer(withButtonTitle: "Button 4")


let stackView = UIStackView(arrangedSubviews: [container1, container2, container3, container4])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .Vertical
stackView.distribution = .FillEqually
view.addSubview(stackView)


[stackView.topAnchor.constraintEqualToAnchor(view.topAnchor),
stackView.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor),
stackView.leftAnchor.constraintEqualToAnchor(view.leftAnchor, constant: 20),
stackView.rightAnchor.constraintEqualToAnchor(view.rightAnchor, constant: -20)].forEach { $0.active = true }
}




func createButtonContainer(withButtonTitle title: String) -> UIView {
let button = UIButton(type: .Custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.redColor()
button.setTitleColor(UIColor.whiteColor(), forState: .Normal)
button.setTitle(title, forState: .Normal)
let buttonContainer = UIStackView(arrangedSubviews: [button])
buttonContainer.distribution = .EqualCentering
buttonContainer.alignment = .Center
buttonContainer.translatesAutoresizingMaskIntoConstraints = false
return buttonContainer
}
}

注意，这与上面的方法完全相同。它添加了四个容器视图，这些视图都是均等填充的，每个堆栈视图都添加了一个视图，并在中间对齐。但是，这个版本的UIStackView减少了一些代码，看起来不错。

正确和最简单的方法是使用堆栈视图。

1. 将标签/视图添加到堆栈视图:

2. 选择堆栈视图并将分布设置为相等的间距:

3. 将到最近邻居的间隔约束添加到堆栈视图并更新帧:

4. 将高度约束添加到所有标签(可选)。仅对没有固有大小的视图需要)。例如，标签在这里不需要高度约束，只需要设置numberOfLines = 3或0。

5. 享受预览:

Swift 3版本

let _redView = UIView()
_redView.backgroundColor = UIColor.red
_redView.translatesAutoresizingMaskIntoConstraints = false


let _yellowView = UIView()
_yellowView.backgroundColor = UIColor.yellow
_yellowView.translatesAutoresizingMaskIntoConstraints = false


let _blueView = UIView()
_blueView.backgroundColor = UIColor.blue
_blueView.translatesAutoresizingMaskIntoConstraints = false


self.view.addSubview(_redView)
self.view.addSubview(_yellowView)
self.view.addSubview(_blueView)


var views = ["_redView": _redView, "_yellowView": _yellowView, "_blueView":_blueView]


var nslayoutConstraint_H = NSLayoutConstraint.constraints(withVisualFormat: "|->=0-[_redView(40)]->=0-[_yellowView(40)]->=0-[_blueView(40)]->=0-|", options: [.alignAllTop, .alignAllBottom], metrics: nil, views: views)
self.view.addConstraints(nslayoutConstraint_H)


var nslayoutConstraint_V = NSLayoutConstraint.constraints(withVisualFormat: "V:[_redView(60)]", options: NSLayoutFormatOptions.init(rawValue: 0), metrics: nil, views: views)
self.view.addConstraints(nslayoutConstraint_V)




let constraint_red = NSLayoutConstraint.init(item: self.view, attribute: .centerY, relatedBy: .equal, toItem: _redView, attribute: .centerY, multiplier: 1, constant: 0)
self.view.addConstraint(constraint_red)


let constraint_yellow = NSLayoutConstraint.init(item: self.view, attribute: .centerX, relatedBy: .equal, toItem: _yellowView, attribute: .centerX, multiplier: 1, constant: 0)
self.view.addConstraint(constraint_yellow)


let constraint_yellow1 = NSLayoutConstraint.init(item: _redView, attribute: .centerX, relatedBy: .equal, toItem: _yellowView, attribute: .leading, multiplier: 0.5, constant: 0)
self.view.addConstraint(constraint_yellow1)


let constraint_yellow2 = NSLayoutConstraint.init(item: _blueView, attribute: .centerX, relatedBy: .equal, toItem: _yellowView, attribute: .leading, multiplier: 1.5, constant: 40)
self.view.addConstraint(constraint_yellow2)

你可以创建一个tableView并创建isScrollEnabled = false。

Android在其基于约束的布局系统中有一种将视图链接在一起的方法，我想模仿这种方法。搜索把我带到了这里，但没有一个答案很管用。我不想使用StackViews，因为它们往往会给我带来更多的痛苦，而不是预先节省。我最终创建了一个解决方案，使用UILayoutGuides放置在视图之间。控制它们的宽度允许不同类型的分布，Android术语中的链样式。该函数接受前导和后导锚，而不是父视图。这允许链被放置在两个任意视图之间，而不是分布在父视图内部。它确实使用了UILayoutGuide，这只在iOS 9+中可用，但这应该不再是一个问题了。

public enum LayoutConstraintChainStyle {
case spread //Evenly distribute between the anchors
case spreadInside //Pin the first & last views to the sides and then evenly distribute
case packed //The views have a set space but are centered between the anchors.
}


public extension NSLayoutConstraint {


static func chainHorizontally(views: [UIView],
leadingAnchor: NSLayoutXAxisAnchor,
trailingAnchor: NSLayoutXAxisAnchor,
spacing: CGFloat = 0.0,
style: LayoutConstraintChainStyle = .spread) -> [NSLayoutConstraint] {
var constraints = [NSLayoutConstraint]()
guard views.count > 1 else { return constraints }
guard let first = views.first, let last = views.last, let superview = first.superview else { return constraints }


//Setup the chain of views
var distributionGuides = [UILayoutGuide]()
var previous = first
let firstGuide = UILayoutGuide()
superview.addLayoutGuide(firstGuide)
distributionGuides.append(firstGuide)
firstGuide.identifier = "ChainDistribution\(distributionGuides.count)"
constraints.append(firstGuide.leadingAnchor.constraint(equalTo: leadingAnchor))
constraints.append(first.leadingAnchor.constraint(equalTo: firstGuide.trailingAnchor, constant: spacing))
views.dropFirst().forEach { view in
let g = UILayoutGuide()
superview.addLayoutGuide(g)
distributionGuides.append(g)
g.identifier = "ChainDistribution\(distributionGuides.count)"
constraints.append(contentsOf: [
g.leadingAnchor.constraint(equalTo: previous.trailingAnchor),
view.leadingAnchor.constraint(equalTo: g.trailingAnchor)
])
previous = view
}
let lastGuide = UILayoutGuide()
superview.addLayoutGuide(lastGuide)
constraints.append(contentsOf: [lastGuide.leadingAnchor.constraint(equalTo: last.trailingAnchor),
lastGuide.trailingAnchor.constraint(equalTo: trailingAnchor)])
distributionGuides.append(lastGuide)


//Space the according to the style.
switch style {
case .packed:
if let first = distributionGuides.first, let last = distributionGuides.last {
constraints.append(first.widthAnchor.constraint(greaterThanOrEqualToConstant: spacing))
constraints.append(last.widthAnchor.constraint(greaterThanOrEqualToConstant: spacing))
constraints.append(last.widthAnchor.constraint(equalTo: first.widthAnchor))
constraints.append(contentsOf:
distributionGuides.dropFirst().dropLast()
.map { $0.widthAnchor.constraint(equalToConstant: spacing) }
)
}
case .spread:
if let first = distributionGuides.first {
constraints.append(contentsOf:
distributionGuides.dropFirst().map { $0.widthAnchor.constraint(equalTo: first.widthAnchor) })
}
case .spreadInside:
if let first = distributionGuides.first, let last = distributionGuides.last {
constraints.append(first.widthAnchor.constraint(equalToConstant: spacing))
constraints.append(last.widthAnchor.constraint(equalToConstant: spacing))
let innerGuides = distributionGuides.dropFirst().dropLast()
if let key = innerGuides.first {
constraints.append(contentsOf:
innerGuides.dropFirst().map { $0.widthAnchor.constraint(equalTo: key.widthAnchor) }
)
}
}
}


return constraints
}

我想要水平对齐5张图像，所以我最终遵循Mete的响应略有不同。

第一个图像将在容器中水平居中，容器的值为0，乘数为1:5:

其余的图像也是这样。例如，第五张(也是最后一张)图像将在容器中水平居中，容器值为0，乘数为9:5: < / p >

正如梅特所解释的，顺序是1,3,5,7,9，等等。位置遵循相同的逻辑:第一个位置是1，然后是空格，然后是下一个位置3，依此类推。