在情节提要中更改 UIButton BorderColor

Posted 2023-02-23

【中文标题】在情节提要中更改 UIButton BorderColor

【英文标题】：Change UIButton BorderColor in Storyboard

【发布时间】：2015-05-05 10:36:40

【问题描述】：

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

【参考方案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
        
    

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

【讨论】：

你好，我正在目标 c 中创建 CustomeView 类，但它没有显示在我的故事板中，请帮助我。

非常感谢！ :)

谢谢，太棒了，完美

整洁，但是 XCode(Version 8.3.3 (8E3004b)) 没有在预览中显示结果，这是正确的并且没有办法改变（除了创建自定义视图）？

这是最优雅的解决方案！干得好！

【参考方案2】：

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

并将此代码添加到 .m 文件中：

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

- (void)setBorderColorFromUIColor:(UIColor *)color

    self.borderColor = color.CGColor;


@end

勾选属性检查器中的属性

【讨论】：

@jithin 我把它写成一个 Swift 扩展，代码如下： extension CALayer func setBorderColorFromUIColor(color: UIColor) self.borderColor = color.CGColor

技巧奏效了。部分。即使我指定了红色，我到底怎么会得到黑色边框颜色？！！！！！！有任何想法吗？有人吗？

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

对于 swift 你可以设置为：self.button.layer.borderColor =

那 layer.borderColorFromUIColor 在故事板中为我工作。谢谢。

【参考方案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)
        
    

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

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

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

【讨论】：

这帮助我在情节提要中实现了它。你的答案很明确，很容易实现。

这是该问题的最准确答案，并附有清晰解释的示例。

如果您可以为 Objective-C 添加，我们将不胜感激。

这是迄今为止我找到的最佳答案。

【参考方案4】：

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

没有设置这个属性的原因是layer.borderColor需要一个CGColor类型的值。

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

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

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

【参考方案5】：

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

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

【讨论】：

我尝试了这种方法，它让 Xcode 非常慢。大家是否也遇到过这种情况？

【参考方案6】：

在 Swift 的情况下，函数不起作用。您需要一个计算属性来获得所需的结果：

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

【参考方案7】：

这对我有用。

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)
    

【参考方案8】：

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

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