视觉格式语言中的水平居中

Question

我有 3 个标签，它们彼此相对放置，如下图所示：

但是现在它们靠着左侧放置，我不希望它们放置在水平中央。这是他们水平放置的视觉格式代码：

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

但是无论我测试什么我都无法让它们居中，有什么想法吗？

Answer 1

发生这种情况是因为最右边的标签正在扩展以消耗所有剩余的 space。为了达到预期的效果，我们要做两件事：

更改 VFL 以明确将每个标签宽度设置为相同。您可以通过将格式更改为 H:|[label1][label2(==label1)][label3(==label1)]|
使用 textAlignment 属性.

您可以将以下内容放到 playground 中，以更好地了解正在发生的事情：

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

使用 originalFormat 你会得到这个：

根据我提出的更改，您会得到：

Answer 2

如果你想让它居中 horizontally/vertically 正如我从图片中了解到的那样，你可以这样做：

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

所以它看起来像这样：

视觉格式语言中的水平居中

Centering Horizontal in visual format language

visual-format-language

swift