如何在Swift 3.0中以编程方式使用autolayout在UIView容器内水平居中2个或更多UIViews

Question

我正试图在UIView内水平居中2个或多个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，那么我会得到类似这样的内容

正如你所看到的，当我有一个奇数个视图时，这些视图将水平对齐，但是当拥有偶数个视图时则不是这样。

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

Answer 1

您应该使用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的代码要少得多。

Answer 2

所以我能够在@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
    }

导致解决方案!!