为什么我的IBDesignable UIButton子类未在Interface Builder中呈现？

Question

In the screen shot below please note that the DropDownButton (the selected view) is not being live rendered. Also, please note the "Designables Up To Date" in the Identity Inspector. Finally, please note the two break points in the assistant editor: if I execute Editor -> Debug Selected Views then both of these break points are hit.

Here's what It looks like when I run it:

Here's the code:

@IBDesignable
class DropDownButton: UIButton {

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

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

private func initialize() {
    if image(for: .normal) == nil {
        //setImage(#imageLiteral(resourceName: "DropDown"), for: .normal)

        let bundle = Bundle(for: DropDownButton.self)
        if let image = UIImage(named: "DropDown", in: bundle, compatibleWith: nil) {
            setImage(image, for: .normal) // Editor -> Debug Selected Views reaches this statement
        }
    }
    if title(for: .normal) == nil {
        setTitle("DropDown", for: .normal) // Editor -> Debug Selected Views reaches this statement
    }
    addTarget(self, action: #selector(toggle), for: .touchUpInside)
}

override func layoutSubviews() {

    super.layoutSubviews()

    if var imageFrame = imageView?.frame, var labelFrame = titleLabel?.frame {

        labelFrame.origin.x = contentEdgeInsets.left
        imageFrame.origin.x = labelFrame.origin.x + labelFrame.width + 2

        imageView?.frame = imageFrame
        titleLabel?.frame = labelFrame
    }
}

override func setTitle(_ title: String?, for state: UIControlState) {
    super.setTitle(title, for: state)
    sizeToFit()
}

public var collapsed: Bool {
    return imageView?.transform == CGAffineTransform.identity
}

public var expanded: Bool {
    return !collapsed
}

private func collapse() {
    imageView?.transform = CGAffineTransform.identity
}

private func expand() {
    imageView?.transform = CGAffineTransform(rotationAngle: .pi)
}

@objc private func toggle(_: UIButton) {
    if collapsed { expand() } else { collapse() }
}
}

First Edit:

I added the prepareForInterfaceBuilder method as per @DonMag's answer. Doing so made an improvement but there is still something wrong: Interface builder seems confused about the frame. When I select the button only the title is selected, not the image (ie triangle). I added a border; it goes around both the title and the image. Here is a picture:

If I drag the button to a new position then everything moves, title and image.

Also, it surprised me that prepareForInterfaceBuilder made a difference. My understanding of this method it that it allows me to do interface builder only setup such as providing dummy data.

Answer 1

Add this:

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