如何在 Swift 3.0 中以编程方式使用自动布局在 UIView 容器内水平居中 2 个或更多 UIView答案

【问题标题】：How to center horizontally 2 or more UIViews inside a UIView container using autolayout programmatically in Swift 3.0如何在 Swift 3.0 中以编程方式使用自动布局在 UIView 容器内水平居中 2 个或更多 UIView
【发布时间】：2017-10-03 15:46:00
【问题描述】：

我正在尝试将 2 个或更多 UIViews 在 UIView 中水平居中，例如

|             [UIView1] [UIView2]             |
|        [UIView1] [UIView2] [UIView3]        |

或

|   [UIView1] [UIView2] [UIView3] [UIView4]   |

我将这些约束添加到容器视图内的所有视图中

let horizontalConstraint = NSLayoutConstraint(item: views[N], attribute: .centerX, relatedBy: .equal, toItem: container, attribute: .centerX, multiplier: 1, constant: 0)
let verticalConstraint = NSLayoutConstraint(item: views[N], attribute: .bottom, relatedBy: .equal, toItem: container, attribute: .centerY, multiplier: 1, constant: 0)
let widthConstraint = NSLayoutConstraint(item: views[N], attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: width)
let heightConstraint = NSLayoutConstraint(item: views[N], attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: height)

我在每个视图之间添加间距约束

let spacingConstraint = NSLayoutConstraint(item: views[N], attribute: .left, relatedBy: .equal, toItem: views[N+1], attribute: .right, multiplier: 1, constant: 10)

上述约束将所有视图水平居中。

如果我将horizontalConstraint 的优先级更改为 750，那么我会得到类似的结果

如您所见，当我有奇数个视图时，这些视图将正确水平对齐，但当有偶数个视图时，情况并非如此。

如何在不使用另一个容器或间隔视图的情况下以编程方式将任意偶数个视图和另一个视图水平居中？

【问题讨论】：

我不知道您是否决定完全以编程方式编写约束，如果您使用堆栈视图，它将轻松满足您的要求。
您能否提供和示例使用以编程方式完成的堆栈视图可以解决我的问题？

标签： ios swift uiview autolayout

【解决方案1】：

所以我能够在@Sivajee Battina 和@Nedim 推荐的UIStackView 的帮助下完成这项工作。我创建了一个UIStackView 属性并将视图设置如下

    self.view.addSubview(container)
    labelContainer.translatesAutoresizingMaskIntoConstraints = false

    container.addSubview(stackContainer)
    stackContainer.translatesAutoresizingMaskIntoConstraints = false
    stackContainer.axis =  .horizontal
    stackContainer.distribution = .equalSpacing
    stackContainer.alignment = .bottom
    stackContainer.spacing = spacing

然后我添加了如下约束

    container.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 10.0).isActive = true
    container.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 10.0).isActive = true
    container.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -10.0).isActive = true
    container.widthAnchor.constraint(equalToConstant: containerWidth).isActive = true
    container.heightAnchor.constraint(equalToConstant: containerHeight).isActive = true

    stackContainer.centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
    stackContainer.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true

    for view in self.views {
        view.widthAnchor.constraint(equalToConstant: viewWidth).isActive = true
        view.heightAnchor.constraint(equalToConstant: viewHeight).isActive = true
    }

导致解决方案！！

【讨论】：

【解决方案2】：

您应该使用UIStackView。如果您不知道如何使用UIStackView，可以查看this 教程。

堆栈视图应该如下所示。

请记住，在 Stack View 的属性检查器中，您需要输入 Axis。

无论如何，如果您仍想以编程方式添加约束，我建议使用SnapKit。

这是一个如何使用它的示例：

let box = UIView()
let container = UIView()

container.addSubview(box)

box.snp.makeConstraints { (make) -> Void in
    make.size.equalTo(50)
    make.center.equalTo(container)
}

如您所见，使用 SnapKit 的代码要少得多。

【讨论】：

将阅读有关UIStackView 的更多信息，因为视图是动态添加的，因此我需要以编程方式解决方案。