使用多行 UILabel 自动调整自定义视图的大小

Question

我想创建一些可重用的自定义 UI 组件以供我使用，例如以下包含两个标签的 UIView。根据内容的不同，标签可能是多行的，我为上下边距提供了一些限制。这些视图主要使用 Interface Builder 或以编程方式添加到我的布局中 UIStackViews 内。这里的问题是，视图的高度在运行时计算不正确，会在每个视图的底部截掉一部分，尤其是当有多行时。

显然存在一些我还没有弄清楚的概念性问题，可能正确地处理这个双标签示例将有助于我更好地理解。

我注释掉了我认为必要的整体高度限制，但没有注释我只看到第二个标签的顶行。

import UIKit

@IBDesignable class TwoLabelView: UIView {

    var topMargin: CGFloat = 11.0
    var verticalSpacing: CGFloat = 3.0
    var bottomMargin: CGFloat = 8.0

    @IBInspectable var firstLabelText: String = "" { didSet { updateView() } }
    @IBInspectable var secondLabelText: String = "" { didSet { updateView() } }

    var viewHeight: CGFloat = 0.0

    var firstLabel: UILabel!
    var secondLabel: UILabel!

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpView()
    }

    required public init?(coder: NSCoder) {
        super.init(coder:coder)
        setUpView()
    }

    func setUpView() {

        firstLabel = UILabel()
        firstLabel.font = UIFont.systemFont(ofSize: 18.0, weight: UIFontWeightBold)
        firstLabel.numberOfLines = 3
        firstLabel.lineBreakMode = NSLineBreakMode.byWordWrapping

        secondLabel = UILabel()
        secondLabel.font = UIFont.systemFont(ofSize: 13.0, weight: UIFontWeightRegular)
        secondLabel.numberOfLines = 20
        secondLabel.lineBreakMode = NSLineBreakMode.byWordWrapping

        addSubview(firstLabel)
        addSubview(secondLabel)

        updateView()
    }

    func updateView() {

        firstLabel.text = firstLabelText
        secondLabel.text = secondLabelText

        firstLabel.sizeToFit()
        secondLabel.sizeToFit()
        viewHeight = getHeight()

        setNeedsUpdateConstraints()
    }

    override func updateConstraints() {

        translatesAutoresizingMaskIntoConstraints = false
        firstLabel .translatesAutoresizingMaskIntoConstraints = false
        secondLabel.translatesAutoresizingMaskIntoConstraints = false
        removeConstraints(constraints)

        if self.isHidden == false {
            self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1, constant: topMargin))
            self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1, constant: 0.0))
            self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1, constant: 0.0))
            self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .top, relatedBy: .equal, toItem: firstLabel, attribute: .bottom, multiplier: 1, constant: verticalSpacing))
            self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1, constant: 0.0))
            self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1, constant: 0.0))
            self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: bottomMargin))
            //self.addConstraint(NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: viewHeight))
        }

        super.updateConstraints()
    }

    func getHeight() -> CGFloat {

        return topMargin
            + firstLabel.frame.height
            + verticalSpacing
            + secondLabel.frame.height
            + bottomMargin
    }

    override open var intrinsicContentSize : CGSize {

        return CGSize(width: UIViewNoIntrinsicMetric, height: getHeight())
    }
}

Answer 1

几件事...

首先，您不需要不断地重新创建约束。设置标签时创建一次。

其次，您想使用约束来让自动布局控制大小 - 这就是它们的用途。

第三，自动调整多行标签的大小可能很棘手。好吧，一个更好的词可能是confounding！对于自动布局来呈现标签中的文本并调整其大小，它必须以宽度开始开始。不幸的是，常见的情况是标签的宽度由其他东西控制 - 它的超级视图、堆栈视图等。但是......您还希望标签的宽度可以控制或 “推出侧面” em> 的 superview。

因此，您需要确保标签具有preferredMaxLayoutWidth。当然，您不想硬编码 - 违背了创建灵活控件的目的。

无论如何，根据我的经验，诀窍是强制自动布局以运行几次传递...并将preferredMaxLayoutWidth sorta "设置在中间"的过程。

试试这个，看看你是否得到你想要的：

//
//  TwoLabelView.swift
//
//  Created by Don Mag on 8/2/17.
//

class FixAutoLabel: UILabel {

    override func layoutSubviews() {
        super.layoutSubviews()
        if(self.preferredMaxLayoutWidth != self.bounds.size.width) {
            self.preferredMaxLayoutWidth = self.bounds.size.width
        }
    }

}

@IBDesignable class TwoLabelView: UIView {

    var topMargin: CGFloat = 11.0
    var verticalSpacing: CGFloat = 3.0
    var bottomMargin: CGFloat = 8.0

    @IBInspectable var firstLabelText: String = "" { didSet { updateView() } }
    @IBInspectable var secondLabelText: String = "" { didSet { updateView() } }

    var firstLabel: FixAutoLabel!
    var secondLabel: FixAutoLabel!

    override init(frame: CGRect) {
        super.init(frame: frame)
        setUpView()
    }

    required public init?(coder: NSCoder) {
        super.init(coder:coder)
        setUpView()
    }

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setUpView()
    }

    func setUpView() {

        firstLabel = FixAutoLabel()
        firstLabel.font = UIFont.systemFont(ofSize: 18.0, weight: UIFontWeightBold)
        firstLabel.numberOfLines = 3
        firstLabel.lineBreakMode = NSLineBreakMode.byTruncatingTail

        secondLabel = FixAutoLabel()
        secondLabel.font = UIFont.systemFont(ofSize: 13.0, weight: UIFontWeightRegular)
        secondLabel.numberOfLines = 20
        secondLabel.lineBreakMode = NSLineBreakMode.byTruncatingTail

        addSubview(firstLabel)
        addSubview(secondLabel)

        // we're going to set the constraints
        firstLabel .translatesAutoresizingMaskIntoConstraints = false
        secondLabel.translatesAutoresizingMaskIntoConstraints = false

        // pin both labels' left-edges to left-edge of self
        firstLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
        secondLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true

        // pin both labels' right-edges to right-edge of self
        firstLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
        secondLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true

        // pin firstLabel to the top of self + topMargin (padding)
        firstLabel.topAnchor.constraint(equalTo: topAnchor, constant: topMargin).isActive = true

        // pin top of secondLabel to bottom of firstLabel + verticalSpacing
        secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: verticalSpacing).isActive = true

        // pin bottom of self to bottom of secondLabel + bottomMargin (padding)
        bottomAnchor.constraint(equalTo: secondLabel.bottomAnchor, constant: bottomMargin).isActive = true

        // colors are just for debugging so we can see the frames of the labels
        firstLabel.backgroundColor = .cyan
        secondLabel.backgroundColor = .green

        // call common "refresh" func
        updateView()
    }

    func updateView() {

        firstLabel.preferredMaxLayoutWidth = self.bounds.width
        secondLabel.preferredMaxLayoutWidth = self.bounds.width

        firstLabel.text = firstLabelText
        secondLabel.text = secondLabelText

        firstLabel.sizeToFit()
        secondLabel.sizeToFit()

        setNeedsUpdateConstraints()

    }

    override open var intrinsicContentSize : CGSize {
        // just has to have SOME intrinsic content size defined
        // this will be overridden by the constraints
        return CGSize(width: 1, height: 1)
    }
}