如何创建一个带有子视图的自定义 UIView，以编程方式使用 AutoLayout 设置其大小/位置？

Question

我想创建一个自定义 UIView，例如 TestLabelView，其中包含一个边距为 16px 的标签。

它看起来像这样：

这是我尝试创建此自定义 UIView 并在视图控制器中实例化它的方法：

TestLabelView

class TestLabelView: UIView {
    private var label = UILabel()
    
    var text: String = "" { didSet { updateUI() } }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        internalInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        internalInit()
    }
    
    private func internalInit() {
        backgroundColor = .red
        label.numberOfLines = 0
        translatesAutoresizingMaskIntoConstraints = false
        addSubview(label)
    }
    
    private func updateUI() {
        label.text = text
        NSLayoutConstraint(item: label,
                           attribute: .leading,
                           relatedBy: .equal,
                           toItem: self,
                           attribute: .leading,
                           multiplier: 1,
                           constant: 24).isActive = true
        NSLayoutConstraint(item: self,
                           attribute: .trailing,
                           relatedBy: .equal,
                           toItem: label,
                           attribute: .trailing,
                           multiplier: 1,
                           constant: 24).isActive = true
        NSLayoutConstraint(item: label,
                           attribute: .top,
                           relatedBy: .equal,
                           toItem: self,
                           attribute: .top,
                           multiplier: 1,
                           constant: 24).isActive = true
        NSLayoutConstraint(item: self,
                           attribute: .bottom,
                           relatedBy: .equal,
                           toItem: label,
                           attribute: .bottom,
                           multiplier: 1,
                           constant: 24).isActive = true
        setNeedsUpdateConstraints()
    }
}

ViewController

class ViewController: UIViewController {
    @IBOutlet weak var testLabelView: TestLabelView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        testLabelView?.text = "This is a test view with a test label, contained in multiple lines"
    }
}

在情节提要中

我设置了占位符固有大小以消除故事板错误，并且底部边距大于或等于 24px，所以视图高度应根据内容大小设置

但是，通过这样做，我看不到标签出现。我做错了什么？

感谢您的帮助

Answer 1

您可以在 TestLabelView 视图中尝试此代码

class TestLabelView: UIView {
    private var label : UILabel = {
        let l = UILabel()
        l.translatesAutoresizingMaskIntoConstraints = false
        l.numberOfLines = 0
        return l
    }()
    
    var text: String = "" { didSet { self.label.text = self.text } }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        internalInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        internalInit()
    }
    
    private func internalInit() {
        backgroundColor = .red
        translatesAutoresizingMaskIntoConstraints = false
        addSubview(label)
        setConstraints()
    }
    
    private func setConstraints() {
        NSLayoutConstraint.activate([
            self.label.topAnchor.constraint(equalTo: self.topAnchor, constant: 16),
            self.label.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 16),
            self.label.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -16),
            self.label.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -16),
        ])
    }
}