how to align loop of labels horizontally with different width using autolayout Programatically

Question

I want to align set of labels next to each other using AutoLayout constraint programmatically.

NOTE:And each label must have different width.Like i need to assign in array [50,40,70,30,20,10]

I find some relevant questions but not useful in my case

for var i=0;i<7;i++{
    let DataLabel = UILabel()
    DataLabel.translatesAutoresizingMaskIntoConstraints = false

    DataLabel.text = NamingLabel[i]

    DataLabel.backgroundColor = UIColor.lightGrayColor()
    Self.view.addSubview(DataLabel)
}

If the constraint is in Visual Format language means will be more useful.

Thanks in Advance.

joern · Accepted Answer · 2015-12-23T09:14:50.130

You need the following VFL strings for you labels:

To place each label at 40pt from the top each label needs: "V:|-40-[*labelName*]". Change the 40 to whatever suits you best.
To place the labels next to each other and set their widths you need this single VFL string: "H:|-[label0(50)][label1(40)][label2(70)][label3(30)][label4(20)][label5(10)][label6(30)]"

To be able to use Visual Format Language you have create a dictionary that contains all labels. The values of that dictionary are the UILabels and the keys are Strings that you use in the VFL strings to define which label a constraint should be added to. In this case I use the keys "label0", "label1", "label2" etc.

Here is an example how you could add the constraints in the loop:

let labelWidths = [50, 40, 70, 30, 20, 10, 30]
var labels = [String: UILabel]()
var allConstraints = [NSLayoutConstraint]()
var horizontalConstraintsString = "H:|-"

for i in 0..<7 {
    let labelName = "label\(i)"
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false

    // set text, textColor etc.

    view.addSubview(label)
    labels[labelName] = label

    // add vertical constraints to label
    let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-40-[\(labelName)]", options: [], metrics: nil, views: labels)
    allConstraints.appendContentsOf(verticalConstraints)

    // add label to horizontal VFL string
    horizontalConstraintsString += "[\(labelName)(\(labelWidths[i]))]"
}

// get horizontal contraints from horizontal VFL string
let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(horizontalConstraintsString, options: [], metrics: nil, views: labels)
allConstraints.appendContentsOf(horizontalConstraints)

NSLayoutConstraint.activateConstraints(allConstraints)

UPDATE: As you you are writing in your comment that it still does not work for you, here is the full ViewController class from my example project. So just create a new project in Xcode and paste the following code into the ViewController class:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor.lightGrayColor()

        let labelWidths = [50, 40, 70, 30, 20, 10, 30]
        var labels = [String: UILabel]()
        var allConstraints = [NSLayoutConstraint]()
        var horizontalConstraintsString = "H:|-"

        for i in 0..<7 {
            let labelName = "label\(i)"
            let label = UILabel()
            label.translatesAutoresizingMaskIntoConstraints = false
            label.text = "\(i)"
            label.layer.cornerRadius = 6
            label.clipsToBounds = true
            label.backgroundColor = UIColor.grayColor()
            view.addSubview(label)
            labels[labelName] = label

            // add vertical constraints to label
            let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-40-[\(labelName)]", options: [], metrics: nil, views: labels)
            allConstraints.appendContentsOf(verticalConstraints)

            // add label to horizontal VFL string
            horizontalConstraintsString += "[\(labelName)(\(labelWidths[i]))]"
        }

        // get horizontal contraints from horizontal VFL string
        let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(horizontalConstraintsString, options: [], metrics: nil, views: labels)
        allConstraints.appendContentsOf(horizontalConstraints)

        NSLayoutConstraint.activateConstraints(allConstraints)
    }
}

I added a background color and a corner radius to the labels so you can see where one label ends and the next begins. When you run this project you should see the following:

Thank you so much.But it shows nothing.In separate xcode project i copied this to viewdidload and the declarations are above the viewdidload.And i add background color to label.Even nothing shows when run — Lydia, Dec 23 '15 at 04:55
I added my ViewController class to my answer. It does work, so you can use it to find out why it is still not working in your project. — joern, Dec 23 '15 at 09:16

how to align loop of labels horizontally with different width using autolayout Programatically

1 Answers1