Добавление вида разделителя для горизонтального стека с метками равной ширины

Question

Я пытаюсь получить метки фиксированной ширины для установки в стеке и иметь разделитель между метками.

Однако я пробовал много вариантов, но не могу точно разместить его.

Ниже приведен код и снимок экрана, которые я использовал, но хотел бы узнать, есть ли что-то намного лучше? Я пытался использовать сжатие и сопротивление, но это не сработало так, как я хотел, или, может быть, я просто неправильно его настраивал?

    let stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .horizontal
    stackView.alignment = .fill // .Leading .FirstBaseline .Center .Trailing .LastBaseline
    stackView.distribution = .fill // .FillEqually .FillProportionally .EqualSpacing .EqualCentering

    let label = UILabel(frame: .zero)
    label.numberOfLines = 0
    label.backgroundColor = .green
    //label.setContentHuggingPriority(UILayoutPriority(999), for: .horizontal)
    //label.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.3).isActive = true
    //label.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 998), for: .horizontal)
    label.text = "Label, Label, Label Label Label Label Label Label Label Label Label"

    let label2 = UILabel(frame: .zero)
    label2.numberOfLines = 0
    label2.backgroundColor = .red
    //label2.setContentHuggingPriority(UILayoutPriority(998), for: .horizontal)
    //label2.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
    label2.text = "Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2"

    let label3 = UILabel(frame: .zero)
    label3.numberOfLines = 0
    label3.backgroundColor = .blue
    //label3.setContentHuggingPriority(UILayoutPriority(998), for: .horizontal)
    //label3.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 750), for: .horizontal)
    label3.text = "Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2"

    let separator = UIView()
    separator.widthAnchor.constraint(equalToConstant: 1).isActive = true
    separator.backgroundColor = .black
    //separator.setContentHuggingPriority(UILayoutPriority(249), for: .horizontal)
    //separator.setContentCompressionResistancePriority(UILayoutPriority(rawValue: 749), for: .horizontal)
    //stackView.addArrangedSubview(separator)
   //separator.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: 0.6).isActive = true

    let separator2 = UIView()
    separator2.widthAnchor.constraint(equalToConstant: 1).isActive = true
    separator2.backgroundColor = .black

    stackView.addArrangedSubview(label)
    label.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.333).isActive = true
    stackView.addArrangedSubview(separator)
    stackView.addArrangedSubview(label2)
    label2.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.333).isActive = true
    stackView.addArrangedSubview(separator2)
    stackView.addArrangedSubview(label3)
    label3.widthAnchor.constraint(equalTo: stackView.widthAnchor, multiplier: 0.333).isActive = true

    separator.heightAnchor.constraint(equalTo: stackView.heightAnchor).isActive = true

    self.view.addSubview(stackView)

    stackView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    stackView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    stackView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30).isActive = true
    stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 30).isActive = true

Answer 1

Эй, я бы предложил использовать библиотеку UIKitPlus

Хитрость заключается в том, чтобы использовать одинаковую ширину для всех трех меток, и для этого нужно связать метку № 2 и ширину метки № 3 с ширина этикетки # 1. Это потому, что вам нужен черный разделитель между ними.

import UIKitPlus

class ThreeLabelsViewController: ViewController {
    var loremIpsumText: String { "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups." }

    lazy var text1 = Text(loremIpsumText)

    override func buildUI() {
        super.buildUI()
        body {
            HStack {
                text1.background(.green).multiline()
                HSpace(10).background(.black)
                Text(loremIpsumText).background(.red).multiline().width(to: text1)
                HSpace(10).background(.black)
                Text(loremIpsumText).background(.blue).multiline().width(to: text1)
            }
            .edgesToSuperview()
        }
    }
}

Потому что без этого разделителя Вы можете использовать свойства spacing и distribution в StackView, чтобы легко сделать то же самое.

import UIKitPlus

class ThreeLabelsViewController: ViewController {
    var loremIpsumText: String { "Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups." }

    override func buildUI() {
        super.buildUI()
        view.backgroundColor = .black
        body {
            HStack {
                Text(loremIpsumText).background(.green).multiline()
                Text(loremIpsumText).background(.red).multiline()
                Text(loremIpsumText).background(.blue).multiline()
            }
            .spacing(10)
            .distribution(.fillEqually)
            .edgesToSuperview()
        }
    }
}

И видимый результат тот же

Answer 2

Этот код является вашим решением?

StackView может автоматически изменять ширину, необходимо установить ширину разделителя.

let stackView = UIStackView()
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.axis = .horizontal
        stackView.alignment = .fill // .Leading .FirstBaseline .Center .Trailing .LastBaseline
        stackView.distribution = .fill // .FillEqually .FillProportionally .EqualSpacing .EqualCentering

        let label = UILabel(frame: .zero)
        label.numberOfLines = 0
        label.backgroundColor = .green
        label.text = "Label, Label, Label Label Label Label Label Label Label Label Label"

        let label2 = UILabel(frame: .zero)
        label2.numberOfLines = 0
        label2.backgroundColor = .red
        label2.text = "Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2"

        let label3 = UILabel(frame: .zero)
        label3.numberOfLines = 0
        label3.backgroundColor = .blue
        label3.text = "Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2 Label2"

        let separatorWidth: CGFloat = 10
        let separator = UIView()
        separator.widthAnchor.constraint(equalToConstant: separatorWidth).isActive = true
        separator.backgroundColor = .black

        let separator2 = UIView()
        separator2.widthAnchor.constraint(equalToConstant: separatorWidth).isActive = true
        separator2.backgroundColor = .black

        stackView.addArrangedSubview(label)
        stackView.addArrangedSubview(separator)
        stackView.addArrangedSubview(label2)
        stackView.addArrangedSubview(separator2)
        stackView.addArrangedSubview(label3)
        label2.widthAnchor.constraint(equalTo: label.widthAnchor).isActive = true
        label3.widthAnchor.constraint(equalTo: label2.widthAnchor).isActive = true

        self.view.addSubview(stackView)

        stackView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
        stackView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
        stackView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 30).isActive = true
        stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 30).isActive = true