为具有等宽标签的水平 StackView 添加分隔符视图

Question

我正在尝试在 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.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

此代码是您的解决方案？

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

Answer 2

嘿，我建议使用 UIKitPlus library

诀窍是对所有三个标签使用相同的宽度，为此您应该 link 标签#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()
        }
    }
}

因为没有分隔视图，您可以使用 StackView 的 spacing 和 distribution 属性轻松地完成相同的操作。

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

和可见结果一样

为具有等宽标签的水平 StackView 添加分隔符视图

Adding Separator View for Horizontal StackView with Equal Width Labels

iphone

ios

swift