Altered column width in horizontal UIStackview

Question

I have a 4 x 1 UILabel matrix in a horizontal stackview I would like columns 1 and 3 to be the same width BUT narrower than columns 2 and 4. I have tried .fillproportionally, and others. I understood that this was possible... however, a solution evades me and Google hasn't turned anything up. Any help or a point in the right direction would be helpful. Thank you. I am not using Storyboards.

Answer 1

You can create your grid:

as you described:

C1-w == 1/3 of C2-w
C3-w == C1-w
C4-w == C2-w

pretty much with that description:

with the stack view .distribution = .fill

Here's a complete example:

class ColumnStackViewController: UIViewController {

    let outerStack: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .vertical
        v.alignment = .fill
        v.distribution = .fill
        v.spacing = 8
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // create "header row" stack view
        let headerRowStack = UIStackView()
        headerRowStack.axis = .horizontal
        headerRowStack.spacing = 4

        // create 4 labels for header row
        let headerC1 = UILabel()
        let headerC2 = UILabel()
        let headerC3 = UILabel()
        let headerC4 = UILabel()

        headerC1.text = "C1"
        headerC2.text = "C2"
        headerC3.text = "C3"
        headerC4.text = "C4"

        [headerC1, headerC2, headerC3, headerC4].forEach { v in
            // give each "header" label a background color, so we can see the frames
            v.backgroundColor = .yellow
            v.textAlignment = .center
            headerRowStack.addArrangedSubview(v)
        }

        NSLayoutConstraint.activate([
            // constrain c1 width to 1/3 of c2 width
            headerC1.widthAnchor.constraint(equalTo: headerC2.widthAnchor, multiplier: 1.0 / 3.0),
            // constrain c3 width equal to c1 width
            headerC3.widthAnchor.constraint(equalTo: headerC1.widthAnchor),
            // constrain c4 width equal to c2 width
            headerC4.widthAnchor.constraint(equalTo: headerC2.widthAnchor),
        ])

        outerStack.addArrangedSubview(headerRowStack)

        let c1Vals = ["HOLDING", "BOOK", "P/L"]
        let c3Vals = ["PAID", "MARKET", "WEIGHT"]

        for i in 0..<c1Vals.count {

            // create a "row" stack view
            let rowStack = UIStackView()
            rowStack.axis = .horizontal
            rowStack.spacing = headerRowStack.spacing

            // add it to outer stack view
            outerStack.addArrangedSubview(rowStack)

            let rowC1 = UILabel()
            let rowC2 = UILabel()
            let rowC3 = UILabel()
            let rowC4 = UILabel()

            rowC1.text = c1Vals[i]
            rowC3.text = c3Vals[i]

            rowC2.text = "row \(i+1) c2 data"
            rowC4.text = "row \(i+1) c4 data"

            [rowC1, rowC2, rowC3, rowC4].forEach { v in
                // give each row-label a border
                v.layer.borderColor = UIColor.red.cgColor
                v.layer.borderWidth = 0.5
                // set the font
                v.font = UIFont.systemFont(ofSize: 14.0, weight: .light)
                // add it to the row stack view
                rowStack.addArrangedSubview(v)
            }

            // constrain each row-label width to the header-row label width
            for (hLabel, rowLabel) in zip([headerC1, headerC2, headerC3, headerC4], [rowC1, rowC2, rowC3, rowC4]) {
                rowLabel.widthAnchor.constraint(equalTo: hLabel.widthAnchor).isActive = true
            }

        }

        view.addSubview(outerStack)

        // respect safe area
        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([
            // constrain outer stack view to Top / Leading / Trailing with 20-pt "padding"
            outerStack.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            outerStack.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            outerStack.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
        ])

    }

}

which produces this result:

Note: you'll have to use a pretty small font to fit that layout on a small device:

Answer 2

This is all i ended needing v1.widthAnchor.constraint(equalTo: v2.widthAnchor, multiplier: 0.5, constant: 0).isActive = true v3.widthAnchor.constraint(equalTo: v1.widthAnchor ).isActive = true v4.widthAnchor.constraint(equalTo: v2.widthAnchor ).isActive = true