IBDesignable UIButton Subclass

Question

I am trying to implement a simple UIButton subclass that is IBDesignable. I want the ability to set a color for each state of the control from Interface Builder. I know this is possible with the IBInspectable keyword. I am having problems with IB crashing when using KVO on the state property. The IBDesignable debugger crashes on deinit. Does anyone know how I can work with KVO and IBDesignable together?

@IBDesignable
class UIButtonActionButton: UIButton {

    @IBInspectable var defaultColour: UIColor = UIColor.blueColor() {
        didSet {
            self.setNeedsDisplay()
        } 
    }

    @IBInspectable var selectedColour: UIColor = UIColor.blueColor()

    @IBInspectable var disabledColour: UIColor = UIColor.grayColor()

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self._setup()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self._setup()
    }


    private func _setup(){
        self.addObserver(self, forKeyPath: "state", options: NSKeyValueObservingOptions.New, context: nil)
        self.layer.cornerRadius = 5.0
        self.layer.masksToBounds = true
    }

    override func observeValueForKeyPath(keyPath: String, ofObject object: AnyObject, change: [NSObject : AnyObject], context: UnsafeMutablePointer<Void>) {
        self.setNeedsDisplay()
    }

    override func drawRect(rect: CGRect) {
        super.drawRect(rect)
        let context = UIGraphicsGetCurrentContext()

        if self.highlighted {
            CGContextSetFillColorWithColor(context, selectedColour.CGColor)
            CGContextFillRect(context, self.bounds)
        } else if self.state == UIControlState.Disabled {
            CGContextSetFillColorWithColor(context, disabledColour.CGColor)
            CGContextFillRect(context, self.bounds)
        } else {
            CGContextSetFillColorWithColor(context, defaultColour.CGColor)
            CGContextFillRect(context, self.bounds)
        }
    }

    deinit {
        self.removeObserver(self, forKeyPath: "state", context: nil)
    }

}

Centaurus

Answer 1

I was having something similar the problem was the init() method which caused the crash after refactoring my code it works like a charm. Maybe it will help you:

#if !TARGET_INTERFACE_BUILDER
required init(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self._setup()
}
#endif

override func prepareForInterfaceBuilder() {
    self._setup()
}

Keli

Thanks for tip Daniel. I tried the above and now its complaining that my IBInspectable properties are not key-value coding compliant. So I've resorted to using the macro for adding / removing the observer only during runtime. Accepting this answer for the MACRO tip. – Centaurus

Answer 2

For Xcode 7.2 common code for @IBDesignable UIButton Subclass looks like this:

import UIKit

@IBDesignable class MyButton: UIButton {

    //this init fires usually called, when storyboards UI objects created:
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setupViews()
    }

    //This method is called during programmatic initialisation
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }


    func setupViews() {
        //your common setup goes here
    }

    //required method to present changes in IB
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        self.setupViews()
    }
}

Knew

I've noticed that if you remove the setupViews() call in init(frame:), the setup still works in IB and the app. Is there a reason we need to call the setup from that init? – Epanorthosis

@PaulVanWieren interesting. As I remember, it doesn't work. Set breakpoint inside setupViews() and check, who is calling it :) – Knew

@PaulVanWieren - The init(frame:) method is used if creating views in code. Views created in storyboards and nibs use the init(coder:) method. Not strictly required to have the init(frame:) method if you aren't ever going to be creating views in code, but it is usually included for completeness. – Oppressive

SAVED ME A LOT OF TIME AND STRUGGLING – Three

Notice that if you use any @IBInspectable you'll get them set in runtime only in "awakeFromNib" so you need to add this too: override func awakeFromNib() { super.awakeFromNib() setupViews() }. and maybe you need to remove setupViews() from init(withDecoder)??? – Three