Centering Horizontal in visual format language

Question

I have 3 labels which I have placed against each other like in this picture:

However right now they are placed against the left side, I wan't them to be placed in the center horizontal. Here is the visual format code for their horizontal placing:

let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|[label][label2][label3]|",
            options: [],
            metrics: nil,
            views: views)

However whatever I test I can't get them to center, any thoughts?

The easiest solution by far is to put those 3 labels into a view and center that view. — Sulthan, Mar 25 '16 at 17:47

score 6 · Accepted Answer · answered Mar 25 '16 at 16:00

If you want to make it center horizontally/vertically both as i understand from the image you can make it like this:

// Center horizontally
var constraints = NSLayoutConstraint.constraintsWithVisualFormat(
    "V:[superview]-(<=1)-[label2]",
    options: NSLayoutFormatOptions.AlignAllCenterX,
    metrics: nil,
    views: ["superview":view,"label2":label2])

view.addConstraints(constraints)

// Center vertically
constraints = NSLayoutConstraint.constraintsWithVisualFormat(
    "H:[superview]-(<=1)-[label1][label2][label3]",
    options: NSLayoutFormatOptions.AlignAllCenterY,
    metrics: nil,
    views: ["superview":view, "label1":label1,"label2":label2,"label3":label3])

view.addConstraints(constraints)

so it will be look like this:

This is how I want it. But how would you do if it was an even number of labels? Lets say 4? — Fredrik, Mar 25 '16 at 16:17
What should I use if the views I want to center are inside a UICollectionViewCell? — Edu, Jun 24 '17 at 05:50

score 0 · Answer 2 · answered Mar 25 '16 at 15:42

This is happening because the right-most label is expanding to consume all of the remaining space. To achieve the expected outcome, we have to do two things:

Change the VFL to explicitly set each of the label widths to be the same. You can do this by changing the format to H:|[label1][label2(==label1)][label3(==label1)]|
Modify your labels to center align their text using the textAlignment property.

You can drop the following into a playground to get a better feel for what's going on:

import UIKit

let frame = CGRectMake(0, 0, 500, 500)

let label1 = UILabel()
label1.layer.borderColor = UIColor.redColor().CGColor
label1.layer.borderWidth = 1
label1.text = "Label 1"
label1.textAlignment = .Center
label1.translatesAutoresizingMaskIntoConstraints = false
label1.sizeToFit()

let label2 = UILabel()
label2.layer.borderColor = UIColor.greenColor().CGColor
label2.layer.borderWidth = 1
label2.text = "Label 2"
label2.textAlignment = .Center
label2.translatesAutoresizingMaskIntoConstraints = false
label2.sizeToFit()

let label3 = UILabel()
label3.layer.borderColor = UIColor.blueColor().CGColor
label3.layer.borderWidth = 1
label3.text = "Label 3"
label3.textAlignment = .Center
label3.translatesAutoresizingMaskIntoConstraints = false
label3.sizeToFit()

let view = UIView(frame: frame)
view.backgroundColor = UIColor.grayColor()
view.addSubview(label1)
view.addSubview(label2)
view.addSubview(label3)

let originalFormat = "H:|[label1][label2][label3]|"
let newFormat = "H:|[label1][label2(==label1)][label3(==label1)]|"
let views = ["label1": label1, "label2": label2, "label3": label3]
let constraints = NSLayoutConstraint.constraintsWithVisualFormat(originalFormat, options: [], metrics: nil, views: views)

view.addConstraints(constraints)
view.layoutIfNeeded()

view

Using the originalFormat you get this:

With my proposed changes you get this:

Centering Horizontal in visual format language

2 Answers2