Swift 4中使用Layout Anchors重构Auto Layout代码遇错误求助

嘿，我懂你这种想用新写法却踩坑的感觉！之前用NSConstraints好好的，换成Layout Anchors就一堆错误，大概率是几个新手常犯的小问题没注意到。我来帮你捋清楚正确的实现方式，按步骤来绝对没问题：

1. 先搞定基础配置（最容易忘的一步！） #

创建你的滑入视图时，一定要关闭系统自动生成约束的功能，否则手动添加的Layout Anchors会和系统默认约束冲突，控制台直接炸锅：

let slideInView = UIView()
slideInView.backgroundColor = .systemBlue // 随便整个颜色方便看效果
slideInView.translatesAutoresizingMaskIntoConstraints = false // 这个必须设！
self.view.addSubview(slideInView)

2. 设置固定约束（宽度、上下边距） #

按照你的思路，先给视图指定固定宽度，再把顶部和底部锚定到父视图，这样视图的高度会自动匹配父视图：

// 固定宽度，比如设为280
slideInView.widthAnchor.constraint(equalToConstant: 280).isActive = true
// 顶部和父视图顶部对齐
slideInView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
// 底部和父视图底部对齐
slideInView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

3. 声明可修改的约束属性（动画核心） #

要实现滑入滑出，我们需要一个可以动态调整的约束——把视图的右边缘约束存为类属性，这样后续才能修改它的constant值：

// 在类里先声明这个属性
private var slideInRightConstraint: NSLayoutConstraint!

// 然后回到创建视图的代码，设置初始约束
// 初始状态让视图完全藏在父视图右侧外面（constant值等于视图宽度）
slideInRightConstraint = slideInView.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: 280)
slideInRightConstraint.isActive = true

4. 按钮点击的动画逻辑 #

点击按钮时，只需要修改约束的constant值，然后通过layoutIfNeeded()触发动画即可：

@IBAction func toggleSlideView(_ sender: UIButton) {
    // 切换constant值：0是滑入（视图右边缘和父视图右边缘对齐），280是滑出
    slideInRightConstraint.constant = slideInRightConstraint.constant == 280 ? 0 : 280
    
    // 执行动画，时长可以自己调
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded() // 必须在动画闭包里调用这个！
    }
}

常见错误排查 #

• 忘记关闭translatesAutoresizingMaskIntoConstraints：这是最常见的坑，系统默认会给视图生成自动约束，和手动约束冲突导致崩溃或布局混乱。
• 没把要动画的约束存为属性：如果直接在创建时激活约束而不保存引用，之后就没法修改它的constant值，自然做不了动画。
• 动画时没调用layoutIfNeeded()：只修改约束值不会自动触发动画，必须在动画闭包里调用这个方法，才能让约束变化以平滑动画呈现。
• 锚定的父视图错误：比如不小心把视图锚定到了按钮或者其他子视图，而不是你期望的父视图，导致位置完全不对。

这样写出来的代码和你原来的NSConstraints逻辑一致，但用Layout Anchors更简洁易读，赶紧试试吧！

内容的提问来源于stack exchange，提问作者Bowcaps