苹果在Xcode 6中加入了两个新的Interface Builder(下文用IB简称)属性声明:IBInspectable和IBDesignable。IBInspectable在IB的Attribute Inspector(属性检查器)中查看类的属性,而IBDesignable能实时更新视图,很厉害吧!
以下是我发现的适用于IBInspectable的类型:
下面这些数据都对IBInspectable有效:
举个小栗子
- 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 = "We ? Swift"
- @IBInspectable var bool: Bool = false
- }
在属性检查器的上面是这样:
这一切添加了一些用户定义的运行时属性,这些属性将会在view加载时设置它的初始值。
运行时属性的创建:
IBDesignable
来看个好玩的地方。IBDesignable告诉IB它可以加载并渲染视图。这个视图类必须在一个框架里面才能正常工作。不过这种方式也不会太麻烦,我们下面会看到方法。 我认为IB是隐式地将UIView的代码转换成NSView的代码,这样就能动态地加载框架并渲染组件。
打开Xcode6,创建一个新的“Single Page Application” (单页面应用)并选择Swift作为编程语言。
在导航选中工程文件点击“+”按钮添加新的target
选择Framework & Application Library和choose the Cocoa Touch Framework,如图
![](http://www.wuguo.org/image/zoom.gif)
![点击图片,在新窗口显示原始尺寸](http://static.wumii.cn/proxy/image/DxjMfNQY?url=http%3A%2F%2Fwww.cocoachina.com%2Fcms%2Fuploads%2Fallimg%2F140619%2F4196_140619110454_1.png&mac=mJbM9si3jaaSBVn9mPXAj6BD30J2JuKffPxYh27qOzM)
命名为MyCustomView。Xcode会自动链接MyCustomView.framework到你的工程。
创建一个新的swift文件,并添加到MyCustomView框架里。
右键单击框架的目录。
选择Cocoa Touch文件
![](http://www.wuguo.org/image/zoom.gif)
![点击图片,在新窗口显示原始尺寸](http://static.wumii.cn/proxy/image/DxjMfNQY?url=http%3A%2F%2Fwww.cocoachina.com%2Fcms%2Fuploads%2Fallimg%2F140619%2F4196_140619110539_1.png&mac=48jUUFrwfxyTnf1V_Rc_kQXXRs8cbnt3bxr5vU3nYas)
给它命名为CustomView,作为UIView的子视图
![](http://www.wuguo.org/image/zoom.gif)
![点击图片,在新窗口显示原始尺寸](http://static.wumii.cn/proxy/image/DxjMfNQY?url=http%3A%2F%2Fwww.cocoachina.com%2Fcms%2Fuploads%2Fallimg%2F140619%2F4196_140619110549_1.png&mac=f31funH-NZA8Qkt3wWSmmXAr4GNfCv5tAEscenl8f9U)
CustomView.swift文件里包含:
- import UIKit
- class CustomView: UIView {
- init(frame: CGRect) {
- super.init(frame: frame)
- // Initialization code
- }
- /*
- // Only override drawRect: if you perform custom drawing.
- // An empty implementation adversely affects performance during animation.
- override func drawRect(rect: CGRect)
- {
- // Drawing code
- }
- */
- }
移除生成的方法。
- import UIKit
- class CustomView: UIView {
- }
告诉Xcode用@IBDesignable 关键字来渲染你的视图。
添加三个属性:borderColor: UIColor, borderWidth: CGFloat以及cornerRadius: CGFloat。
设置默认值,并让它们是可检验的:
- @IBDesignable class CustomView : UIView {
- @IBInspectable var borderColor: UIColor = UIColor.clearColor()
- @IBInspectable var borderWidth: CGFloat = 0
- @IBInspectable var cornerRadius: CGFloat = 0
- }
为每个属性添加[property observers](观察者属性),并根据layer更新。
- class CustomView : UIView {
- @IBInspectable var borderColor: UIColor = UIColor.clearColor() {
- didSet {
- layer.borderColor = borderColor.CGColor
- }
- }
- @IBInspectable var borderWidth: CGFloat = 0 {
- didSet {
- layer.borderWidth = borderWidth
- }
- }
- @IBInspectable var cornerRadius: CGFloat = 0 {
- didSet {
- layer.cornerRadius = cornerRadius
- }
- }
- }
![](http://static.wumii.cn/proxy/image/DxjMfNQY?url=http%3A%2F%2Fwww.cocoachina.com%2Fcms%2Fuploads%2Fallimg%2F140619%2F4196_140619110720_1.png&mac=hhqcvCBFF--qHWAn5P6vo-uiEt-szGRAAYCHET2KaU4)
打开Main.storyboard,从组件库里添加一个视图。
在Identity Inspector里把视图类改成CustomView。
调整视图,如果需要可添加自动布局约束。
![](http://static.wumii.cn/proxy/image/DxjMfNQY?url=http%3A%2F%2Fwww.cocoachina.com%2Fcms%2Fuploads%2Fallimg%2F140619%2F4196_140619111010_1.png&mac=2kCUMJ4vKt6VmaJ9Zwp0Y24sfwqSFFPxgjFQiBVeyvQ)
上手玩了一下`cornerRadius`,我发现当添加一些比较大的值时会创建一个有意思的模式。
![](http://www.wuguo.org/image/zoom_h.gif)
![点击图片,在新窗口显示原始尺寸](http://static.wumii.cn/proxy/image/DxjMfNQY?url=http%3A%2F%2Fwww.cocoachina.com%2Fcms%2Fuploads%2Fallimg%2F140619%2F4196_140619110804_1.png&mac=HjPpORha0j4GyjDSFuuCfLvEvqp2ieYjTBlDzaI2aj8)