自动布局让我的生活很困难。从理论上讲，当我转换的时候，它会非常有用，但我似乎一直在与它作斗争。
我做了一个演示项目来寻求帮助。有人知道如何使视图之间的空间增加或减少均匀，每当视图调整大小?
下面是三个标签(手动垂直对齐):
我想要的是，当我旋转时，它们均匀地调整间距(而不是视图大小)。默认情况下，顶部和底部视图向中心挤压:
我一直在坐过山车，爱自动布局和讨厌它。喜欢它的关键似乎是接受以下几点:
接口构建器的编辑和“有帮助的”自动创建约束在大多数情况下几乎无用 创建类别来简化常见操作是一种拯救，因为代码是如此重复和冗长。
也就是说，你正在尝试的不是直接的，在接口构建器中很难实现。这在代码中很简单。这段代码，在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
你会得到水平分布。
我是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
Here is a solution that will vertically center any number of subviews, even if they have unique sizes. What you want to do is make a mid-level container, center that in the superview, then put all the subviews in the container and arrange them with respect to one another. But crucially you also need to constrain them to the top and bottom of the container, so the container can be correctly sized and centered in the superview. By figuring the correct height from its subviews, the container can be vertically centered.
在本例中，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方法，包括每个视图之间的间距是固定的(视图大小根据需要而变化)，以及每个视图的大小是固定的(视图之间的间距根据需要而变化)。请注意，所有这些都是在没有使用任何“间隔视图”的情况下完成的。
从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;
// ...
由于它都是开源的，如果您有兴趣了解如何在没有间隔视图的情况下实现这一点，只需查看实现即可。(这取决于同时利用约束的常数和乘数。)
我找到了一个完美而简单的方法。自动布局不允许你平等地调整空间大小，但它允许你平等地调整视图大小。简单地在你的字段之间放置一些不可见的视图，并告诉自动布局保持它们相同的大小。它工作得很完美!
但有一件事值得注意;当我在界面设计器中减小尺寸时，有时它会混淆，在原来的地方留下一个标签，如果大小改变了奇数个量，它就会发生冲突。除此之外，它工作得很完美。
编辑:我发现冲突成了一个问题。因此，我删除了其中一个间距约束，并将其替换为两个约束，一个大于或等于，一个小于或等于。两者的大小相同，优先级比其他约束低得多。结果没有进一步的冲突。
查看https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html，上面有关于解决问题的详细描述。
看，没有间隔!
根据我最初回答的评论部分的建议，特别是@Rivera的有用建议，我简化了我的原始答案。
我用动图来说明这有多简单。我希望这些动图对你有帮助。为了防止你对动图有问题，我在下面附上了旧的答案和简单的屏幕截图。
产品说明:
1)添加按钮或标签。我用了3个按钮。
2)从每个按钮添加一个中心x约束到superview:
3)从每个按钮添加一个约束到底部布局约束:
4)调整上文第3条添加的约束如下:
A)选择约束; B)去掉常数(设为0)， c)更改乘数如下:取按钮数量+ 1，从顶部开始，设置乘数为buttonCountPlus1:1，然后是buttonCountPlus1:2，最后是buttonCountPlus1:3。(我在下面的旧答案中解释了我从哪里得到这个公式，如果你感兴趣的话)。
5)这里是一个演示运行!
注意:如果你的按钮有较大的高度，那么你需要在常量值中补偿这一点，因为约束是从按钮的底部开始的。
旧的答案
不管苹果的文档和Erica Sadun的优秀书籍(Auto Layout Demystified)说什么，没有间隔器也可以均匀地分隔视图。这在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与做数学!)
4)所以，让我们选择Label1，并选择底部约束。是这样的:
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中完全解决这个问题:
使约束使每个子视图的中心Y对齐到父视图的下边缘。 将每个约束的乘数设置为1/2n, 3/2n, 5/2n，…，n-1/2n，其中n是要分布的子视图的数量。
因此，如果您有三个标签，请将每个约束的乘数设置为0.1666667、0.5、0.833333。
对于标签，这至少是可行的:
@“H: | -15 -(第一(第二)= =]-[二(= =第三)](第三(= =))-15 - |
如果第一个和第二个有相同的宽度，第二个和第三个有相同的宽度，第三个和第一个有相同的宽度……你可以做水平(H)和垂直(V)。
非常快速的接口构建器解决方案:
对于在一个父视图中均匀间隔的任意数量的视图，简单地给每个水平布局的“对齐中心X到父视图”约束，或垂直布局的“对齐中心Y父视图”，并设置乘数为N:p(注意:有些人有更好的运气p:N -见下文)
在哪里
N =总视图数，和
P =包含空格的视图的位置
第一个位置是1，然后是一个空格，使得下一个位置是3，所以p变成了一个序列[1,3,5,7,9，…]。适用于任何数量的视图。
如果你有3个视图来分隔，它看起来是这样的:
编辑注意:N:p或p:N的选择取决于对齐约束的关系顺序。如果“第一项”是Superview。中心，你可以使用p:N，而如果Superview。中心是“第二项”，你可以用N:p。如果有疑问，可以两种都试一试。: -)
基于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减少了一些代码，看起来不错。
正确和最简单的方法是使用堆栈视图。
将标签/视图添加到堆栈视图:
选择堆栈视图并设置分布为相等间距:
在堆栈视图中添加最近邻居约束的空格，并更新帧:
为所有标签添加高度约束(可选)。仅对没有固有大小的视图需要)。例如，标签在这里不需要高度约束，只需要设置numberOfLines = 3或0。
享受预览:
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)
Android has a method of chaining views together in its constraint based layout system that I wanted to mimic. Searches brought me here but none of the answers quite worked. I didn't want to use StackViews because they tend to cause me more grief down the line than they save up front. I ended up creating a solution that used UILayoutGuides placed between the views. Controlling their width's allows different types of distributions, chain styles in Android parlance. The function accepts a leading and trailing anchor instead of a parent view. This allows the chain to be placed between two arbitrary views rather than distributed inside of the parent view. It does use UILayoutGuide which is only available in iOS 9+ but that shouldn't be a problem anymore.
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，乘数为3:5:
其余的图像也是这样。例如，第五张(也是最后一张)图像将在容器中水平居中，容器值为0，乘数为9:5:
正如梅特所解释的，顺序是1,3,5,7,9，等等。位置遵循相同的逻辑:第一个位置是1，然后是空格，然后是下一个位置3，依此类推。
推荐文章
- 更改UITextField和UITextView光标/插入符颜色
- 'Project Name'是通过优化编译的——步进可能会表现得很奇怪;变量可能不可用
- 如何设置回退按钮文本在Swift
- 模拟器慢动作动画现在打开了吗?
- 如何为TableView创建NSIndexPath
- 滑动删除和“更多”按钮(就像iOS 7的邮件应用程序)
- 使UINavigationBar透明
- 如何改变推和弹出动画在一个基于导航的应用程序
- 删除/重置核心数据中的所有条目?
- setNeedsLayout vs. setNeedsUpdateConstraints和layoutIfNeeded vs. updateConstraintsIfNeeded
- 不区分大小写的比较
- 我怎么能得到一个uiimage的高度和宽度?
- 我如何模仿地图应用程序的底部表格?
- 改变导航栏后退按钮的颜色
- iOS应用程序“应用程序无法验证”只在一台设备上
