ios - 等間隔の UIStackView の子 (前後およびその間)

Question

ビュー間のパディングとギャップと同じスペースを持つ UIStackView を使用するにはどうすればよいですか?

このレイアウトを実現するにはどうすればよいですか:

これが私に合わない場合：

これもありません：

ビューの周りのスペースがビュー間のスペースと同じである必要があります。なぜそんなに難しいのですか？

重要iOS 7 をサポートするためにTZStackViewのフォークを 使用しています。layoutMargins

Answer 1

UIStackView を使用すると、ほぼ目的を達成できます。UIStackView 内の UIViews にいくつかの制約を自分で設定すると、次のようになります。

これには、探している左右のパディングがありません。問題は、UIStackViewビューを追加するときに独自の制約を追加していることです。この場合、制約を追加topして垂直パディングを取得できますが、右側のパディングに制約bottomを追加しようとすると、その制約が無視または上書きされます。興味深いことに、左パディングの制約を追加すると機能します。trailingUIStackViewleading

ただし、配置されたサブビューに制約を設定UIStackView'sすることは、とにかくやりたいことではありません。a を使用することの全体的なポイントは、UIStackViewいくつかのビューを与えてUIStackView、残りを処理させることです。

あなたがやろうとしていることを達成することは、実際にはそれほど難しいことではありません。UIViewControllerすべての側面でパディングを処理できるカスタム スタック ビューを含むの例を次に示します (制約にはSnapKitを使用しました)。

import UIKit
import SnapKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let padding: CGFloat = 30

        let customStackView = UIView()
        customStackView.backgroundColor = UIColor(white: 0, alpha: 0.1)
        view.addSubview(customStackView)
        customStackView.snp_makeConstraints { (make) -> Void in
            make.top.left.equalTo(padding)
            make.right.equalTo(-padding)
        }

        // define an array of subviews
        let views = [UIView(), UIView(), UIView()]

        // UIView does not have an intrinsic contentSize
        // so you have to set some heights
        // In a real implementation the height will be determined
        // by the views' content, but for this example
        // you have to set the height programmatically
        views[0].snp_makeConstraints { (make) -> Void in
            make.height.equalTo(150)
        }
        views[1].snp_makeConstraints { (make) -> Void in
            make.height.equalTo(120)
        }
        views[2].snp_makeConstraints { (make) -> Void in
            make.height.equalTo(130)
        }

        // Iterate through the views and set the constraints
        var leftHandView: UIView? = nil
        for view in views {
            customStackView.addSubview(view)
            view.backgroundColor = UIColor(white: 0, alpha: 0.15)

            view.snp_makeConstraints(closure: { (make) -> Void in
                make.top.equalTo(padding)
                make.bottom.lessThanOrEqualTo(-padding)
                if let leftHandView = leftHandView {
                    make.left.equalTo(leftHandView.snp_right).offset(padding)
                    make.width.equalTo(leftHandView)
                } else {
                    make.left.equalTo(padding)
                }
                leftHandView = view
            })
        }

        if let lastView = views.last {
            lastView.snp_makeConstraints(closure: { (make) -> Void in
                make.right.equalTo(-padding)
            })
        }
    }
}

これにより、次の結果が生成されます。

Answer 2

この問題の解決策を探してここにたどり着く人のために。（私の場合）最善の方法は、次のUIViewように親を背景とパディングとして使用することであることがわかりました。

この場合、UIStackViewはパディングを使用して の端にUIView制限され、サブビューを間隔で分離します。