iOS自定义控件（@IBDesignable与@IBInspectable）

iOS自定义控件（@IBDesignable与@IBInspectable）

IBDesignable

任何一个我们自定义的控件（继承自UIView），在其类声明前加上 @IBDesignable。则当此控件添加到 Interface Builder时，Interface Builder 会在 canvas 上对它进行实时渲染。

IBDesignable 的用法示例

import UIKit


@IBDesignable
class WatchView: UIView {

    override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        let width = CGRectGetWidth(rect)
        let height = CGRectGetHeight(rect)

        let diameter = width < height ? width : height  - 2.0

        let x = (width - diameter) / 2.0
        let y = (height - diameter) / 2.0

        let watchRect = CGRectMake(x, y, diameter, diameter)

        // border

        CGContextSetLineWidth(context, 2.0)
        CGContextSetStrokeColorWithColor(context, UIColor.blackColor().CGColor)
        CGContextAddEllipseInRect(context, watchRect)
        CGContextStrokePath(context)
    }
}

以上代码自定义了一个UIView，并且在View中绘制了一个圆形
这是一个很普通的UIView，但由于加入了 @IBDesignable，当我们在把它加入到 Storyboard 中时，Interface Builder 会对其进行实时渲染。
如下图所示。

IBInspectable

@IBInspectable 则可以用来自定义属性
比如我们常使用的layer.borderWidth, layer.cornetRadius

import UIKit

@IBDesignable
class CustomButton: UIButton {
    @IBInspectable var cornerRadius : CGFloat {
        get {
            return self.layer.cornerRadius
        }

        set (newValue) {
            self.layer.cornerRadius = newValue
        }
    }

    @IBInspectable var borderCorlor : UIColor {
        get {
            return UIColor(CGColor: self.layer.borderColor!)
        }

        set (newValue) {
            self.layer.borderColor = newValue.CGColor
        }
    }

    @IBInspectable var borderWidth : CGFloat {
        get {
            return self.layer.borderWidth
        }

        set (newValue) {
            self.layer.borderWidth = newValue
        }
    }
}

通过 @IBInspectable 定义的属性会出现在

可以实时调整，再配合 IBDesignable ，可以将参数的调整实时渲染。

以下是，用 IBDesignable 与 IBInspectable 做的简易时钟控件及自定义的Button。

相关代码可以在 https://github.com/lcllkzdzq/IBDesignableDemo 找到