How can I center UIView in a custom control?

Question

I'm working on a exercise to create a custom control of anything. My idea is to have a UIView in the middle of the screen and a UILabel below it. When you tap on the view a random color will appear with the label changing to its hex value. When trying to create this custom control I'm having a problem trying to center the UIView programmatically. I get to an issue at `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()
    }

I've tried the answers about using self.view but it doesn't work for me so I'm a bit lost.

Answer 1

You're close, but you need to add the label and the view so you can then constrain them relative to the superview...

@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"
    }

}