swift_045（Swift @IBDesignable和@IBInspectable使用)

 @IBDesignable和@IBInspectable 的学习，参考一篇文章

@IBDesignable和@IBInspectable

    最近一直在看苹果公司提供的两本Swift官方教程电子书，一部是《The Swift Programming Language》,另一部是《Using Swift With Cocoa and Objective-C》。昨天正好看到第二部电子书的“Writing Swift Classes with Objective-C Behavior”这一节，其中讲述了关于实时渲染这一技术。下面是摘抄的其中一段内容：

1. “Live Rendering  
2. You can use two different attributes—@IBDesignable and @IBInspectable—to enable live, interactive custom view design in Interface Builder. When you create a custom view that inherits from the UIView class or the NSView class, you can add the @IBDesignable attribute just before the class declaration. After you add the custom view to Interface Builder (by setting the custom class of the view in the inspector pane), Interface Builder renders your view in the canvas.  
3.   
4. You can also add the @IBInspectable attribute to properties with types compatible with user defined runtime attributes. After you add your custom view to Interface Builder, you can edit these properties in the inspector.  
5.   
6. SWIFT  
7.   
8. @IBDesignable  
9. class MyCustomView: UIView {  
10.     @IBInspectable var textColor: UIColor  
11.     @IBInspectable var iconHeight: CGFloat  
12.     /* ... */  
13. }  
14. ”  
15.   
16. 摘录来自: Apple Inc. “Using Swift with Cocoa and Objective-C”。 iBooks. https://itunes.apple.com/cn/book/using-swift-cocoa-objective/id888894773?mt=11  

“Live RenderingYou can use two different attributes—@IBDesignable and @IBInspectable—to enable live, interactive custom view design in Interface Builder. When you create a custom view that inherits from the UIView class or the NSView class, you can add the @IBDesignable attribute just before the class declaration. After you add the custom view to Interface Builder (by setting the custom class of the view in the inspector pane), Interface Builder renders your view in the canvas.You can also add the @IBInspectable attribute to properties with types compatible with user defined runtime attributes. After you add your custom view to Interface Builder, you can edit these properties in the inspector.SWIFT@IBDesignableclass MyCustomView: UIView {    @IBInspectable var textColor: UIColor    @IBInspectable var iconHeight: CGFloat    /* ... */}”摘录来自: Apple Inc. “Using Swift with Cocoa and Objective-C”。 iBooks. https://itunes.apple.com/cn/book/using-swift-cocoa-objective/id888894773?mt=11

其大意就是说，可以将自定义的代码实时渲染到Interface Builder中。而它们之间的桥梁就是通过两个指令来完成，即@IBDesignable和@IBInspectable。我们通过@IBDesignable告诉Interface Builder这个类可以实时渲染到界面中，但是这个类必须是UIView或者NSView的子类。通过@IBInspectable可以定义动态属性，即可在attribute inspector面板中可视化修改属性值。

话不多说，下面举一个简单的例子，这个例子自定义一个UIView的子类，该子类拥有一个UIButton。

1. import UIKit  
2.   
3. @IBDesignable  
4. class MyCustomView: UIView {  
5.       
6.     @IBInspectable var buttonTitleColor: UIColor!         //  button title color  
7.     @IBInspectable var buttonTitle: String!               //  button title  
8.     @IBInspectable var buttonFrame: CGRect!               //  button frame  
9.       
10.     var myButton: UIButton!  
11.       
12.     override init(frame: CGRect) {  
13.         // init stored properties  
14.         buttonTitleColor = UIColor.redColor()  
15.         buttonTitle = "button title"  
16.         buttonFrame = CGRectMake(0, 0, 100, 50)  
17.           
18.         myButton = UIButton(frame: buttonFrame)  
19.         myButton.setTitleColor(buttonTitleColor, forState: .Normal)  
20.         myButton.setTitle(buttonTitle, forState: .Normal)  
21.           
22.         // call super initializer  
23.         super.init(frame: frame)  
24.           
25.         // add button to self  
26.         addSubview(myButton)  
27.   
28.     }  
29.       
30.     required init(coder aDecoder: NSCoder) {  
31.         // init stored properties  
32.         buttonTitleColor = UIColor.redColor()  
33.         buttonTitle = "button title"  
34.         buttonFrame = CGRectMake(0, 0, 100, 50)  
35.           
36.         myButton = UIButton(frame: buttonFrame)  
37.         myButton.setTitleColor(buttonTitleColor, forState: .Normal)  
38.         myButton.setTitle(buttonTitle, forState: .Normal)  
39.           
40.         // call super initializer  
41.         super.init(coder: aDecoder)  
42.           
43.         // add button to self  
44.         addSubview(myButton)  
45.     }  
46.       
47.     override func layoutSubviews() {  
48.         // refresh button state through attribute inspector  
49.         myButton.setTitleColor(buttonTitleColor, forState: .Normal)  
50.         myButton.setTitle(buttonTitle, forState: .Normal)  
51.     }  
52.   
53. }  

import UIKit@IBDesignableclass MyCustomView: UIView {        @IBInspectable var buttonTitleColor: UIColor!         //  button title color    @IBInspectable var buttonTitle: String!               //  button title    @IBInspectable var buttonFrame: CGRect!               //  button frame        var myButton: UIButton!        override init(frame: CGRect) {        // init stored properties        buttonTitleColor = UIColor.redColor()        buttonTitle = "button title"        buttonFrame = CGRectMake(0, 0, 100, 50)                myButton = UIButton(frame: buttonFrame)        myButton.setTitleColor(buttonTitleColor, forState: .Normal)        myButton.setTitle(buttonTitle, forState: .Normal)                // call super initializer        super.init(frame: frame)                // add button to self        addSubview(myButton)    }        required init(coder aDecoder: NSCoder) {        // init stored properties        buttonTitleColor = UIColor.redColor()        buttonTitle = "button title"        buttonFrame = CGRectMake(0, 0, 100, 50)                myButton = UIButton(frame: buttonFrame)        myButton.setTitleColor(buttonTitleColor, forState: .Normal)        myButton.setTitle(buttonTitle, forState: .Normal)                // call super initializer        super.init(coder: aDecoder)                // add button to self        addSubview(myButton)    }        override func layoutSubviews() {        // refresh button state through attribute inspector        myButton.setTitleColor(buttonTitleColor, forState: .Normal)        myButton.setTitle(buttonTitle, forState: .Normal)    }}

上图：

从图中可以看到，代码实时渲染到IB中了。

另外，我们在attribute inspector中也可以看到，由指令@IBInspectable声明的属性也出现在了面板中，通过修改这些值可以动态改变界面的效果（需要实现layoutSubviews方法)

具体工程一览：