2.1_NSLayoutConstraint基础用法

NSLayoutConstraint核心概念

NSLayoutConstraint 是 Auto Layout 的基石，它定义了视图之间几何关系的规则。通过它，你可以精确控制视图的位置和大小，确保界面在不同设备和方向上都能完美呈现。理解其工作原理是掌握纯代码布局的关键一步！🚀

创建与激活约束

创建 NSLayoutConstraint 需要指定两个视图、它们之间的关系以及常量值。例如，你可以让一个视图的顶部与另一个视图的顶部对齐。

let redView = UIView()
redView.translatesAutoresizingMaskIntoConstraints = false // 禁用自动转换
view.addSubview(redView)

let constraint = NSLayoutConstraint(
    item: redView,
    attribute: .top,
    relatedBy: .equal,
    toItem: view,
    attribute: .top,
    multiplier: 1.0,
    constant: 20
)
constraint.isActive = true // 激活约束

这段代码将 redView 的顶部与父视图的顶部对齐，并向下偏移 20 点。记住，translatesAutoresizingMaskIntoConstraints 必须设置为 false，否则你的手动约束将与系统生成的约束冲突。

约束的属性与关系

NSLayoutConstraint 提供了丰富的属性和关系来描述布局。

• attribute: 定义了视图的哪个部分参与约束，例如 .top、.leading、.width 等。
• relatedBy: 指定了两个属性之间的关系，可以是 .equal（等于）、.lessThanOrEqual（小于等于）或 .greaterThanOrEqual（大于等于）。
• multiplier: 乘数，用于调整约束的比例关系。例如，一个视图的宽度是另一个视图宽度的两倍。
• constant: 常量，用于在乘数基础上增加或减少固定值。

例如，你可以设置一个视图的宽度是其父视图宽度的一半：

NSLayoutConstraint(
    item: redView,
    attribute: .width,
    relatedBy: .equal,
    toItem: view,
    attribute: .width,
    multiplier: 0.5,
    constant: 0
).isActive = true

批量激活约束

当你有多个约束需要激活时，使用 NSLayoutConstraint.activate(_:) 方法会更高效。它能一次性激活一个约束数组，优化性能。

NSLayoutConstraint.activate([
    redView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    redView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    redView.heightAnchor.constraint(equalToConstant: 100)
])

这种方式不仅代码更简洁，而且在内部会进行优化，减少了每次激活单个约束的开销。大约有 30% 的开发者更倾向于这种批量激活方式，因为它能显著提升开发效率。

约束的优先级

每个 NSLayoutConstraint 都有一个 priority 属性，范围从 1 到 1000。默认优先级是 1000（required），表示这个约束必须被满足。当存在冲突的约束时，系统会尝试满足优先级更高的约束。

例如，你可以设置一个视图的宽度为 200，但如果空间不足，它也可以小于 200：

let widthConstraint = redView.widthAnchor.constraint(equalToConstant: 200)
widthConstraint.priority = .defaultHigh // 750
widthConstraint.isActive = true

let lessThanWidthConstraint = redView.widthAnchor.constraint(lessThanOrEqualToConstant: 200)
lessThanWidthConstraint.isActive = true

在这个例子中，系统会优先尝试让 redView 的宽度等于 200。如果无法满足，它会退而求其次，确保宽度小于等于 200。理解优先级能让你创建更灵活、更健壮的布局！💪