Layout Horizo​​ntal Anchors - Swift 3の問題

Question

誰かが自分のコードが機能していない理由を洞察できますか？

画像内の2つのビュー（赤と黒の1つ）の間に水平間隔を追加しようとしていますが、何らかの理由でそのエラーが発生し続けているため、修正方法がわかりません。

問題が表示されていないため、シミュレーションやコンソールで他の制約が正しく働いているとします。

コードをユーザーの要求に応じて：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 

    } 
} 

UPDATE 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. 

UPDATE 2を要求したとして疑問を追加しましたエラー - TL; DR

使用
yourView.leadingAnchor.constraint（equalTo：yourOtherView.trailingAnchor）.isActive =真

代わりに

yourView.centerXAnchor.constraint（equalTo：yourOtherView.centerXAnchor）.isActive =真

Answer 1

OK、Mattさんの質問に対するあなたのコメントから。あなたはまだ制約に考えていない：D

あなたが考えるframeとrectものですbounds.size.width - 80を必要としません。考えているのはAutoLayoutではありません。

AutoLayoutのレイアウトについて考えるには、レイアウトをアプリに記述する必要があります。価格ビューの幅が80

リードする、トップ、および価格ビューの下端に固定してください

• これは私がしたいと思うものです
  は

  ... 0〜スペースを持っていますスーパービューの先頭、上端、下端をそれぞれ示します。

• 購入ビューの先頭には、価格表示の後端までのスペースが必要です。
• 購入ビューの後端、上端、下端には、スーパービューの後端、上端、および下端までのスペースが0でなければなりません。

このリストには、価格表示と購入ビューのレイアウトが1つしかありません。他のレイアウトでは制約に反します。また、私は必要のないものは追加していません。たとえば、両方のビューの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 

これは、（価格表示と購入ビューの場合）そのはずです。

AutoLayoutを使用しているときにタスクを複雑にしないでください。 AutoLayoutによって多くの作業が完了しました。

編集 - UIStackView

あなたの質問にコメントさん@ abizernあたりとして。あなたは本当にUIStackViewをチェックアウトする必要があります。このような苦労を多く取り除き、自動レイアウトを使ったレイアウトをはるかに簡単にします。

Answer 2

問題1：あなたは

を言ったことはありません：あなたは

priceView.translatesAutoresizingMaskIntoConstraints = false 

問題2が言ったことはありません0

問題3：priceViewとpurchaseViewに完全な制約条件が必要です。

つまり、いくつかのビューではframe、他のビューではautolayoutを使用して、このように混在させることはできません。ビューが自動レイアウトに含まれると、完全に自動レイアウトに関与するであり、完全レイアウトと自動レイアウトによってサイズを調整する必要があります。

問題1と問題2を修正すると、コンソールエラーはなくなりますが、過度のレイアウトから過小なレイアウトになったため、ビューの位置/サイズが狂っていることがわかります。レイアウトを決定するために欠落している制約を満たす必要があります。特に：

• ブラックビューの幅（priceView）を決定する必要があります。

• 赤い視野の幅とx位置を決定する必要があります（purchaseView）。