改变水平UIStackview的列宽。

Question

我有一个4 x 1的UILabel矩阵，在水平堆栈视图中，我想让第1列和第3列的宽度相同，但比第2列和第4列窄。我已经尝试了.fillproportionally和其他方法。我知道这是有可能的......然而，一个解决方案让我逃避，谷歌也没有找到任何东西。任何帮助或在正确的方向点将是有益的。谢谢您的帮助。我没有使用Storyboards。

Answer 1

你可以创建你的网格。

就像你描述的那样

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

就像你说的那样

用堆栈视图 .distribution = .fill

这里有一个完整的例子。

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),
        ])

    }

}

产生了这个结果。

注意：你必须使用一个非常小的字体来适应小设备上的布局。

Answer 2

我只需要这样 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