Reputation: 5831

Change UIButton BorderColor in Storyboard

I Set CornerRadius and BorderWidth for UIbutton in User Defined Runtime Attributes. Without adding layer.borderColor it works Well and Display border in black color. But when add layer.borderColor does not work(does not show border).

enter image description here

Upvotes: 88

Answers (8)

Alex Zavatone

Reputation: 4323

You have set the data values for the radius and the width set to be a string, but it should properly be to be set to a number, not a string

When you get it working, this will not be visible while looking at the storyboard, but will be when the app is running unless you have taken steps to make it @IBDesigneable.

Upvotes: -1

Mohamed Jaleel Nazir

Reputation: 5831

I got answer. Change borderColor instead of layer.borderColor:

Xcode snippet

and add this code in .m file:

#import <QuartzCore/QuartzCore.h>
@implementation CALayer (Additions)

- (void)setBorderColorFromUIColor:(UIColor *)color
{
    self.borderColor = color.CGColor;
}

@end

Tick properties in Attribute Inspector

Attribute Inspector

Upvotes: 98

Jovan Stankovic

Reputation: 4751

This works for me.

Swift 3, Xcode 8.3

CALayer extension:

extension CALayer {
var borderWidthIB: NSNumber {
    get {
        return NSNumber(value: Float(borderWidth))
    }
    set {
        borderWidth = CGFloat(newValue.floatValue)
    }
}
var borderColorIB: UIColor? {
    get {
        return borderColor != nil ? UIColor(cgColor: borderColor!) : nil
    }
    set {
        borderColor = newValue?.cgColor
    }
}
var cornerRadiusIB: NSNumber {
    get {
        return NSNumber(value: Float(cornerRadius))
    }
    set {
        cornerRadius = CGFloat(newValue.floatValue)
    }
}

}

Upvotes: 2

cdeerinck

Reputation: 796

There is a much better way to do this! You should use @IBInspectable. Check out Mike Woelmer's blog entry here: https://spin.atomicobject.com/2017/07/18/swift-interface-builder/

It actually adds the feature to IB in Xcode! Some of the screenshots in other answers make it appear as though the fields exist in IB, but at least in Xcode 9 they do not. But following his post will add them.

Upvotes: 0

Cons Bulaquena

Reputation: 2113

Swift 4, Xcode 9.2 - Use IBDesignable and IBInspectable to build custom controls and live preview the design in Interface Builder.

Here is a sample code in Swift, place just below the UIKit in ViewController.swift:

@IBDesignable extension UIButton {

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

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

    @IBInspectable var borderColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            layer.borderColor = uiColor.cgColor
        }
        get {
            guard let color = layer.borderColor else { return nil }
            return UIColor(cgColor: color)
        }
    }
}

If you go to the Attributes inspectable of the view, you should find these properties visually, edit the properties:

The changes are also reflected in User Defined Runtime Attributes:

Run in build time and Voila! you will see your clear rounded button with border.

Upvotes: 60

pkamb

Reputation: 35052

The explanation, perhaps being lost in some of the other answers here:

The reason that this property is not being set is that layer.borderColor needs a value with type CGColor.

But only UIColor types can be set via Interface Builder's User Defined Runtime Attributes!

So, you must set a UIColor to a proxy property via Interface Builder, then intercept that call to set the equivalent CGColor to the layer.borderColor property.

This can be accomplished by creating a Category on CALayer, setting the Key Path to a unique new "property" (borderColorFromUIColor), and in the category overriding the corresponding setter (setBorderColorFromUIColor:).

Upvotes: 9

Mohamed Jaleel Nazir

Reputation: 5831

For Swift:

Swift 3:

extension 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 = newValue
        }
    }

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

Swift 2.2:

extension 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 = newValue
        }
    }

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

Upvotes: 163

Furqan Khan

Reputation: 505

In case of Swift, function doesn't work. You'll need a computed property to achieve the desired result:

extension CALayer {
    var borderColorFromUIColor: UIColor {
        get {
            return UIColor(CGColor: self.borderColor!)
        } set {
            self.borderColor = newValue.CGColor
        }
    }
}

Upvotes: 0

Change UIButton BorderColor in Storyboard

Answers (8)

Related Questions