Swift UIStackView spacing with nested stack view(s)

Question

Following along with Apple's guide here (I've done it programmatically instead), I've created 3 horizontal stack views nested inside a vertical stack view. To make the text fields align, they're each in a horizontal stack view as well.

Is there a way to scoot over the text field stack views so that I can see the 3-character placeholder text? I've tried .fill, .fillProportionally, and the others as well, but the horizontal stack views end up 50/50 with the labels

I'm new to autolayout, so I'm building this as a learning exercise. There has to be a better way to do this, right?

Something like this (1/4-1/3 space for labels and 2/3-3/4 for text fields).

import UIKit

class RunningPaceCalculatorViewController: UIViewController {

private lazy var timeDistancePaceStackView: UIStackView = {
    let timeStackView = UIStackView.textFieldsStackView("Time")
    let distanceStackView = UIStackView.distanceStackView()
    let paceStackView = UIStackView.textFieldsStackView("Pace")
    return UIStackView.customStackView(.vertical, backgroundColor: .systemTeal, subviews: [timeStackView, distanceStackView, paceStackView])
}()

private lazy var buttonStackView: UIStackView = {
    return UIStackView.buttonStackView()
}()

private lazy var constainerStackView: UIStackView = {
    return UIStackView.customStackView(.vertical, backgroundColor: .gray, subviews: [timeDistancePaceStackView, buttonStackView])
}()

override func viewDidLoad() {
    setUpView()
}

func setUpView() {
    view.backgroundColor = .orange
    view.addSubview(constainerStackView)
    
    NSLayoutConstraint.activate([
        constainerStackView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.55),
        constainerStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        constainerStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        constainerStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
        constainerStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10)
    ])
}
}

private extension UITextField {
static func customTextField(_ placeholder: String) -> UITextField {
    let textField = UITextField()
    textField.placeholder = placeholder
    textField.backgroundColor = .white
    return textField
}
}

private extension UIStackView {
static func customStackView(_ orientation: NSLayoutConstraint.Axis, distribution: UIStackView.Distribution = UIStackView.Distribution.fill, backgroundColor: UIColor, subviews: [UIView]) -> UIStackView {
    let stackView = UIStackView(arrangedSubviews: subviews)
    stackView.axis = orientation
    stackView.distribution = .fillEqually
    stackView.backgroundColor = backgroundColor
    stackView.spacing = 5.0
    stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)
    stackView.isLayoutMarginsRelativeArrangement = true
    stackView.translatesAutoresizingMaskIntoConstraints = false
    return stackView
}

static func textFieldsStackView(_ title: String) -> UIStackView {
    let COLON = ":"
    let label = UILabel.customLabel(title)
    label.setContentHuggingPriority(.defaultHigh + 1, for: .horizontal)
    label.setContentHuggingPriority(.defaultHigh + 1, for: .vertical)
    let paceTextField1 = UITextField.customTextField("Hrs")
    let colonLabel1 = UILabel.customLabel(COLON)
    let paceTextField2 = UITextField.customTextField("Min")
    let colonLabel2 = UILabel.customLabel(COLON)
    let paceTextField3 = UITextField.customTextField("Sec")
    let textFieldContainerStackView = UIStackView.customStackView(.horizontal, backgroundColor: .systemPink, subviews: [paceTextField1, colonLabel1, paceTextField2, colonLabel2, paceTextField3])
    textFieldContainerStackView.setContentHuggingPriority(.defaultLow - 50, for: .horizontal)
    textFieldContainerStackView.setContentCompressionResistancePriority(.defaultLow - 1, for: .horizontal)
    return UIStackView.customStackView(.horizontal, distribution: .fill, backgroundColor: .systemBlue, subviews: [label, textFieldContainerStackView])
}

static func distanceStackView() -> UIStackView {
    let DISTANCE = "Distance"
    let label = UILabel.customLabel(DISTANCE)
    let distanceTextField = UITextField.customTextField(DISTANCE)
    return UIStackView.customStackView(.horizontal, distribution: .equalCentering, backgroundColor: .systemGray, subviews: [label, distanceTextField])
}

static func buttonStackView() -> UIStackView {
    let calculateButton = UIButton.customButton("Calculate")
    let resetButton = UIButton.customButton("Reset")
    return UIStackView.customStackView(.horizontal, backgroundColor: .green, subviews: [calculateButton, resetButton])
}
}

private extension UIButton {
static func customButton(_ title: String) -> UIButton {
    let button = UIButton()
    button.setTitle(title, for: .normal)
    return button
}
}

private extension UILabel {
static func customLabel(_ text: String) -> UILabel {
    let timeLabel = UILabel()
    timeLabel.text = text
    return timeLabel
}
}

arturdev · Answer 1 · 2021-01-22T21:14:05.917

You could add a transparent UIView (so-called spacer view) between the label and the textfieldsStackview and add a width constraint to it. The distribution of the container stackview (which holds all the three views) should be .fill.

[UILabel][UIView][UIStackView]
[UILabel][UIView][UIStackView] 
[UILabel][UIView][UIStackView]

import UIKit

class RunningPaceCalculatorViewController: UIViewController {

    private lazy var timeDistancePaceStackView: UIStackView = {
        let timeStackView = UIStackView.textFieldsStackView("Time")
        let distanceStackView = UIStackView.distanceStackView()
        let paceStackView = UIStackView.textFieldsStackView("Pace")
        return UIStackView.customStackView(.vertical, backgroundColor: .systemTeal, subviews: [timeStackView, distanceStackView, paceStackView])
    }()

    private lazy var buttonStackView: UIStackView = {
        return UIStackView.buttonStackView()
    }()

    private lazy var constainerStackView: UIStackView = {
        return UIStackView.customStackView(.vertical, backgroundColor: .gray, subviews: [timeDistancePaceStackView, buttonStackView])
    }()

    override func viewDidLoad() {
        setUpView()
    }

    func setUpView() {
        view.backgroundColor = .orange
        view.addSubview(constainerStackView)

        NSLayoutConstraint.activate([
            constainerStackView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.55),
            constainerStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            constainerStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            constainerStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
            constainerStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10)
        ])
    }
}

private extension UITextField {
    static func customTextField(_ placeholder: String) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.backgroundColor = .white
        return textField
    }
}

private extension UIStackView {
    static func customStackView(_ orientation: NSLayoutConstraint.Axis, distribution: UIStackView.Distribution = UIStackView.Distribution.fill, backgroundColor: UIColor, subviews: [UIView]) -> UIStackView {
        let stackView = UIStackView(arrangedSubviews: subviews)
        stackView.axis = orientation
        stackView.distribution = .fillEqually
        stackView.backgroundColor = backgroundColor
        stackView.spacing = 5.0
        stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)
        stackView.isLayoutMarginsRelativeArrangement = true
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }

    static func textFieldsStackView(_ title: String) -> UIStackView {
        let COLON = ":"
        let label = UILabel.customLabel(title)
        label.translatesAutoresizingMaskIntoConstraints = false
        label.setContentHuggingPriority(.defaultHigh + 1, for: .horizontal)
        label.setContentHuggingPriority(.defaultHigh + 1, for: .vertical)

        let spacerView = UIView()
        spacerView.backgroundColor = .clear
        spacerView.translatesAutoresizingMaskIntoConstraints = false
        spacerView.widthAnchor.constraint(equalToConstant: 10).isActive = true

        let paceTextField1 = UITextField.customTextField("Hrs")
        paceTextField1.translatesAutoresizingMaskIntoConstraints = false
        let colonLabel1 = UILabel.customLabel(COLON)
        colonLabel1.translatesAutoresizingMaskIntoConstraints = false
        colonLabel1.widthAnchor.constraint(equalToConstant: 20).isActive = true

        let paceTextField2 = UITextField.customTextField("Min")
        paceTextField2.translatesAutoresizingMaskIntoConstraints = false
        let colonLabel2 = UILabel.customLabel(COLON)
        colonLabel2.translatesAutoresizingMaskIntoConstraints = false
        colonLabel2.widthAnchor.constraint(equalToConstant: 20).isActive = true

        let paceTextField3 = UITextField.customTextField("Sec")
        paceTextField3.translatesAutoresizingMaskIntoConstraints = false

        let textFieldContainerStackView = UIStackView.customStackView(.horizontal, backgroundColor: .systemPink, subviews: [paceTextField1, colonLabel1, paceTextField2, colonLabel2, paceTextField3])
        textFieldContainerStackView.setContentHuggingPriority(.defaultLow - 50, for: .horizontal)
        textFieldContainerStackView.setContentCompressionResistancePriority(.defaultLow - 1, for: .horizontal)
        textFieldContainerStackView.distribution = .fill

        paceTextField1.widthAnchor.constraint(equalTo: paceTextField2.widthAnchor).isActive = true
        paceTextField2.widthAnchor.constraint(equalTo: paceTextField3.widthAnchor).isActive = true

        let stackView = UIStackView.customStackView(.horizontal, distribution: .fill, backgroundColor: .systemBlue, subviews: [label, spacerView, textFieldContainerStackView])
        stackView.distribution = .fill
        return stackView
    }

    static func distanceStackView() -> UIStackView {
        let DISTANCE = "Distance"
        let label = UILabel.customLabel(DISTANCE)
        let distanceTextField = UITextField.customTextField(DISTANCE)
        return UIStackView.customStackView(.horizontal, distribution: .equalCentering, backgroundColor: .systemGray, subviews: [label, distanceTextField])
    }

    static func buttonStackView() -> UIStackView {
        let calculateButton = UIButton.customButton("Calculate")
        let resetButton = UIButton.customButton("Reset")
        return UIStackView.customStackView(.horizontal, backgroundColor: .green, subviews: [calculateButton, resetButton])
    }
}

private extension UIButton {
    static func customButton(_ title: String) -> UIButton {
        let button = UIButton()
        button.setTitle(title, for: .normal)
        return button
    }
}

private extension UILabel {
    static func customLabel(_ text: String) -> UILabel {
        let timeLabel = UILabel()
        timeLabel.text = text
        return timeLabel
    }
}

Could you provide an example of this? When I set the distribution to `.fill` and add a spacer view and add a constraint like so `spacerView.widthAnchor.constraint(equalToConstant: 1) or 1,000,000`, it makes a larger gap between the labels and text fields — h.and.h, Jan 22 '21 at 20:33

score 2 · Answer 2 · answered Jan 22 '21 at 19:44

2

It might be easier to have a vertical stack view that contains regular UIViews with AutoLayout constraints, and then have each of those UIViews contain a UILabel and another horizontal UIStackView (or a text view, for the 2n'd row). That way you can easily control the size and spacing of the labels and subviews.

answered Jan 22 '21 at 19:44

Duncan C

128,072
22
173
272

Much easier to do everything in the interface builder – arturdev Jan 22 '21 at 21:33

score -1 · Accepted Answer · answered Jan 22 '21 at 22:04

Creating "columns" can be a little tricky...

Based on your images and description, I'm guessing you want this (or at least close to this) as your end result:

To get that, couple things:

set distribution on your horizontal "row" stack views to .fill
set distribution on your horizontal "field : field : field" stack views to .fill
give each "title" label a widthAnchor equal to a percentage of its stack view using .multiplier (give each "row" the same percentage value)
set HUGGING to .required for the "colon" labels
set "min" and "sec" field width constraints equal to "hrs" field width

Here's your code, modified to produce my screen shot. I tried to change only what was necessary, and I think I included enough comments to make it clear:

class RunningPaceCalculatorViewController: UIViewController {
    
    // percent of overall width for Time/Distance/Pace "column" of labels
    private let labelWidth: CGFloat = 0.33
    
    private lazy var timeDistancePaceStackView: UIStackView = {
        // added titleWidth parameter -- percent of width of stack view
        let timeStackView = UIStackView.textFieldsStackView("Time", titleWidth: labelWidth)
        let distanceStackView = UIStackView.distanceStackView(labelWidth)
        let paceStackView = UIStackView.textFieldsStackView("Pace", titleWidth: labelWidth)
        // include setting distribution parameter
        return UIStackView.customStackView(.vertical, distribution: .fillEqually, backgroundColor: .systemTeal, subviews: [timeStackView, distanceStackView, paceStackView])
    }()
    
    private lazy var buttonStackView: UIStackView = {
        return UIStackView.buttonStackView()
    }()
    
    private lazy var constainerStackView: UIStackView = {
        // include setting distribution parameter
        return UIStackView.customStackView(.vertical, distribution: .fillEqually, backgroundColor: .gray, subviews: [timeDistancePaceStackView, buttonStackView])
    }()
    
    override func viewDidLoad() {
        setUpView()
    }
    
    func setUpView() {
        view.backgroundColor = .orange
        view.addSubview(constainerStackView)
        
        NSLayoutConstraint.activate([
            constainerStackView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.55),
            // we're setting Leading and Trailing, so we don't need centerX
            //constainerStackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            constainerStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            constainerStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
            constainerStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10)
        ])
    }
}

private extension UITextField {
    static func customTextField(_ placeholder: String) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.backgroundColor = .white
        return textField
    }
}

private extension UIStackView {
    static func customStackView(_ orientation: NSLayoutConstraint.Axis, distribution: UIStackView.Distribution = UIStackView.Distribution.fill, backgroundColor: UIColor, subviews: [UIView]) -> UIStackView {
        let stackView = UIStackView(arrangedSubviews: subviews)
        stackView.axis = orientation
        
        // use distribution parameter, not hard-coded .fillEqually
        //stackView.distribution = .fillEqually
        stackView.distribution = distribution
        
        stackView.backgroundColor = backgroundColor
        stackView.spacing = 5.0
        stackView.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 2, leading: 2, bottom: 2, trailing: 2)
        stackView.isLayoutMarginsRelativeArrangement = true
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }
    
    static func textFieldsStackView(_ title: String, titleWidth: CGFloat) -> UIStackView {
        let COLON = ":"
        let label = UILabel.customLabel(title)
        let paceTextField1 = UITextField.customTextField("Hrs")
        let colonLabel1 = UILabel.customLabel(COLON)
        let paceTextField2 = UITextField.customTextField("Min")
        let colonLabel2 = UILabel.customLabel(COLON)
        let paceTextField3 = UITextField.customTextField("Sec")
        // include setting distribution parameter
        let textFieldContainerStackView = UIStackView.customStackView(.horizontal, distribution: .fill, backgroundColor: .systemPink, subviews: [paceTextField1, colonLabel1, paceTextField2, colonLabel2, paceTextField3])
        
        // create the stack view to return
        let retStack = UIStackView.customStackView(.horizontal, distribution: .fill, backgroundColor: .systemBlue, subviews: [label, textFieldContainerStackView])
        // colon labels should HUG their content
        colonLabel1.setContentHuggingPriority(.required, for: .horizontal)
        colonLabel2.setContentHuggingPriority(.required, for: .horizontal)
        NSLayoutConstraint.activate([
            // constrain "title label" width to percentage of stack view width
            label.widthAnchor.constraint(equalTo: retStack.widthAnchor, multiplier: titleWidth),
            // constrain text field widths to each other
            paceTextField2.widthAnchor.constraint(equalTo: paceTextField1.widthAnchor),
            paceTextField3.widthAnchor.constraint(equalTo: paceTextField1.widthAnchor),
        ])
        return retStack
    }
    
    static func distanceStackView(_ titleWidth: CGFloat) -> UIStackView {
        let DISTANCE = "Distance"
        let label = UILabel.customLabel(DISTANCE)
        let distanceTextField = UITextField.customTextField(DISTANCE)

        // create the stack view to return
        let retStack = UIStackView.customStackView(.horizontal, distribution: .fill, backgroundColor: .systemGray, subviews: [label, distanceTextField])
        NSLayoutConstraint.activate([
            // constrain "title label" width to percentage of stack view width
            label.widthAnchor.constraint(equalTo: retStack.widthAnchor, multiplier: titleWidth),
        ])
        return retStack
    }
    
    static func buttonStackView() -> UIStackView {
        let calculateButton = UIButton.customButton("Calculate")
        let resetButton = UIButton.customButton("Reset")
        // include setting distribution parameter
        return UIStackView.customStackView(.horizontal, distribution: .fillEqually, backgroundColor: .green, subviews: [calculateButton, resetButton])
    }
}

private extension UIButton {
    static func customButton(_ title: String) -> UIButton {
        let button = UIButton()
        button.setTitle(title, for: .normal)
        return button
    }
}

private extension UILabel {
    static func customLabel(_ text: String) -> UILabel {
        let timeLabel = UILabel()
        timeLabel.text = text
        return timeLabel
    }
}

Swift UIStackView spacing with nested stack view(s)

3 Answers3