UIView's border color in Interface builder doesn't work?
It's possible to do this, but it's not a built-in feature. This is because the Color
type in the User Defined Runtime Attributes panel creates a UIColor
, but layer.borderColor
holds a CGColorRef
type. Unfortunately, there's no way to assign a CGColorRef
type in Interface Builder.
However, this is possible through a proxy property. See Peter DeWeese's answer to a different question for a possible solution to this problem. His answer defines a category that allows a proxy color to be set through Interface Builder.
You have to create Category for CALayer:
CALayer+UIColor.h
#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>
@interface CALayer(UIColor)
// This assigns a CGColor to borderColor.
@property(nonatomic, assign) UIColor* borderUIColor;
@end
CALayer+UIColor.m
#import "CALayer+UIColor.h"
@implementation CALayer(UIColor)
- (void)setBorderUIColor:(UIColor*)color {
self.borderColor = color.CGColor;
}
- (UIColor*)borderUIColor {
return [UIColor colorWithCGColor:self.borderColor];
}
@end
And then in User Defined Runtime attributes You can use it as it is on image below:
For Swift it is much more simple:
@IBInspectable var borderColor: UIColor? {
didSet {
layer.borderColor = borderColor?.CGColor
layer.borderWidth = 1
}
}
Then in Xcode you can use it like this:
Once you choose sth it is automatically added to your runtime attributes:
Copy and paste this class:
import UIKit
@IBDesignable class BorderView : UIView {
@IBInspectable var borderColor: UIColor = .clear {
didSet {
layer.borderColor = borderColor.cgColor
}
}
@IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
}
}
}
Now in Interface Builder, go to the Identity inspector and set your view as a CustomView class.
After that, check out your Attributes Inspector:
No need to mess around with user defined runtime attributes anymore. And your changes will also show up on the canvas!