UIStackView儿童等间距(周围和之间)

Question

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

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

当这个不适合我:

这也不是:

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

重要 我正在使用我的TZStackView分支来支持iOS 7.所以layoutMargins对我来说没有:(

Answer 1

我知道这是一个较老的问题,但我解决它的方法是在我的堆栈的开头和结尾添加两个大小为零的UIViews,然后使用该.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，并用间距分隔子视图。