iOS custom control and used in Storyboard

control

XCode 6 中加入了两个新的属性,可以将自定义的控件实时渲染到Interface Builder中。

  • @IBDesignable 告诉Interface Builder这个类可以实时渲染到界面中,但是这个类必须是UIView或者NSView的子类
  • @IBInspectable 可以定义动态属性,即可在Attribute Inspector(属性检查器)面板中可视化修改属性值。

其中IBInspectable 接受的值类型:

  • Int
  • CGFloat
  • Double
  • String
  • Bool
  • CGPoint
  • CGSize
  • CGRect
  • UIColor
  • UIImage
1
2
3
4
5
6
7
8
9
10
11
class OverCustomizableView : UIView {
@IBInspectable var integer: Int = 0
@IBInspectable var float: CGFloat = 0
@IBInspectable var double: Double = 0
@IBInspectable var point: CGPoint = CGPointZero
@IBInspectable var size: CGSize = CGSizeZero
@IBInspectable var customFrame: CGRect = CGRectZero
@IBInspectable var color: UIColor = UIColor.clearColor()
@IBInspectable var string: String = ""
@IBInspectable var bool: Bool = false
}

最终代码:

通过Property Observers来为每个属性进行更新后的界面处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@IBDesignable
class GMTagView: UIView {
// MARK: - IBInspectable
@IBInspectable var LockedBackgroundColor: UIColor = UIColor.clearColor() {
didSet {
self.backgroundColor = LockedBackgroundColor
}
}
lazy var textLabel : UILabel! = {
let tempView = UILabel(frame: CGRectZero)
return tempView
}()
// MARK: -
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.addSubview(self.textLabel)
}
}

一种实现方式是直接在当前项目中新增一个swift文件,然后在View上新加一个View,Identity Inspector中指定其类为GMTagView,就可以看到它的自定义属性了:
control

Attributes Inspector中更方便设置
control

另一种方式应该更好,就是把这个自定义控件做成一个Framework,这样可以在多个项目间共享,只是测试时会报Error,SO回答这是Xcode的Bug。

control

REF::