IBInspectable 和 IBDesignable 出现之前，实现圆角这样的效果，可以通过硬编码或者xib／storyBord实例中设置键值编码属性来实现；这两种方式除了需要实时运行程序来查看效果外，通过xib或者storybord来设置键值编码，虽然功能强大，但是一个属性的关键字路径，类型和属性值需要在每个实例中设置，且没有任何自动完成或输入提示，很多时候不得不查看文档或者源代码。用 IBInspectable 和 IBDesignable 可以将自定义属性或者页面暴露在属性检查器面板上，手动设置，方便直观。

IBInspectable

一，对于Cocoa 内置类型，可以通过扩展将属性暴露在 Interface Builder 属性检查器中，使属性可视。

extension UIView{
    
    @IBInspectable var customBackColor : UIColor{
        get{
            return backgroundColor!;
        }
        set{
            backgroundColor = newValue;
        }
    }
    
}

@IBInspectable 关键字告诉编译器，后面的属性需要在属性检查器中显示，效果如图：

Main_storyboard_和_Glass.jpg

同时，在运行时属性栏会自动填充相应的键值属性

Main_storyboard_—_Edited 2.jpg

二，对于自定义View，除了用上述方式之外，更多的直接使用@IBInspectable使自身属性可视化。

class MYView: UIView {

    @IBInspectable var myCornerRadius: CGFloat = 0.0{
        
        didSet{
            layer.cornerRadius = myCornerRadius //圆角
        }
    }
    @IBInspectable var masks : Bool = true{
        
        didSet{
            layer.masksToBounds = masks //mask裁剪
        }
    }
    @IBInspectable var myColor : UIColor = UIColor.red{
        didSet{
            backgroundColor = myColor //背景色
        }
    }
}

代码在 Interface Builder 属性检查器中的效果

Main_storyboard_和_浅谈IBInspectable___IBDesignable.jpg

这样通过IBInspectable就可以很方便的在属性检查器中手动设置参数值了。

IBDesignable

接着说自定义的View，虽然通过@IBInspectable将参数可视化在Interface Builder 属性检查器中；但是设置属性值之后，想要查看效果的话，还是需要每次都运行程序调试。使用IBDesignable却能在xib或storyBord中实时渲染出设置属性的效果。

只需要在上述代码中添加@IBDesignable标签即可

@IBDesignabl

class MYView: UIView {

    @IBInspectable var myCornerRadius: CGFloat = 0.0{
        
        didSet{
            layer.cornerRadius = myCornerRadius
        }
    }
    @IBInspectable var masks : Bool = true{
        
        didSet{
            layer.masksToBounds = masks
        }
    }
    @IBInspectable var myColor : UIColor = UIColor.red{
        didSet{
            backgroundColor = myColor
        }
    }
}

这样每次通过属性检查器设置属性之后，可以立即查看到自定义View的效果：

Main_storyboard_—_Edited.jpg

now，你可以以一种新的方式在组织你的代码了。

不足之处，欢迎指正！