如何在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 ，可以查看本教程。

这是堆栈视图应该看起来相似的方式。

请记住，在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

所以，我能够与的帮助来完成这个UIStackView所推荐的@Sivajee Battina和@Nedim。 我创建了一个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
    }

导致解决方案!!