更改 Storyboard 中的 UIButton 边框颜色

Question

我在用户定义的运行时属性中为 UIbutton 设置 CornerRadius 和 BorderWidth。在不添加 layer.borderColor 的情况下，它可以正常工作并以黑色显示边框。但是当添加 layer.borderColor 不起作用（不显示边框）。

Answer 1

对于斯威夫特：

斯威夫特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
        }
    }
}

斯威夫特 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

我得到了答案。更改 borderColor 而不是 layer.borderColor:

并将此代码添加到 .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 中的示例代码，位于 ViewController.swift 中

UIKit

的下方：

@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)
        }
    }
}

如果您转到视图的可检查属性，您应该可以直观地找到这些属性，然后编辑属性：

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

在构建时间内运行，瞧！您将看到带有边框的清晰圆形按钮。

Answer 4

解释，可能在其他一些答案中丢失了：

未设置此属性的原因是

layer.borderColor

需要类型为

CGColor

的值。

但是只能通过 Interface Builder 的用户定义运行时属性设置

UIColor

类型！

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

layer.borderColor

属性。

这可以通过在 CALayer 上创建类别、将关键路径设置为唯一的新“属性”(

borderColorFromUIColor

) 并在类别中覆盖相应的设置器 (

setBorderColorFromUIColor:

) 来完成。

Answer 5

这对我有用。

Swift 3、Xcode 8.3

CALayer 扩展：

extension CALayer {
var borderWidthIB: NSNumber {
    get {
        return NSNumber(value: Float(borderWidth))
    }
    set {
        borderWidth = CGFloat(newValue.floatValue)
    }
}
var borderColorIB: UIColor? {
    get {
        return borderColor != nil ? UIColor(cgColor: borderColor!) : nil
    }
    set {
        borderColor = newValue?.cgColor
    }
}
var cornerRadiusIB: NSNumber {
    get {
        return NSNumber(value: Float(cornerRadius))
    }
    set {
        cornerRadius = CGFloat(newValue.floatValue)
    }
}

}

Answer 6

有更好的方法来做到这一点！您应该使用@IBInspectable。在这里查看 Mike Woelmer 的博客文章： https://spin.atomicobject.com/2017/07/18/swift-interface-builder/

它实际上是在 Xcode 中向 IB 添加了该功能！其他答案中的一些屏幕截图使得这些字段看起来好像存在于 IB 中，但至少在 Xcode 9 中并不存在。但按照他的帖子会添加它们。

Answer 7

对于 Swift，该功能不起作用。您需要一个计算属性来实现所需的结果：

extension CALayer {
    var borderColorFromUIColor: UIColor {
        get {
            return UIColor(CGColor: self.borderColor!)
        } set {
            self.borderColor = newValue.CGColor
        }
    }
}

Answer 8

点击此链接并将扩展添加到您的代码中，边框将出现在模拟器或您的手机上，但不会直接出现在故事板中。 在此输入链接描述

Answer 9

您已将半径和宽度的数据值设置为字符串，但正确的做法应该是设置为数字，而不是字符串

当你让它工作时，在查看故事板时这将不可见，但在应用程序运行时将是可见的，除非你已采取措施使其@IBDesigneable。