Why properties tagged @IBInspectable is not working?

Question

I followed the tutorial here to create an inspectable and designable view. I just want to add border color, border width, and rounded border capability into the UIView.

I have been successful to show the properties. But doesn't matter what I set on the storyboard, the result is still like if they aren't there. There's no border, even though I've set the border to be 2 in width and black in color. It's not showing both on the storyboard and at the run time. I have set the border to be 2 width, but at run time, I print the border width value at didViewLoad, and the result is 0. What could be possibly wrong?

@IBDesignable extension view: UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth;
        }
        set {
            layer.borderWidth = borderWidth;
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(CGColor: layer.borderColor!);
        }
        set {
            layer.borderColor = borderColor?.CGColor
        }
    }

}

And this doesn't work either:

@IBDesignable class BOView: UIView {

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth;
        }
        set {
            layer.borderWidth = borderWidth;
        }
    }

    @IBInspectable var borderColor: UIColor? {
        get {
            return UIColor(CGColor: layer.borderColor!);
        }
        set {
            layer.borderColor = borderColor?.CGColor
        }
    }

}

have you turned the menu `Editor` ➜ `Automatically Refresh Views` on in IB? — holex, Oct 18 '16 at 09:00

Carien van Zyl · Accepted Answer · 2016-10-18T08:59:59.150

5

Try using newValue instead of the real value.

For instance,

@IBInspectable var borderWidth: CGFloat {
    get {
        return layer.borderWidth
    }
    set {
        layer.borderWidth = newValue
    }
}

Chen, I do prefer the way you are doing it, but also note that what you are trying to do is possible from Storyboard directly without using IBDesignable. You can set the layer properties in User Defined Runtime Attributes.

edited Oct 18 '16 at 08:59

answered Oct 18 '16 at 08:49

Carien van Zyl

2,853
22
30

have you checked this answer before posted? does it work? – holex Oct 18 '16 at 08:51
Ooooooooh that's what it is! Yeah, I need to use the `newValue` instead of the variable name. Thanks!!!! But the the IBDesignable still doesn't work though... but this is a big leap!! – Chen Li Yong Oct 18 '16 at 09:26
Wait, the IBDesignable works now!! I don't know why! Maybe I need to close and reopen Xcode. Thanks! – Chen Li Yong Oct 18 '16 at 09:28
Pleasure. Does your extension work? It might be really handy. – Carien van Zyl Oct 18 '16 at 09:30
@CarienvanZyl yes it is! Now there's a whole new world and possibilities opened in front of me lol. Gone the days where I have to implement the controller and run it, just to see what a border looks like. I thought this inspectable and designable thingy is very complicated, so I refrain to learn about it, until now. Oh I couldn't be further from the truth lol. – Chen Li Yong Oct 19 '16 at 02:06

Why properties tagged @IBInspectable is not working?

1 Answers1