如何在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
    }

導致解決方案!!