StackViewを入れ子にした時のレイアウトについて教えてください

Question

Horizo​​ntal Stack Viewで均等に並べられない
上の解決した質問で疑問があるので質問させてください。

☆の表示がどうしても均等にならずに困っていたのですが、StackViewを入れ子にしたところ思い通りになりました。
どういった仕組みなのでしょうか？

追記

星はRatingControlというカスタムクラスで表示しています。

import UIKit

@IBDesignable class RatingControl: UIStackView {

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */
    
    //MARK: Properties
    private var ratingButtons = [UIButton]()
    
    var rating = 0 {
        didSet {
            updateButtonSelectionStates()
        }
    }
    
    @IBInspectable var starSize: CGSize = CGSize(width: 44.0, height: 44.0) {
        didSet {
            setupButtons()
        }
    }
    
    @IBInspectable var starCount: Int = 5 {
        didSet {
            setupButtons()
        }
    }
    
    //MARK: Initialization(初期化)
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupButtons()
    }
    
    required init(coder: NSCoder) {
        super.init(coder: coder)
        setupButtons()
    }
    
    //MARK: Private Methods
    
    private func setupButtons() {
        for button in ratingButtons {
            removeArrangedSubview(button)
            button.removeFromSuperview()
        }
        ratingButtons.removeAll()
        
        //ボタン画像読み込み
        let bundle = Bundle(for: type(of: self))
        let filledStar = UIImage(named: "filledStar", in: bundle, compatibleWith: self.traitCollection)
        let emptyStar = UIImage(named:"emptyStar", in: bundle, compatibleWith: self.traitCollection)
        let highlightedStar = UIImage(named:"highlightedStar", in: bundle, compatibleWith: self.traitCollection)
        
        for _ in 0..<starCount {
            // ボタン作成
            let button = UIButton()
            button.setImage(emptyStar, for: .normal)
            button.setImage(filledStar, for: .selected)
            button.setImage(highlightedStar, for: .highlighted)
            button.setImage(highlightedStar, for: [.highlighted, .selected])
            
            // 自動生成された制約を削除
            button.translatesAutoresizingMaskIntoConstraints = false
            // 大きさを指定
            button.heightAnchor.constraint(equalToConstant: starSize.height).isActive = true
            button.widthAnchor.constraint(equalToConstant: starSize.width).isActive = true
            // ボタンアクションを設定
            button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)
            // Add the button to the stack
            addArrangedSubview(button)
            
            // Add the new button to the rating button array
            ratingButtons.append(button)
        }
        
        updateButtonSelectionStates()
    }
    
    //MARK: Button Action
    
    @objc func ratingButtonTapped(button: UIButton) {
        print("Button pressed ????")
        
        guard let index = ratingButtons.index(of: button) else {
            fatalError("The button, (button), is not in the ratingButtons array: (ratingButtons)")
        }
        
        let selectedRating = index + 1
        
        if selectedRating == rating {
            rating = 0
        } else {
            rating = selectedRating
        }
    }
    
    private func updateButtonSelectionStates() {
        for (index, button) in ratingButtons.enumerated() {
            button.isSelected = index < rating
        }
    }
}

追記2

すでにチュートリアルを完成させてしまった為同じ構成ではないかもしれませんが、Constraintsの構成を追記します。

Comments

[fuzzball]

星はImageViewでしょうか？
上のスクリーンショットを見てもStackViewに何も入っていないように見えるのですが？
また制約も付いていないようですけど。

[bws]

ありがとうございます。
星はRatingControlというカスタムクラスを使用しています。
コードを追記しておきました。よろしくお願いします。

[fuzzball]

StackViewの制約は？

[bws]

制約を追記しました。
チュートリアルを完成させてしまった為、構成が違うかもしれません。チュートリアルはこれです。
https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ImplementingACustomControl.html#//apple_ref/doc/uid/TP40015214-CH19-SW1

Answer 1

ちゃんとコードを把握できていないので半分くらい推測ですが、

「画像幅が44固定 * 5 = 220」なのにStackViewの幅を画面幅に合わせているから、矛盾が発生しておかしくなっているんだと思います。

trailingの制約を削除すれば正しく表示されるのではないでしょうか。（左揃えの場合）

（ここまでは前回の質問への回答ですね‥）

入れ子にすると直るのは矛盾する制約がなくなるためでしょう。

Comments

[bws]

RatingControlを配置する場所を間違えていた為矛盾が生じて表示が崩れていたみたいです。ありがとうございました！

Answer 2

RatingControlを配置する場所を間違えていた為、制約に矛盾が発生して表示がおかしくなっていました。

正しい

間違い