在Storyboard中更改UIButton的边框颜色

Question

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

- Mohamed Jaleel Nazir

Answer 1

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

- Mohamed Jaleel Nazir

---

你好，我在Objective-C中创建了一个CustomeView类，但它在我的Storyboard中没有显示。请帮忙。 - Pooja Srivastava

非常感谢这个！ :) - Vijay V S

感谢，棒极了，完美 - Atef

很整洁，但是XCode（版本8.3.3（8E3004b））在预览中不显示结果，这是正确的吗？没有其他方法可以更改吗（除了创建自定义视图）？ - Konstantin Berkov

我知道这个答案很老（而且非常好），但我需要问一下，这会影响编译时间或者像这样的东西吗？将这个添加到所有的UIView？ - Vertig0

Answer 2

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

并在 .m 文件中添加以下代码：

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

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

@end

属性检查器中的 "Tick" 属性

- Mohamed Jaleel Nazir

---

@jithin 我把它写成了Swift扩展，这是代码：extension CALayer { func setBorderColorFromUIColor(color: UIColor) { self.borderColor = color.CGColor } } - Guy

骗局奏效了。部分地。我明确指定了红色，怎么会出现黑色边框颜色？！！！有任何想法吗？有人？ - static0886

@static0886：这是因为您应用的颜色未设置为边框。据我理解，我们无法从Storyboard中设置边框颜色，因为此属性在运行时不会反映在UI组件中。默认情况下，它是黑色的。如果您想尝试，请通过从属性中删除颜色属性来进行。 - Javeed

对于Swift，您可以将其设置为： self.button.layer.borderColor = <UIColor.CGColor> - Sam

那个 layer.borderColorFromUIColor 在我的故事板中起作用了。谢谢。 - Ramakrishna

你好，我在Objective-C中创建了一个CustomeView类，但它没有显示在我的Storyboard中，请帮帮我。 - Pooja Srivastava

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

如果您进入视图的属性检查器，您应该可以在其中找到这些属性并进行可视化编辑：

更改也将反映在“用户定义的运行时属性”中：

在构建时运行，Voila！你会看到有边框和圆角的按钮。

- Cons Bulaquena

---

这帮助我在Storyboard中实现它。你的答案非常清晰易懂，易于实现。 - R. Mohan

这是针对该问题最精确的答案，并且附有清晰的示例解释。 - SeaWarrior404

如果您能为Objective-C添加，我们将不胜感激。 - Mihir Oza

这是我迄今为止发现的最好的答案。 - Nehal Jaisalmeria

Answer 4

解释可能在其他答案中有所遗漏： layer.borderColor未被设置的原因是需要使用类型为CGColor的值。

但是，只有通过Interface Builder的用户定义的运行时属性才能设置UIColor类型！

因此，您必须通过Interface Builder将UIColor设置为代理属性，然后拦截调用以将相当于layer.borderColor属性的CGColor设置为它。

这可以通过在CALayer上创建一个类别来实现，将关键路径设置为唯一的新“属性”(borderColorFromUIColor)，并在类别中覆盖相应的setter (setBorderColorFromUIColor:)来完成。

- pkamb

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

}

- Jovan Stankovic

Answer 6

有一种更好的方法来实现这个！您应该使用@IBInspectable。在Mike Woelmer的博客文章中查看此功能： https://spin.atomicobject.com/2017/07/18/swift-interface-builder/

它实际上将该功能添加到Xcode的IB中！其他答案中的一些截图似乎表明这些字段存在于IB中，但至少在Xcode 9中它们不存在。但是遵循他的帖子将会添加它们。

- cdeerinck

---

我尝试了这种方法，它让Xcode变得非常缓慢。你们也遇到这种情况吗？ - Meep

Answer 7

在Swift中，函数无法工作。您需要使用计算属性来实现所需的结果：

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

- Furqan Khan

Answer 8

你将半径和宽度的数据值设置为字符串，但实际上应该设置为数字，而不是字符串。

当你使其正常工作时，在查看故事板时这是不可见的，但在应用程序运行时会显示出来，除非你已经采取措施使其成为@IBDesigneable。

- Alex Zavatone