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

Question

I am trying to set up a view's layer properties via IB. Everything works except for color of the border (property layer.borderColor):

I remember running into this problem a year ago and I ended up doing it programatically. And still, I can do this programmatically, but I am curious why the layer.borderColorproperty never works via interface builder. I don't want to import QuartzCore, and then write extra line of code just because of this, seems like an overkill.

Scrummage

"write extra line of code just because of this, seems like an overkill" - your app must be containing at most 10 lines of code then (with the C standard headers included) :P – Psychodiagnosis

@H2CO3 lol...i just don't like writing code that i don't have to – Scrummage

I've made this mistake in the past.. I hope you are aware of it.. otherwise check the first answer from this: #3980751 – Duramen

You can do this with a proxy property! See my answer in #12301756 – Woodcraft

Answer 1

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.

Draggletailed

A computed property is not required. You can find an answer here that shows how to get this to work in a storyboard with layer.borderColor. https://mcmap.net/q/262749/-uiview-39-s-border-color-in-interface-builder-doesn-39-t-work – Nervy

Answer 2

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:

import QuartzCore

extension CALayer {
    @IBInspectable var borderUIColor: UIColor? {
        get {
            guard let borderColor = borderColor else { return nil }
            return UIColor(cgColor: borderColor)
        }
        
        set {
            borderColor = newValue?.cgColor
        }
    }
}

Then in Xcode you can use it like this:

Once you choose something it is automatically added to your runtime attributes.

Yettie

This is the easiest solution and one that I implemented. Downside is you can forget it's there (it's only a few lines!). – Pammy

Why borderUIColor property is assign instead of strong? It's an object type, doesn't this lead to a problem? – Sedgewinn

^ because it doesn't hold the value, it passes it on. – Anders

Actually, getter in your example can be simpler: borderColor.map { UIColor(cgColor: $0) } – Hamforrd

Answer 3

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!

Toothwort

Answer 4

My two cents for porting Bartłomiej Semańczyk's answer to Swift:

Create an extension for CALayer in your view controller:

import UIKit

extension CALayer {
    func borderUIColor() -> UIColor? {
        return borderColor != nil ? UIColor(CGColor: borderColor!) : nil
    }

    func setBorderUIColor(color: UIColor) {
        borderColor = color.CGColor
    }
}

Merca

Hello @Eduardo, then how will I use this in Storyboard? – Lithometeor

Answer 5

Use IBDesignable instead of Runtime Attributes it is more clear.

Put this code in any class and edit the properties direct on the storyboard.

import UIKit

@IBDesignable extension UIView {
    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.CGColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(CGColor:color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Discretional

This saves a major headache when you're applying these to several items. Slick little tidbit. – Paapanen

I'm sorry but this doesn't work. I have just tried it myself. @IBDesignable doesn't work on extensions of UIView. #29907355 – Toothwort

Just tried with some tiny upper/lower case problem with Swift 3.0. Shame that I did not know this before. – Icebox

As of Xcode 9 & Swift 3, this actually does work at runtime. It just doesn't display the changes in the interface builder. – Polypody

Answer 6

Here's a quick way to overcome this. Categories...

@interface UIView (IBAppearance)

@property (nonatomic, strong) UIColor *borderColor;

@end

You don't have to store it, it's just nice so you can query later. The important thing is taking the value and assigning the UIColor's CGColor to the layer.

#import <objc/runtime.h>

#define BORDER_COLOR_KEYPATH @"borderColor"

@implementation UIView (IBAppearance)

- (void)setBorderColor:(UIColor *)borderColor {
    UIColor *bc = objc_getAssociatedObject(self, BORDER_COLOR_KEYPATH);
    if(bc == borderColor) return;
    else {
        objc_setAssociatedObject(self, BORDER_COLOR_KEYPATH, borderColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
        self.layer.borderColor = [borderColor CGColor];
    }
}

- (UIColor *)borderColor {
    return objc_getAssociatedObject(self, BORDER_COLOR_KEYPATH);
}

@end

Of course, in the Interface Builder you're not setting the value on layer.borderColor, rather just on borderColor.

Manutius

i think there is no need to use associated objects because something may happen and your borderColor will be out of sync with layer.borderColor. just return [UIColor colorWithCGColor:self.layer.borderColor] – Pollywog

You're absolutely right @storoj. It's a pattern we use for adding properties and being able to store them using categories. It's misapplied here. – Manutius

Answer 7

In Swift, you can extend the UIButton class and add an @IBInspectable that will enable you to select a color from storyboard and set it's color (with width of 1 which can be changed). Add this at the end of your view controller:

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

Hypnosis

Answer 8

In order to make CALayer KVC-compliant for the property borderColorFromUIColor, simply implement the

layer.borderColorFromUIColor=[UIColor red];

This link have awnser

Authorized

Answer 9

I met the same issue, I worked around it by creating a custom button class:

class UIButtonWithRoundBorder: UIButton {

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.layer.cornerRadius = 6
    self.layer.borderWidth = 1
    self.layer.borderColor = UIColor.whiteColor().CGColor
    self.clipsToBounds = true
}

}

Then in IB, change the type from "UIButton" to "UIButtonWithRoundBorder".

Simple and handy too. :)

Laborer

Answer 10

swift4

extension CALayer {

  open override func setValue(_ value: Any?, forKey key: String) {

    /// If key is borderColor, and the value is the type of a UIColor.
     if key == "borderColor" , let color = value as? UIColor {

        /// After converting UIColor to CGColor, call the system method.
        return super.setValue(color.cgColor, forKey: key)
     }

     super.setValue(value, forKey: key)
   }
}

Croesus

Please provide some explanation to your code & w help to fix the issue – Shoshana

This is actually the working solution! – Alkanet

Adding an extension like this is unreliable at best. Definitely not the way to do it in 2021. – Epicenter

Answer 11

You can set a value for the "borderColor" key in the XIB and use:

extension UIView {

    open override func setValue(_ value: Any?, forKey key: String) {
        guard key == "borderColor", let color = value as? UIColor else {
            super.setValue(value, forKey: key)
            return
        }

        layer.borderColor = color.cgColor
    }
}

Wallenstein

Excellent. This works in Xcode 13.4 with layer.borderColor and not needing to use a computed property. Just needed an import UIKit and it works as written. – Nervy

my only corrections were to change UIView to CGLayer and to change layer.borderColor to self.borderColor. Your answer is the only solution I have seen that answers this question as asked. Wonderful work. – Nervy

Answer 12

Swift 5.2 - Answer of Fede Henze's

@IBDesignable extension UIView {

@IBInspectable var borderColor:UIColor? {
    set {
        layer.borderColor = newValue!.cgColor
    }
    get {
        if let color = layer.borderColor {
            return UIColor(cgColor:color)
        }
        else {
            return nil
        }
    }
}
@IBInspectable var borderWidth:CGFloat {
    set {
        layer.borderWidth = newValue
    }
    get {
        return layer.borderWidth
    }
}
@IBInspectable var cornerRadius:CGFloat {
    set {
        layer.cornerRadius = newValue
        clipsToBounds = newValue > 0
    }
    get {
        return layer.cornerRadius
    }
}
}

Earphone

Answer 13

I think it may be because you have masksToBounds set to YES. I don't think the border is drawn within the bounds of the layer, so it won't be drawn since you're hiding everything outside of its bounds.

Lavernelaverock

Hmmmm...not @ my desktop so will experiment with that, but if I set masksToBounds to NO, then I can't have UIImageView rounded/corner radius :( – Scrummage

Answer 14

borderColor will not work UNLESS the borderWidth property of the layer is set to a value greater than 0.

Swift 3:

button.layer.borderColor = UIColor.white.cgColor
button.layer.borderWidth = 1.0 // Default value is 0, that's why omitting this line will not make the border color show.

Femmine

Your answer has nothing to do with the question. The poster said he knows how to do it programmatically. Also, you can see that he already set the borderWidth to be >1 in his screenshot. He asked about doing this specifically in IB. – Upanchor

Answer 15

You can customise border with 2 methods. First one is this. Just click on the object go to the identity inspector and set the attributes.

Second one is this. make an IBOutlet of required object and put this code in view did load.

@IBOutlet weak var uploadView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        uploadView.layer.cornerRadius = 10
        uploadView.layer.borderWidth = 1.0
        uploadView.layer.borderColor = #colorLiteral(red: 0.08235294118, green: 0.5058823529, blue: 0.9450980392, alpha: 1)
    }

Zipangu

Answer 16

try this in User Defined Runtime attribute:

1. Key Path: layer.borderUIColor
2. type: Color
3. Value: --you prefered color--

Ballonet

You need an extension on CGLayer to do that. You also misspelled "your". – Nervy