UIStackView 中的 UILabel

Posted 2023-03-13

【中文标题】UIStackView 中的 UILabel

【英文标题】：UILabel in UIStackView

【发布时间】：2019-05-16 17:07:30

【问题描述】：

虽然我将一个 UILabel 放入 UIStackView 的堆栈中，但一切正常。 但我需要的是在 UILabel 下实际放置一个 UIView 并保持 UILabel 的自身大小。 我只是想知道，有没有一种方法可以在不使用 UITableView 和自定大小的单元格的情况下实现这一目标？ 我用了这段代码

let textLabel = UILabel()
    textLabel.text = "zaciatok TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT koniec"
    textLabel.numberOfLines = 0
    textLabel.sizeToFit()
    textLabel.backgroundColor = .yellow
    let testItemView = UIView()
    testItemView.backgroundColor = .green
    testItemView.addSubview(textLabel)
    mainStackView.addArrangedSubview(testItemView)

但它显示的文本只有一行，这不是我需要的。

我已经用代码尝试了新的建议

mainStackView.distribution = .fill
    let textLabel = UILabel()
    textLabel.text = "zaciatok TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT koniec"
    textLabel.numberOfLines = 0
    textLabel.sizeToFit()
    textLabel.backgroundColor = .yellow
    let testItemView = UIView()

    testItemView.backgroundColor = .green
    testItemView.addSubview(textLabel)

    mainStackView.addArrangedSubview(testItemView)
    testItemView.translatesAutoresizingMaskIntoConstraints = false
    testItemView.heightAnchor.constraint(equalToConstant: 50).isActive = true

我明白了

当我删除 sizeToFit 时，根本没有标签 我对stackview的约束：

【问题讨论】：

是否要从 testItemView 中为标签添加填充？

@RajeshKumarR 是的，但是，填充是不对称的，有 3 个圆角一个没有圆角，所以我相信我需要 UILabel 下的 UIView 来实现这一点。

【参考方案1】：

试试这个

class ViewController: UIViewController 

    override func viewDidLoad() 
        super.viewDidLoad()

        view.backgroundColor = .white

        let mainStackView = UIStackView()
        mainStackView.axis = .vertical
        mainStackView.spacing = 3
        mainStackView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(mainStackView)

        mainStackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(10)-[mainStackView]-(10)-|", options: [], metrics: nil, views: ["mainStackView":mainStackView]))

        let testItemView = UIView()
        testItemView.layer.maskedCorners = [.layerMinXMinYCorner,.layerMinXMaxYCorner,.layerMaxXMinYCorner]
        testItemView.layer.cornerRadius = 15.0
        testItemView.layer.masksToBounds = true
        testItemView.backgroundColor = .green
        testItemView.translatesAutoresizingMaskIntoConstraints = false

        let textLabel = UILabel()
        textLabel.translatesAutoresizingMaskIntoConstraints = false
        textLabel.text = "zaciatok TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT koniec"
        textLabel.numberOfLines = 0
        textLabel.lineBreakMode = .byWordWrapping
        textLabel.backgroundColor = .yellow
        testItemView.addSubview(textLabel)

        testItemView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-(5)-[textLabel(>=30)]-(5)-|", options: [], metrics: nil, views: ["textLabel":textLabel]))
        testItemView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-(5)-[textLabel]-(5)-|", options: [], metrics: nil, views: ["textLabel":textLabel]))

        mainStackView.addArrangedSubview(testItemView)
    

【讨论】：

在 stackview 中为元素添加约束对于具有固有内容大小的项目是不正确的，这里的 stackview 没有任何意义，因为你处理它就好像它是一个普通的 UIView

@Sh_Khan 如果没有约束，我们无法将填充到 greenview 添加到黄色标签

有一个spacing proeprty

@Sh_Khan stackview 的间距属性用于排列的子视图之间。在聊天应用程序中，一个聊天与另一个聊天之间的间隔将是。这里的约束用于在绿色超级视图和黄色子视图标签之间留出空间

@RajeshKumarR 问题更复杂，有大约 10 种不同的图表视图，表格排序，文本等等，好的，我可以制作这么多单元格，但我需要先将其删除然后以特定顺序添加到第二个，这取决于用户，所以当它变得如此复杂时，我认为 StackView 更好

【参考方案2】：

1- 对于要换行的标签内的文本，mainStackView 必须与前导和尾随约束正确挂钩（确保自动调整大小的顶部和底部）

2- 你需要删除

textLabel.sizeToFit()

3- 您添加的视图没有像 label 那样的固有内容大小，因此您需要给它一个静态高度约束

let testItemView = UIView()
testItemView.translatesAutoresizingMaskIntoConstraints = false
testItemView.heightAnchor.constraint(equalToConstant: 50).isActive = true

4-设置

mainStackView.distribution = .fill

【讨论】：

我认为删除 sizeToFit() 不是最好的主意，请参阅我更新的问题。

问题中的约束是最新的