UIView's border color in Interface builder doesn't work? UIView's border color in Interface builder doesn't work? swift swift

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:

enter image description here

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:

enter image description here

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:

Attributes inspector with the new IBInspectable options

No need to mess around with user defined runtime attributes anymore. And your changes will also show up on the canvas!