在故事板中更改UIButton BorderColor

时间:2015-03-04 12:25:08

标签: ios colors uibutton storyboard

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

enter image description here

8 个答案:

答案 0 :(得分:146)

对于Swift:

enter image description here

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

答案 1 :(得分:77)

我将答案更改 layer.borderColor 添加到 的 layer.borderColorFromUIColor

enter image description here

并在.m文件中添加代码

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

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

@end
“属性检查器”中的

勾选属性

Attribute Inspector

答案 2 :(得分:39)

Swift 4,Xcode 9.2 - 使用IBDesignableIBInspectable构建自定义控件,并在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)
        }
    }
}

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

enter image description here

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

enter image description here

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

enter image description here

答案 3 :(得分:8)

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

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

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

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

这可以通过在CALayer上创建一个类别,将关键路径设置为唯一的新“属性”(borderColorFromUIColor),以及覆盖相应的setter(setBorderColorFromUIColor:)的类别来实现。< / p>

答案 4 :(得分:1)

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

它实际上在Xcode中为IB添加了这个功能!其他答案中的一些屏幕截图使得它看起来好像IB中存在字段,但至少在Xcode 9中它们不存在。但是在他的帖子之后会添加它们。

答案 5 :(得分:0)

在Swift的情况下,功能不起作用。您需要一个计算属性来实现所需的结果:

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

答案 6 :(得分:-1)

这适合我。

Swift 3,Xcode 8.3

Identity inspector (UIButton in this case

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

}

答案 7 :(得分:-1)

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

当您让它工作时,在查看故事板时这将不可见,但会在应用运行时可见,除非您已采取措施使其@IBDesigneable。