ios - UIStackView 孩子等间距（周围和之间）

Question

如何让 UIStackView 具有与视图之间的填充和间隙相同的空间？

我怎样才能实现这种布局：

当这个不适合我时：

这也不是：

我只需要周围的视图空间与视图之间的空间相同。为什么这么难？

重要的 是，我正在使用我的TZStackView 分支来支持 iOS 7。所以layoutMargins对我来说不是 :(

Answer 1

我知道这是一个较老的问题，但我解决它的方法是在堆栈的开头和结尾添加两个大小为零的 UIView，然后使用.equalSpacing分布。

注意：这只保证沿堆栈视图主轴的间距相等（即我的示例中的左右边缘）

let stack = UIStackView()

stack.axis         = .horizontal
stack.alignment    = .center
stack.distribution = .equalSpacing

// add content normally
// ...

// add extra views for spacing
stack.insertArrangedSubview(UIView(), at: 0)
stack.addArrangedSubview(UIView())

Answer 2

您几乎可以使用 UIStackView 实现您想要的。当您自己在 UIStackView 内的 UIViews 上设置一些约束时，您可以提出以下建议：

这缺少您正在寻找的左右填充。问题在于，UIStackView当您向其添加视图时，它会添加自己的约束。在这种情况下，您可以添加top和bottom约束以获得垂直填充，但是当您尝试trailing为正确的填充添加约束时，UIStackView会忽略或覆盖该约束。有趣的是leading，为左侧填充添加了一个约束。

但是对排列的子视图设置约束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 3

对于那些一直在这里寻找解决此问题的方法的人。我发现（在我的情况下）最好的方法是使用父级UIView作为背景和填充，如下所示：

在这种情况下，它被限制在带有填充UIStackView的边缘，并用间距分隔子视图。UIView