需要有关自动布局锚点的帮助答案

【问题标题】：Need assistance regarding autolayout anchors需要有关自动布局锚点的帮助
【发布时间】：2017-10-14 17:01:59
【问题描述】：

我正在学习自动布局锚点并尝试以编程方式实现这个简单的事情

这里是我的代码

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(true)

    let view1 = UIView()
    view1.backgroundColor = .brown
    blueView.addSubview(view1)

    view1.translatesAutoresizingMaskIntoConstraints = false
    view1.topAnchor.constraint(equalTo: blueView.topAnchor, constant:10).isActive = true
    view1.bottomAnchor.constraint(equalTo: blueView.bottomAnchor, constant:10).isActive = true
    view1.leadingAnchor.constraint(equalTo: blueView.leadingAnchor, constant:10).isActive = true
    view1.trailingAnchor.constraint(equalTo: blueView.trailingAnchor, constant:10).isActive = true
    view1.heightAnchor.constraint(equalToConstant: 80).isActive = true
    view1.widthAnchor.constraint(equalToConstant: 80).isActive = true
}

这就是我得到的

出了什么问题？

【问题讨论】：

请用图片代替链接。
您期待什么结果？在没有设置测试项目的情况下，事情看起来对我来说是正确的 - 您将前导/尾随和顶部/底部锚点设置为与蓝色锚点向下和向右偏移 10 个点。存在冲突：蓝色的宽度/高度为 100，您似乎正在尝试将棕色的宽度/高度设置为 80。但是，这可能意味着布局引擎正在破坏这两者，因为它们与底部/尾随约束。（我为什么这么说？因为结果。）顺便说一句，您检查控制台是否有任何冲突？
还有一项 - 我刚刚注意到您正在将棕色视图设为蓝色视图的子视图。如果您希望剪辑棕色视图以始终保持在蓝色视图的范围内，请设置该标志。否则，您可以发布结果。

标签： swift uiview autolayout

【解决方案1】：

出了什么问题？

我看到了三类问题：

某些约束未激活。尚未设置 heightAnchor 和 widthAnchor 约束，因此 isActive = true
约束存在冲突。您正在基于常量设置约束，而不考虑超级视图的尺寸。这导致约束发生冲突，例如，view1 不能高 100 点距离超级视图顶部 263 点和 284来自底部锚点的点，全部同时进行。
基于常量的约束通常无法使视图在屏幕上居中，因为屏幕尺寸变化很大。

以下是这三个问题的一种可能解决方案：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(true)

    let view1 = UIView()
    view1.backgroundColor = .brown
    view.addSubview(view1)

    view1.translatesAutoresizingMaskIntoConstraints = false
    view1.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    view1.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    view1.heightAnchor.constraint(equalToConstant: 100.0).isActive = true
    view1.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
}

这里，我们设置view1的X和Y中心等于superview的X和Y中心，将view1的高度和宽度定义为常数，并将所有相关约束设置为活动状态。

您可以在Auto Layout Guide找到其他解决方案。

【讨论】：

@Pursuingperfect 我相信您添加到顶部/底部/前导/尾随约束的 10 个点常量是问题的根源。将view1.topAnchor.constraint(equalTo: blueView.topAnchor, constant:10).isActive = true替换为view1.topAnchor.constraint(equalTo: blueView.topAnchor).isActive = true等，一切都应该正确排列。

【解决方案2】：

尝试这样做：

override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(true)

let view1 = UIView()
view1.backgroundColor = .brown
view.addSubview(view1)

view1.translatesAutoresizingMaskIntoConstraints = false

//Constraints
let centerXConstraint = view1.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0)
let centerYConstraint = view1.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0)
let widthConstraint = view1.widthAnchor.constraint(equalToConstant: 100)
let heightConstraint = view1.heightAnchor.constraint(equalToConstant: 100)

//Apply constraints
constraintToApply.append(centerXConstraint)
constraintToApply.append(centerYConstraint)
constraintToApply.append(widthConstraint)
constraintToApply.append(heightConstraint) 
}

并添加以下代码：

override func viewDidAppear(_ animated: Bool) {

    // Apply Constraints
    NSLayoutConstraint.activate(constraintToApply)
    self.view.layoutIfNeeded()
}

希望对你有帮助。

【讨论】：

请再次查看我的问题，我已修改。

【解决方案3】：

您为每个约束添加 +10 分。

view1.topAnchor.constraint(equalTo: blueView.topAnchor, constant:10).isActive = true

意思是“设置view1的top anchor为blueView的top anchor plus 10”

只需删除constant:10

view1.topAnchor.constraint(equalTo: blueView.topAnchor).isActive = true

如果您设置顶部、底部、左侧、前导和尾随锚点，则不应设置高度和宽度。宽度和高度将根据这 4 个锚点计算。所以，你应该删除

view1.heightAnchor.constraint(equalToConstant: 80).isActive = true
view1.widthAnchor.constraint(equalToConstant: 80).isActive = true

【讨论】：