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 UIViews horizontally inside a UIView e.g.

|             [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?

I don't know whether you decided completely to write constraints programmatically if you use stack view, it will fulfill your requirement with ease. — Sivajee Battina, May 05 '17 at 08:46
Can you provide and example using stack view done programmatically that can solve my problem? — Black Sheep, May 05 '17 at 08:48

score 3 · Answer 1 · answered May 05 '17 at 09:17

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.

Will read more about the `UIStackView` I need the solution to be programmatically as the views are added dynamic. — Black Sheep, May 06 '17 at 00:02

Black Sheep · Accepted Answer · 2017-05-06T00:19:05.133

So I was able to accomplish this with the help of the UIStackViewas 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!!

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

2 Answers2