Xibで作ったViewに制約をかけてUIStackViewに追加するとレイアウトがおかしくなる

Question

前提

Xibで定義したView（以下Cellと呼ぶ）をStackViewに追加する処理を書いてます。
追加する前に四隅にスペースを入れるため制約を追加したいと思っています。

実装方法

StackViewに追加する前に空のUIViewにCellを追加し四隅に制約を追加しています。

ソースコード

• 全体画面

import UIKit

class PracticeStackViewController: UIViewController {

    // 角丸などを付与したカスタムStackView
    @IBOutlet weak var additionalStackView: InspectableStackView!
    
    //コンテンツ
    private var contents = [
        ContentModel(title: "ラーメン", price: 250),
        ContentModel(title: "牛丼", price: 120),
        ContentModel(title: "オムライス", price: 120),
        ContentModel(title: "コース料理", price: 1000),
        ContentModel(title: "キムチ", price: 150),
        ContentModel(title: "アイスクリーム", price: 300),
        ContentModel(title: "たこ焼き", price: 420),
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()

        setup()
    }
    

    private func setup() {
        for content in contents {
            let cell = AddisionalStackCellView()
            cell.titleLabel.text = content.title
            cell.priceButton.titleLabel?.text = content.price.description + "円"
            
            //Cellに四隅の制約を加える
            let constraintedCell = createConstraintCell(cell)
            
            additionalStackView.addArrangedSubview(constraintedCell)
        }
        
    }
    
    private func createConstraintCell(_ cell: AddisionalStackCellView) -> UIView {
        
        // 空のUIViewにCellを追加
        let baseView = UIView()
        baseView.addSubview(cell)
      
        //四隅に制約追加
        cell.translatesAutoresizingMaskIntoConstraints = false
        cell.topAnchor.constraint(equalTo: baseView.topAnchor, constant: 14.0).isActive = true
        cell.leadingAnchor.constraint(equalTo: baseView.leadingAnchor, constant: 20.0).isActive = true
        cell.trailingAnchor.constraint(equalTo: baseView.trailingAnchor, constant: 15.0).isActive = true
        cell.bottomAnchor.constraint(equalTo: baseView.bottomAnchor, constant: 14.0).isActive = true
        
        return baseView
    }
}

• Cell

import UIKit

class AddisionalStackCellView: UIView {
    
    @IBOutlet var contentView: UIView!
    @IBOutlet var titleLabel: UILabel!
    @IBOutlet var priceButton: UIButton!
    
    // MARK: - Functions
    // MARK: Override Functions
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    
    // MARK: Public Functions
    
    /// Custom Viewのinitに必要なメソッド
    func commonInit() {
        Bundle.main.loadNibNamed(String(describing: type(of: self)), owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = bounds
    }

}

発生している問題・エラーメッセージ

薄く白みがかったStackViewの中に余白があるCellが綺麗に追加されてるのを期待してましたが、
なぜかStackViewからはみ出してしまいます。。。

試したこと

BreakPointで止めて、createConstraintCell()を実行中のbaseViewとcellのframeを確認するとどちらも全て0.0でした。
この時点で制約をかけてもうまく描画できてないのかな、と思いますがどう改善すれば良いかわかりません。

補足情報（FW/ツールのバージョンなど）

Xcode13.3
iOS15.4でシュミレート

Comments

[hoshi-takanori]

trailingAnchor と bottomAnchor の constant をマイナスにすると良いかも？

[iosClimer]

できました！！
constantの値は余白の大きさだと思っていましたが、制約先のViewとのOffset位置なのですね！
勉強になりました！

Answer 1

trailingAnchor と bottomAnchor の constant をマイナスにしたところうまく行きました。
四隅にスペースを入れる際は左と上はマイナスにする、ということを学びました。