在故事板中更改UIButton BorderColor

Question

我在用户定义的运行时属性中为UI按钮设置了CornerRadius和BorderWidth.没有添加layer.borderColor它可以正常工作并显示黑色的边框.但是当添加layer.borderColor不起作用时(不显示边框).

Answer 1

对于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
        }
    }
}

Answer 2

我得到了答案更改 layer.borderColor 到 layer.borderColorFromUIColor

并在.m文件中添加代码

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

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

@end

在"属性"检查器中勾选属性

Answer 3

Swift 4,Xcode 9.2 - 使用IBDesignable和IBInspectable构建自定义控件并在Interface Builder中实时预览设计.

这是Swift中的示例代码,UIKit位于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)
        }
    }
}

如果转到视图的Attributes inspectable,您应该可以直观地找到这些属性,编辑属性:

这些更改也反映在用户定义的运行时属性中:

运行在构建时间和Voila!你会看到带边框的透明圆形按钮.

Answer 4

这个解释可能在其他一些答案中丢失了:

未设置此属性的原因是layer.borderColor需要具有类型的值CGColor.

但只能UIColor通过Interface Builder的用户定义的运行时属性设置类型!

因此,您必须通过Interface Builder将UIColor设置为代理属性,然后拦截该调用以将等效的CGColor设置为layer.borderColor属性.

这可以通过在CALayer上创建一个Category,将Key Path设置为唯一的新"property"(borderColorFromUIColor),并在覆盖相应setter(setBorderColorFromUIColor:)的类别中完成.