UIStackView children are evenly distributed (around and between them)

Question

How can I get a UIStackView with the same space as indentation and space between views?

How can I achieve this layout:

When it does not suit me:

Also this:

I just need the space around the views to be the same as the space between the views. Why is it so hard?

Attention! I've been using my fork TZStackView to support iOS 7. I have no layoutMargins: (

Answer 1

, . , ( ) - UIView , :

UIStackView UIView subviews .

Answer 2

, , UIStackView. UIViews UIStackView, :

, . , UIStackView . top bottom, , trailing , UIStackView . leading .

UIStackView's subviews - , . 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

I know this is an older question, but the way I decided is to add two UIViews with zero size at the beginning and end of my stack, and then use the distribution .equalSpacing.

Note: this only guarantees equal distance along the main axis of the stack view (i.e. left and right edges in my example)

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())