如何以编程方式使用自动布局以不同宽度水平对齐标签循环

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)]"

为了能够使用可视格式语言，您已经创建了一个包含所有标签的字典。该字典的值是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)
    }
}

我为标签添加了背景颜色和圆角半径，以便您可以看到一个标签的结束位置和下一个标签的开始位置。运行此项目时，您应该会看到以下内容：