更改 Storyboard 中的 UIButton BorderColor

Change UIButton BorderColor in Storyboard

我在用户定义的运行时属性中为 UIbutton 设置了 CornerRadius 和 BorderWidth。不添加 layer.borderColor 效果很好,显示黑色边框。但是当添加 layer.borderColor 时不起作用(不显示边框)。

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

并在 .m 文件中添加此代码:

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

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

@end

在属性检查器中勾选 属性

在Swift的情况下,功能不起作用。您需要计算 属性 才能获得所需的结果:

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

对于Swift:

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

解释可能在此处的其他一些答案中丢失:

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

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

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

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

这对我有用。

Swift3,Xcode8.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)
    }
}

}

Swift 4、Xcode 9.2 - 使用 IBDesignableIBInspectable 构建自定义控件并实时预览设计在界面生成器中。

这是 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)
        }
    }
}

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

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

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

有更好的方法来做到这一点!你应该使用@IBInspectable。在此处查看 Mike Woelmer 的博客条目: https://spin.atomicobject.com/2017/07/18/swift-interface-builder/

它实际上在 Xcode 中将功能添加到 IB 中!其他答案中的一些屏幕截图让它看起来好像字段存在于 IB 中,但至少在 Xcode 9 中它们不存在。但是跟随他的 post 将添加它们。

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

当你开始工作时,在查看情节提要时这将不可见,但当应用程序 运行 时会出现,除非你已采取措施使其成为@IBDesigneable。