自动布局让我的生活很困难。从理论上讲,当我转换的时候,它会非常有用,但我似乎一直在与它作斗争。
我做了一个演示项目来寻求帮助。有人知道如何使视图之间的空间增加或减少均匀,每当视图调整大小?
下面是三个标签(手动垂直对齐):
我想要的是,当我旋转时,它们均匀地调整间距(而不是视图大小)。默认情况下,顶部和底部视图向中心挤压:
自动布局让我的生活很困难。从理论上讲,当我转换的时候,它会非常有用,但我似乎一直在与它作斗争。
我做了一个演示项目来寻求帮助。有人知道如何使视图之间的空间增加或减少均匀,每当视图调整大小?
下面是三个标签(手动垂直对齐):
我想要的是,当我旋转时,它们均匀地调整间距(而不是视图大小)。默认情况下,顶部和底部视图向中心挤压:
当前回答
我为第一个项目设置了宽度值(>=宽度)和每个项目之间的最小距离(>=距离)。然后我用Ctrl拖动第二个,第三个…项连接项之间的依赖项。
其他回答
非常快速的接口构建器解决方案:
对于在一个父视图中均匀间隔的任意数量的视图,简单地给每个水平布局的“对齐中心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。如果有疑问,可以两种都试一试。: -)
看,没有间隔!
根据我最初回答的评论部分的建议,特别是@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'。好赶上!
你可以创建一个tableView并使isScrollEnabled = false。
我知道距离第一个答案已经有一段时间了,但我刚刚遇到了同样的问题,我想分享我的解决方案。为了子孙后代……
我在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];
}
这种方法的好处是你只需要做很少的数学运算。我并不是说这是完美的解决方案,但我为我试图实现的布局工作。
我希望这能有所帮助。
我找到了一个完美而简单的方法。自动布局不允许你平等地调整空间大小,但它允许你平等地调整视图大小。简单地在你的字段之间放置一些不可见的视图,并告诉自动布局保持它们相同的大小。它工作得很完美!
但有一件事值得注意;当我在界面设计器中减小尺寸时,有时它会混淆,在原来的地方留下一个标签,如果大小改变了奇数个量,它就会发生冲突。除此之外,它工作得很完美。
编辑:我发现冲突成了一个问题。因此,我删除了其中一个间距约束,并将其替换为两个约束,一个大于或等于,一个小于或等于。两者的大小相同,优先级比其他约束低得多。结果没有进一步的冲突。