使用 AutoLayout 在 Xcode 7 中将 5 个子视图均匀地分布在其父视图的宽度上

Question

在 Xcode 中使用 AutoLayout 时，我对尝试在一个视图中传播 5 个子视图感到非常沮丧 7. 我向 collectionViewController 的页脚添加了五个视图，我希望这些视图水平均匀分布 -在不同宽度的设备上显示时是明智的。我能够在 SO 上找到一些线程，但不幸的是，所有线程在 Xcode 7 中都已过时，并且由于没有“50 声誉”我无法发表评论，我唯一的希望是创建自己的线程。非常感谢您的帮助，为此疯狂了几个小时。

Answer 1

如果您通过代码添加：

func constraintsForView(view: UIView, position: Int, superViewWidth: CGFloat) -> [NSLayoutConstraint] {
    let views = ["view": view]

    let hDistance: CGFloat = (superViewWidth / 5.0) * CGFloat(position)

    var constraints = [NSLayoutConstraint]()

    let h = "H:|-\(hDistance)-[view]"
    let v = "V:|[view]|"

    let H_Constraint = NSLayoutConstraint.constraintsWithVisualFormat(h, options: [], metrics: nil, views: views) ?? [NSLayoutConstraint]()
    let V_Constraint = NSLayoutConstraint.constraintsWithVisualFormat(v, options: [], metrics: nil, views: views) ?? [NSLayoutConstraint]()

    constraints.appendContentsOf(H_Constraint)
    constraints.appendContentsOf(V_Constraint)

    constraints.append(NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .Equal, toItem: view.superview, attribute: .Width, multiplier: 0.2, constant: 0))

    return constraints
}

这将根据他们的位置 (1-5) 应用约束

如果您使用 Interface Builder 然后将第一个视图放在左侧，然后将其与超级视图的宽度相等，并将乘数更改为 0.2，然后将下一个视图附加到第一个视图的左侧，宽度再次相等，继续做同样的事情直到 5 号，然后输入 up/down/left/right

Answer 2

您可以固定等宽约束。 select 子视图和父视图设置等宽约束，如果使用 IB，则根据要求编辑它的乘数。或者只是以编程方式给出约束。

Answer 3

这应该是 AutoLayout 中非常简单的布局。

首先您需要确保所有视图的宽度相等。在 IB 中，您可以 select 它们全部并在 Interface Builder 中使用 "add constraints" 按钮并点击 "Equal Widths" 按钮。在代码中，这稍微复杂一些，但同样可行。

其次，您需要确保每个视图的前缘和后缘彼此 "pinned"。 Select 第一个视图并（使用 "add constraints" 按钮）将其固定到超级视图的左边缘。然后 CTRL-DRAG 从第一个视图到第二个视图和 select "horizontal spacing"。对每对视图重复此操作。

我还建议您查看 www.raywenderlich.com 网站，因为那里有一些非常好的 AutoLayout 教程。

Answer 4

由于没有附上代码，我就分享一下我在AutoLayout中的一些经验。

有两个要点： 1. 充分理解Autolayout的机制和原理。 2. 练习是绝对必要的，但需要从简单的案例开始。

我建议您开始使用 xib 或故事板，因为它们清晰明了。一开始不要野心勃勃，一开始尽量让两个视图均匀分布在一个父视图中。

我在练习xib的过程中给自己定下了一个两步走的目标。 (1)添加任何需要的约束，只要确保一切正常无冲突即可。 (2)尽可能多地移除约束，同时确保一切正常。

经过一些实践，你一定会对Apple的自动布局逻辑有更好的理解，我认为这是最重要的。

最后，请耐心等待。每个问题都有解决方案。就在那里等你去发现。

使用 AutoLayout 在 Xcode 7 中将 5 个子视图均匀地分布在其父视图的宽度上

Using AutoLayout to spread 5 subviews evenly across their parent's width in Xcode 7

ios

autolayout

swift

ios-autolayout