使用等宽标签为水平 StackView 添加分隔符视图

Question

I am trying to get fixed width labels to be set in stackview and have a separator in between the label.

However, I have tried many variations but can't get to have it exactly placed.

Below is the code and screenshot I have used, but wanted to know if there is something much better? I tried using compression and resistance but it didn't worked the way I wanted, or maybe I am just not setting it right?

    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

Hey I'd propose to use UIKitPlus library

The trick is to use equal width for all three labels and for that you should link label#2 and label#3 widths to width of label#1. This is because you want a black separator view between them.

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()
        }
    }
}

Because without that separator view you can use StackView's spacing and distribution properties to do the same easily.

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()
        }
    }
}

And visible result is the same

Answer 2

This code is your solution?

StackView can auto resize width, you must be set separator width.

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