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 找到