Can you add IBDesignable properties to UIView using categories/extensions?

Question

For those that don't know what I'm talking about, Xcode 6.0 added new features, IBDesignable and IBInspectable.

When you tag your custom views with IBInspectable properties, those properties show up in the Attributes Inspector in IB.

Likewise, when you tag a custom UIView subclass with IBDesignable, Xcode compiles your views and invokes the code to render your view objects right in the Xcode window so you can see what they look like.

The technique for adding IBDesignable and IBInspectable attributes to custom views is pretty much identical in Swift and Objective-C. IBInspectable properties appear in the Interface Builder Attributes Inspector regardless of which language you use to define them.

I've created a category of UIView in Objective-C and an extension of UIView in Swift that promote the borderWidth, cornerRadius, borderColor, and layerBackgroundColor properties of the view's underlying layer as properties of the view. If you change the property, the extension/category does type conversion as required and forwards the change to the layer.

The IBInspectable part works great. I see and can set the new properties in the IB attributes inspector.

I could have sworn that last week, the IBDesignable attribute on my view category/extension was working too, and I could see my custom UIView category rendering in IB with it's changed layer attributes. This week it isn't working.

Was I hallucinating?

Can categories/extensions of existing system classes draw their custom UI in Interface Builder when they are set up with IBDesignable?

Answer 1

Since posting this question I've learned that @IBDesignable does not work for class extensions. You can add the tag, but it has no effect.

Answer 2

I was able to make it work with code below, but the side effect is that some times IB agent in storyboard crashes because it has to refresh too many UI elements. Restarting Xcode fixes problem temporarily until next crash. Maybe that's the problem OP is facing

@IBDesignable
extension UIView
{

    @IBInspectable
    public var cornerRadius: CGFloat
    {
        set (radius) {
            self.layer.cornerRadius = radius
            self.layer.masksToBounds = radius > 0
        }

        get {
            return self.layer.cornerRadius
        }
    }

    @IBInspectable
    public var borderWidth: CGFloat
    {
        set (borderWidth) {
            self.layer.borderWidth = borderWidth
        }

        get {
            return self.layer.borderWidth
        }
    }

    @IBInspectable
    public var borderColor:UIColor?
    {
        set (color) {
            self.layer.borderColor = color?.cgColor
        }

        get {
            if let color = self.layer.borderColor
            {
                return UIColor(cgColor: color)
            } else {
                return nil
            }
        }
    }
}

That's why I am trying to add where clause to reduce subclasses which should extend this functionality: Generic IBDesginables UIView extension

Answer 3

@IBDesignable work with UIView extension only in custom class.For example. UILabel is a default sub-class of UIView. It won't work there, but if you make a custom class called MyUILabel subclassing UILabel. assign the MyUILabel class to the Label your are working on. Then your corner radius in UIView extension will work of this MyUILabel. ( I guess the first week it work for you is because you are dealing with some custom class.)

Answer 4

I've made this work for my use case by having one @IBDesignable UIView that I set as the top view in my view controller. My particular use case is making ClassyKit styling visible in Interface Builder on the default UIKit views without have to subclass just for that and it's working great.

Here's an example of how you could set it up:

// in Interface Builder set the class of your top view controller view to this
@IBDesignable class DesignableView: UIView {
}

extension UIView {
    open override func prepareForInterfaceBuilder() {
        subviews.forEach {
            $0.prepareForInterfaceBuilder()
        }
    }
}

extension UILabel {
// just an example of doing something
    open override func prepareForInterfaceBuilder() {
        layer.cornerRadius = 8
        layer.masksToBounds = true
        backgroundColor = .red
        textColor = .green
    }
}

Answer 5

This code block is working well for me.

import UIKit

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

NOTE It might not work when being imported from a framework. I am trying to find out the reason now.