Как выровнять петлю надписей по горизонтали с разной шириной с помощью автопрокладки

Question

Я хочу выровнять набор меток рядом друг с другом, используя ограничение AutoLayout программно.

ПРИМЕЧАНИЕ. И каждая метка должна иметь разную ширину. Как и мне, нужно назначить в массиве [50,40,70,30,20,10]

Я нахожу некоторые относящиеся к делу вопросы, но бесполезные в моем случае

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)
}

Если ограничение в Visual Format, значит язык будет более полезным.

Заранее спасибо.

Answer 1

Вам нужны следующие строки VFL для ваших ярлыков:

1. Чтобы разместить каждый ярлык на 40pt сверху, каждому ярлыку нужно: "V:|-40-[*labelName*]", Изменить 40 к тому, что подходит вам лучше всего.
2. Чтобы разместить метки рядом друг с другом и установить их ширину, вам понадобится одна строка VFL: "H:|-[label0(50)][label1(40)][label2(70)][label3(30)][label4(20)][label5(10)][label6(30)]"

Чтобы иметь возможность использовать Visual Format Language, вы должны создать словарь, который содержит все метки. Значения этого словаря являются UILabels и ключи Strings что вы используете в строках VFL, чтобы определить, к какой метке должно быть добавлено ограничение. В этом случае я использую ключи "label0", "label1", "label2" и т. Д.

Вот пример того, как вы можете добавить ограничения в цикл:

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)

ОБНОВЛЕНИЕ: Как вы пишете в своем комментарии, что он все еще не работает для вас, вот полный ViewController класс из моего примера проекта. Так что просто создайте новый проект в Xcode и вставьте следующий код в ViewController учебный класс:

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)
    }
}

Я добавил цвет фона и угловой радиус к меткам, чтобы вы могли видеть, где заканчивается одна метка и начинается следующая. При запуске этого проекта вы должны увидеть следующее: