How to center horizontally 2 or more UIViews inside a UIView container using autolayout programmatically in Swift 3.0

Question

I'm trying to center 2 or more UIView s horizontally inside a UIView eg

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

or

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

I'm adding these constraints to all the views inside the container view

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)

And I'm adding a spacing constraints between each view

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

The above constraints horizontally center all views.

If I change the priority of the horizontalConstraint to 750 then I'm getting something like this

As you can see, when I have an odd number of views these will be horizontally aligned properly, but this is not the case when having an even number of views.

How can I center horizontally any even number of views inside and another view programmatically without using another container or spacing views?

Answer 1

You should use UIStackView . If you don't know how to use UIStackView you can check out this tutorial.

Here's how stack views should look alike.

Keep in mind that in attributes inspector of Stack View you need to enter Axis.

Anyway, if you still want to add constraints programmatically, I recommend using SnapKit .

Here's an example how to use it:

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

container.addSubview(box)

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

As you can see, there is much less code with SnapKit.

Answer 2

So I was able to accomplish this with the help of the UIStackView as recommended by @Sivajee Battina and @Nedim. I created a UIStackView property and the setup the views as follow

    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

Then I added the constraint as follow

    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
    }

Resulting in the solution!!