如何在自定义控件中居中放置UIView？

Question

我正在做一个练习来创建任何东西的自定义控件。 我的想法是在屏幕中间有一个UIView，在其下面有一个UILabel。 当您点击视图时，将出现随机颜色，标签变为其十六进制值。 尝试创建此自定义控件时，尝试以编程方式居中放置UIView时遇到问题。 我在`colorBox.center〜遇到问题了

import UIKit

@IBDesignable
class Color: UIView {
    private lazy var label : UILabel = {
        let label = UILabel()
        label.backgroundColor = UIColor.clear
        label.translatesAutoresizingMaskIntoConstraints = false
        label.heightAnchor.constraint(equalToConstant: 25.0).isActive = true
        label.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        label.font = .systemFont(ofSize: 15.0, weight: UIFontWeightRegular)
        return label
    }()

    private lazy var colorGen : UIView = {
        let colorBox = UIView()
        colorBox.backgroundColor = UIColor.black
        colorBox.heightAnchor.constraint(equalToConstant: 100.0).isActive = true
        colorBox.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        colorBox.centerXAnchor.constraint(equalTo: colorBox.frame.size.width /2)

    }()

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

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

我已经尝试过使用self.view的答案，但是它对我不起作用，所以我有点迷路。

Answer 1

您已经接近了，但是您需要添加标签和视图，以便可以相对于超级视图约束它们。

@IBDesignable
class ColorView: UIView {

    private lazy var colorLabel : UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.backgroundColor = UIColor.clear
        label.heightAnchor.constraint(equalToConstant: 25.0).isActive = true
        label.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        label.font = .systemFont(ofSize: 15.0, weight: UIFontWeightRegular)
        return label
    }()

    private lazy var colorGen : UIView = {
        let colorBox = UIView()
        colorBox.translatesAutoresizingMaskIntoConstraints = false
        colorBox.backgroundColor = UIColor.cyan
        colorBox.heightAnchor.constraint(equalToConstant: 100.0).isActive = true
        colorBox.widthAnchor.constraint(equalToConstant: 100.0).isActive = true
        return colorBox
    }()

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

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

    func commonSetup() -> Void {
        self.addSubview(colorGen)
        self.addSubview(colorLabel)

        colorGen.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0.0).isActive = true
        colorGen.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0.0).isActive = true
        colorGen.topAnchor.constraint(equalTo: self.topAnchor, constant: 0.0).isActive = true

        colorLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 0.0).isActive = true
        colorLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant: 0.0).isActive = true
        colorLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0.0).isActive = true

        colorLabel.topAnchor.constraint(equalTo: colorGen.bottomAnchor, constant: 0.0).isActive = true

        colorLabel.text = "the label"
    }

}