Измененная ширина столбца в горизонтальном UIStackview

Question

У меня есть матрица UILabel 4 x 1 в горизонтальном виде стека. Я бы хотел, чтобы столбцы 1 и 3 были одинаковой ширины, НО уже столбцов 2 и 4. Я пробовал .fill пропорционально и другие. Я понял, что это возможно ... однако, решение уклоняется от меня, и Google ничего не нашел. Любая помощь или точка в правильном направлении будет полезна. Спасибо. Я не использую раскадровки.

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

    }

}

, который производит это результат:

Примечание: вам придется использовать довольно маленький шрифт, чтобы соответствовать этому макету на маленьком устройстве: