UIView 调整大小以适应其中的标签

Question

我有一个 UIView，我正在将其附加到我应用程序主页上的堆栈视图中

这是我的class观点：

class MyCustomView: UIView {
    public let leftLabel: UILabel = UILabel(frame: .zero)
    public let rightLabel: UILabel = UILabel(frame: .zero)

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

        addSubview(leftLabel)
        addSubview(rightLabel)

        leftLabel.translatesAutoresizingMaskIntoConstraints = false
        rightLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            leftLabel.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.4),
            leftLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
            leftLabel.topAnchor.constraint(equalTo: topAnchor),
            leftLabel.bottomAnchor.constraint(equalTo: bottomAnchor),

            rightLabel.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.6),
            rightLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
            rightLabel.topAnchor.constraint(equalTo: topAnchor),
            rightLabel.bottomAnchor.constraint(equalTo: bottomAnchor),
        ])
        leftLabel.text = "Short string"
        rightLabel.text = "Short string too"
    }
}

然后我将以下内容附加到我的主堆栈视图： let myCustomView = MyCustomView(frame: .zero) stackView.addArrangedSubview(myCustomView)

这会正确加载我的标签并根据需要调整所有内容的大小。

但是，在我的主 class 中，我正在更新 myCustomView.rightLabel.text = <New Way Longer Text That Takes 2 Lines Instead of One>

文本正在正确更新，但我的 myCustomView 大小没有调整，所以部分文本被截断了

我已尝试按照此处的其他答案进行操作，但其中 none 似乎对我有用。

我是否遗漏了一些小东西以强制调整 customView 的大小以适应其中的标签？

提前致谢

Answer 1

您的代码未显示您将标签中的 .numberOfLines 设置为 0 以允许多行标签。

仅添加这一点，应该可以让您的标签增加高度并扩展您的自定义视图。但是...这也会使两个标签都扩展到最高标签的大小，导致 "shorter" 标签的文本垂直居中（我添加了背景颜色以便于查看框架/边界观点):

如果您将自定义视图的底部限制在 greaterThanOrEqualTo 处每个标签的底部，您可以保留标签 "top-aligned":

您可以运行直接在 Playground 页面中查看此代码的结果：

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport

class MyCustomView: UIView {
    public let leftLabel: UILabel = UILabel(frame: .zero)
    public let rightLabel: UILabel = UILabel(frame: .zero)

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

        addSubview(leftLabel)
        addSubview(rightLabel)

        // background colors so we can see the view frames
        backgroundColor = .cyan

        leftLabel.backgroundColor = .yellow
        rightLabel.backgroundColor = .green

        // we want multi-line labels
        leftLabel.numberOfLines = 0
        rightLabel.numberOfLines = 0

        // use auto-layout
        leftLabel.translatesAutoresizingMaskIntoConstraints = false
        rightLabel.translatesAutoresizingMaskIntoConstraints = false

        NSLayoutConstraint.activate([
            // constrain to top
            leftLabel.topAnchor.constraint(equalTo: topAnchor),
            // constrain to left
            leftLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
            // constrain width = 40%
            leftLabel.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.4),

            // constrain to top
            rightLabel.topAnchor.constraint(equalTo: topAnchor),
            // constrain to right
            rightLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
            // constrain width = 60%
            rightLabel.widthAnchor.constraint(equalTo: widthAnchor, multiplier: 0.6),

            // constrain bottom of view (self) to >= 0 from bottom of leftLabel
            bottomAnchor.constraint(greaterThanOrEqualTo: leftLabel.bottomAnchor, constant: 0.0),
            // constrain bottom of view (self) to >= 0 from bottom of rightLabel
            bottomAnchor.constraint(greaterThanOrEqualTo: rightLabel.bottomAnchor, constant: 0.0),
            ])

        leftLabel.text = "Short string"
        rightLabel.text = "Short string too"
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class MyViewController : UIViewController {

    var theButton: UIButton = {
        let b = UIButton()
        b.setTitle("Tap Me", for: .normal)
        b.translatesAutoresizingMaskIntoConstraints = false
        b.backgroundColor = .red
        return b
    }()

    var theStackView: UIStackView = {
        let v = UIStackView()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.axis = .vertical
        v.spacing = 8
        v.distribution = .equalSpacing
        return v
    }()

    var myView = MyCustomView()

    // on button tap, change the text in the label(s)
    @objc func didTap(_ sender: Any?) -> Void {
        myView.leftLabel.text = "Short string with\nA\nB\nC\nD\nE"
        myView.rightLabel.text = "Short string too\nA\nB"
    }

    override func loadView() {
        let view = UIView()
        self.view = view

        view.backgroundColor = .white

        view.addSubview(theButton)
        // constrain button to Top: 32 and centerX
        NSLayoutConstraint.activate([
            theButton.topAnchor.constraint(equalTo: view.topAnchor, constant: 32.0),
            theButton.centerXAnchor.constraint(equalTo: view.centerXAnchor, constant: 0.0),
            ])

        view.addSubview(theStackView)

        // constrain stack view to Top: 100 and Leading/Trailing" 0
        // no Bottom or Height constraint
        NSLayoutConstraint.activate([
            theStackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100.0),
            theStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 0.0),
            theStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: 0.0),
            ])

        theStackView.addArrangedSubview(myView)

        // add an action for the button tap
        theButton.addTarget(self, action: #selector(didTap(_:)), for: .touchUpInside)

    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

UIView 调整大小以适应其中的标签

UIView resize to fit labels inside of it

resize

constraints

uiview

autolayout

swift