ios - 布局水平 anchor 问题 - Swift 3

Question

任何人都可以深入了解为什么我的代码不起作用吗？

我正在尝试在图片中的 2 个 View (红色和黑色 View )之间添加水平间距，但出于某种原因，我不断收到该错误，我不确定如何修复它。

我假设其他约束正常工作，因为我没有看到任何问题，无论是在模拟中还是在控制台中。

用户请求的代码:https://gist.github.com/sungkim23/66ecd9ce71d0480f083bcd05caf0a58c

import UIKit

class BuyButton: UIView {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        //MARK: - View
        backgroundColor = UIColor(red: 180/255, green: 35/255, blue: 115/255, alpha: 1)
        layer.cornerRadius = 3

        //MARK: - Price View
        let priceView = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: bounds.size.height))
        priceView.backgroundColor = UIColor.black
        addSubview(priceView)

        //MARK: - Purchase View
        let purchaseView = UIView(frame: CGRect(x: 80, y: 0, width: bounds.size.width - 80, height: bounds.size.height))
        purchaseView.backgroundColor = UIColor.red
        addSubview(purchaseView)

        //MARK: - Price Label
        let priceLabel = UILabel(frame: CGRect.zero)
        priceLabel.text = "$ 50.00"
        priceLabel.textAlignment = .center
        priceLabel.backgroundColor = .red
        priceLabel.translatesAutoresizingMaskIntoConstraints = false
        priceView.addSubview(priceLabel)

        //MARK: - Purchase Label
        let purchaseLabel = UILabel(frame: CGRect.zero)
        purchaseLabel.text = "Purchase"
        purchaseLabel.textAlignment = .center
        purchaseLabel.backgroundColor = .green
        purchaseLabel.translatesAutoresizingMaskIntoConstraints = false
        purchaseView.addSubview(purchaseLabel)

        //MARK: - View Constraints
        priceView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        priceView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        priceView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

        purchaseView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        purchaseView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        purchaseView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

        priceView.centerXAnchor.constraint(equalTo: purchaseView.centerXAnchor).isActive = true

        //MARK: - Label Constraints
        priceLabel.centerXAnchor.constraint(equalTo: priceView.centerXAnchor).isActive = true
        priceLabel.centerYAnchor.constraint(equalTo: priceView.centerYAnchor).isActive = true
        purchaseLabel.centerXAnchor.constraint(equalTo: purchaseView.centerXAnchor).isActive = true
        purchaseLabel.centerYAnchor.constraint(equalTo: purchaseView.centerYAnchor).isActive = true

        //MARK: - Constraint priorities

    }
}

更新 1 - 根据要求向问题添加错误

2017-03-13 11:02:38.440892 ButtonTest[20954:1645749] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want. 
Try this: 
    (1) look at each constraint and try to figure out which you don't expect; 
    (2) find the code that added the unwanted constraint or constraints and fix it. 
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
"<NSAutoresizingMaskLayoutConstraint:0x60000009a400 h=--& v=--& UIView:0x7fe55be017b0.midX == 40   (active)>",
"<NSAutoresizingMaskLayoutConstraint:0x600000099ff0 h=--& v=--& UIView:0x7fe55bc09310.midX == 232   (active)>",
"<NSLayoutConstraint:0x600000099c30 UIView:0x7fe55be017b0.centerX == UIView:0x7fe55bc09310.centerX   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600000099c30 UIView:0x7fe55be017b0.centerX ==    UIView:0x7fe55bc09310.centerX   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to   catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

更新 2 - tl;dr

使用
yourView.leadingAnchor.constraint(equalTo: yourOtherView.trailingAnchor).isActive = true

代替

yourView.centerXAnchor.constraint(equalTo: yourOtherView.centerXAnchor).isActive = true

Answer 1

好的，根据您对马特问题的评论。你仍然没有在约束中思考 :D

您不需要考虑 bounds.size.width - 80，它是 frame 和 rect 的东西。这不是要考虑的 AutoLayout 事情。

为了考虑 AutoLayout 中的布局，您需要向应用描述布局。

这就是我想你想要的......

• 价格 View 的宽度应固定为 80。
• 价格 View 的前导、顶部和底部边缘与 super View 的前导、顶部和底部边缘分别有 0 个空间。
• 购买 View 的前缘到价格 View 的后缘应该有 0 个空间。
• 购买 View 的尾部、顶部和底部边缘与 super View 的尾部、顶部和底部边缘的间距应为 0。

在此列表中，价格 View 和购买 View 只有一种可能的布局。任何其他布局都会与约束相矛盾。另外，我没有添加任何我不需要的东西。例如，按照这些说明，两个 View 的 centerYAnchor 将相同。我不需要明确添加。

现在您有了这个非常简单的描述...只需添加即可。

// set the width of price view
priceView.widthAnchor.constraint(equalToConstant: 80).isActive = true
// now add the other edges to super view
priceView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
priceView.topAnchor.constraint(equalTo: topAnchor).isActive = true
priceView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

// set the spacing between price view and purchase view
purchaseView.leadingAnchor.constraint(equalTo: priceView.trailingAnchor).isActive = true
// add the other edges to the super view
purchaseView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
purchaseView.topAnchor.constraint(equalTo: topAnchor).isActive = true
purchaseView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true

应该是这样(对于价格 View 和购买 View )。

在使用 AutoLayout 时不要试图使您的任务过于复杂。 AutoLayout 为您完成了很多工作。

编辑 - UIStackView

根据@abizern 对您的问题的评论。您真的应该检查一下 UIStackView。它消除了很多这种痛苦，并使使用自动布局的布局变得更加容易。