NSLayoutConstraint withVisualFormat布局

Question

NSLayoutConstraint 你好，我一直在尝试用 VisualFormat 围绕 NSLayoutConstraint 进行思考，但我玩得很开心。我有三个标签，我想以特定格式订购它们，但我似乎无法获得。我在自定义 UITableViewCell 中执行此操作。

我试着画了下面的单元格布局。我将如何完成这个？

--------------------------------------------------------------------------------
(10 padding)Name
                                                           ColorName(10 padding)
(10 padding)Description
--------------------------------------------------------------------------------

Answer 1

我会推荐一些东西。首先不要使用视觉布局。 Apple 现在建议在代码中使用约束锚点。视觉布局可能看起来很简单。但它不是最可维护的。其次，如果可以的话，使用IB，它更简单、更容易。最后，对于您似乎正在做的事情，请使用 UIStackView 而不是尝试自己构建约束。同样，更简单，它的设计正是为了满足您的需求。

Answer 2

诀窍是使用多个视觉约束来垂直和水平排列所有内容。您可以将所有三个视图组合成一个垂直约束，因为它们都排成一行，但对于水平约束，您需要为每一行添加一个（因此总共三个）。

您需要在视觉约束中指定元素的高度以使所有内容对齐

下面是一些示例代码：

let name = UITextField(frame: CGRect())
name.text = "Name"
name.translatesAutoresizingMaskIntoConstraints = false
name.backgroundColor = UIColor.red

let colorName = UITextField(frame: CGRect())
colorName.text = "ColorName"
colorName.translatesAutoresizingMaskIntoConstraints = false
colorName.backgroundColor = UIColor.gray

let description = UITextField(frame: CGRect())
description.text = "Description"
description.translatesAutoresizingMaskIntoConstraints = false
description.backgroundColor = UIColor.green

view.addSubview(name)
view.addSubview(colorName)
view.addSubview(description)

view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(10)-[name]", options: [], metrics: nil, views: ["name": name]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[colorName]-(10)-|", options: [], metrics: nil, views: ["colorName": colorName]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(10)-[description]", options: [], metrics: nil, views: ["description": description]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(50)-[name]-(10)-[colorName]-(10)-[description]", options: [], metrics: nil, views: ["name": name, "colorName": colorName, "description": description]))

对于垂直约束，我使用了距顶部 50 的填充，每个对象之间有 10 点。显然，您可以将这些设置为任何您想要的。

NSLayoutConstraint withVisualFormat布局

NSLayoutConstraint withVisualFormat layout

nslayoutconstraint

swift