当UILabel文本在1行和3行之间变化时如何保持UIView高度一致？

Question

我有一个使用 UIKit 在 Swift 中实现的视图结构，其中 UIView 包含 UILabel。 UILabel 可以包含最少 1 行、最多 3 行的文本。我想确保 UIView 的高度保持一致，即使 UILabel 只有 1 行文本。

详情如下：

UIView 在 UILabel 的所有边缘（顶部、前导、底部和尾随）上都有 12 点约束。 UILabel 应增长以容纳最多 3 行，但 UIView 应保持相同的高度，即使文本只有 1 行。 如何向 UIView 添加约束以确保其高度保持不变，无论 UILabel 是否有 1 行或最多 3 行文本？

任何帮助或指导将不胜感激！

此时，我的代码如下所示。

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create the parent view (container for the UILabel)
        let containerView = UIView()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        containerView.backgroundColor = .lightGray
        view.addSubview(containerView)

        // Create the UILabel
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 3 // Max number of lines
        label.text = "This is a sample text for UILabel"
        label.font = UIFont.systemFont(ofSize: 17)

        containerView.addSubview(label)

        // Add constraints for the containerView (assuming it has 12 points padding to the edges)
        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100)
        ])

        // Add constraints for the UILabel within the containerView
        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 12),
            label.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -12),
            label.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 12),
            label.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -12)
        ])
    }
}

Answer 1

您可以提供一个已经填满 3 行的

label

，也许是模拟文本，例如

lorem ipsum dolor...

。然后为此标签添加边缘约束作为占位符。这些步骤可能是：

let placeholder = UILabe()
placeholder.numberOfLines = 3
placeholder.text = "Lorem ipsum dolor..." //<- a long text here
placeholder.alpha = 0 //<- hide the placeholder

container.addSubView(placeholder)
NSLayoutConstraint.activate([
    //Placeholder's constraints to fill the edge of container with inset = 12
])

//Real content here
let contentLabel = UILabel()
container.addSubView(contentLabel)
NSLayoutConstraint.activate([
    contentLabel.leadingAnchor.constraint(equalTo: placeholder.leadingAnchor),
    contentLabel.trailingAnchor.constraint(equalTo: placeholder.trailingAnchor),
    contentLabel.bottomAnchor.constraint(equalTo: placeholder.bottomAnchor),
    contentLabel.topAnchor.constraint(equalTo: placeholder.topAnchor)
])

输出

Answer 2

计算高度：

1. 对于固定值，您可以设置一个包含三行的 UILabel，并使用 UI 调试或点击按钮即可获取高度。

2. 要动态计算高度，请使用以下具有匹配标签属性的函数

   func calculateLabelHeight(fontSize: CGFloat, lines: CGFloat) -> CGFloat {
    // Get single line height
    let label = UILabel()
    label.text = "Text"
    label.font = UIFont.systemFont(ofSize: fontSize)
    label.sizeToFit()
   
    return label.frame.height * lines
   }
   

获取高度后，包括顶部和底部常量并添加约束

containerView.heightAnchor.constraint(equalToConstant: 85)

设置高度后，您将看到这样的视图

如果要将标签文本顶部对齐，请将标签底部约束更改为 label.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, Constant: -12)

现在视图将如下所示

如果您想为标签添加背景颜色，它只会沿着文本显示背景。

要添加 12 间距的完整背景色，同时将文本保持在顶部，需要添加一个额外的标签容器

    let labelContainer = UIView()
    labelContainer.translatesAutoresizingMaskIntoConstraints = false
    labelContainer.backgroundColor = .white
    containerView.addSubview(labelContainer)
    NSLayoutConstraint.activate([
        labelContainer.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 12),
        labelContainer.trailingAnchor.constraint(equalTo: containerView.trailingAnchor, constant: -12),
        labelContainer.topAnchor.constraint(equalTo: containerView.topAnchor, constant: 12),
        labelContainer.bottomAnchor.constraint(equalTo: containerView.bottomAnchor, constant: -12)
    ])
    
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.numberOfLines = 3 // Max number of lines
    label.text = "This is a sample text for UILabel mg"
    label.font = UIFont.systemFont(ofSize: 17)
    labelContainer.addSubview(label)
    
    NSLayoutConstraint.activate([
        label.leadingAnchor.constraint(equalTo: labelContainer.leadingAnchor),
        label.trailingAnchor.constraint(equalTo: labelContainer.trailingAnchor),
        label.topAnchor.constraint(equalTo: labelContainer.topAnchor),
        label.bottomAnchor.constraint(lessThanOrEqualTo: labelContainer.bottomAnchor)
    ])

现在可以为 labelContainer 和 label 单独添加背景颜色