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).
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
}
}
}
I got answer. Change borderColor instead of layer.borderColor:
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
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.
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:
).