自动布局让我的生活很困难。从理论上讲，当我转换的时候，它会非常有用，但我似乎一直在与它作斗争。
我做了一个演示项目来寻求帮助。有人知道如何使视图之间的空间增加或减少均匀，每当视图调整大小?
下面是三个标签(手动垂直对齐):
我想要的是，当我旋转时，它们均匀地调整间距(而不是视图大小)。默认情况下，顶部和底部视图向中心挤压:
当前回答
这里还有另一个答案。我在回答一个类似的问题时看到了这个问题的链接。我没有看到任何与我类似的答案。所以我想写在这里。
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减少了一些代码，看起来不错。
其他回答
我做了一个函数可能会有帮助。 用法示例:
[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
我可以在IB中完全解决这个问题:
使约束使每个子视图的中心Y对齐到父视图的下边缘。 将每个约束的乘数设置为1/2n, 3/2n, 5/2n，…，n-1/2n，其中n是要分布的子视图的数量。
因此，如果您有三个标签，请将每个约束的乘数设置为0.1666667、0.5、0.833333。
我为第一个项目设置了宽度值(>=宽度)和每个项目之间的最小距离(>=距离)。然后我用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'。好赶上!
推荐文章
- 如何删除默认的导航栏空间在SwiftUI导航视图
- Ios模拟器:如何关闭应用程序
- 如何在iOS中使用Swift编程segue
- Swift -整数转换为小时/分钟/秒
- Swift:声明一个空字典
- 在成功提交我的应用程序后，“太多符号文件”
- 首先添加一个UIView，甚至是导航栏
- 我如何改变UIButton标题颜色?
- 在Swift中如何调用GCD主线程上的参数方法?
- NSLayoutConstraints是可动画的吗?
- iOS -构建失败，CocoaPods无法找到头文件
- CFNetwork SSLHandshake iOS 9失败
- 请求失败:不可接受的内容类型:文本/html使用AFNetworking 2.0
- 缺少推荐的图标文件-该包不包含iPhone / iPod Touch的应用程序图标，像素为“120x120”，png格式
- 以编程方式创建segue
