Xcode6新功能 - Live Rendering

　　在开发iOS应用时，为了界面美观，我们通常会创建大量的自定义组件。而目前Xcode5中的图形界面开发工具Interface Builder，无法呈现自定义组件的显示效果，这导致了我们为了验证界面是否符合要求，不得不修改程序的执行流程，一次次反复的编译运行以观看实际效果。在即将到来的Xcode6里，苹果提供了自定义组件的即时渲染功能，苹果称之为Live Rendering。Live Rendering使我们可以直接在Interface Builder里看到自定义组件的视觉效果，避免了需要编译运行才能验证效果的流程，大大提高了开发效率。

　　如果想要自定义组件获得Live Rendering的功能，需要对自定义组件代码进行修饰。首先，自定义组件必须定义在一个单独的Framework中（Xcode6现在可以为iOS创建Framework了），接下来自定义组件的类必须添加@IBDesignable修饰，需要动态即时渲染的属性需要添加@IBInspectable修饰。

　　示例：

　　1.打开Xcode6创建一个新的工程，选择项目模板为Single View Application，选择开发语言为Swift。

　　2.选择工程，选择创建一个新的Target，选择Cocoa Touch Framework，这里我们命名Framework的名字为AFK（魔兽玩家会笑吧）

　　3.在新创建的AFK.framework里，我们创建一个叫AFKButton的自定义UIButton组件，代码如下

 

import UIKit

@IBDesignable class AFKButton: UIButton {
    
    @IBInspectable var style:NSInteger  = 0 {
    didSet {
        switch style {
        case 0:
            self.backgroundColor = UIColor.blueColor()
            self.setTitleColor(UIColor.redColor(), forState:UIControlState.Normal)
        case 1:
            self.backgroundColor = UIColor.whiteColor()
            self.setTitleColor(UIColor.blackColor(), forState:UIControlState.Normal)
        default:
            self.backgroundColor = UIColor.yellowColor()
            self.setTitleColor(UIColor.redColor(), forState:UIControlState.Normal)
        }
    }
    }
    /*
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect)
    {
        // Drawing code
    }
    */
}

 

　　这里我们为AFKButton添加了一个可以Live Rendering的属性：style，在Interface Builder里通过修改style的值，就可以立即看到效果了。

　　4.打开项目模板为我们生成好的Main.storyboard，拽一个Button进来，将它的Class修改成AFKButton，在User defined Runtime Attribute区，添加我们自定义的即时渲染属性style，将Type设成Number，尝试修改它的值0、1或者2，就可以直接在Interface Builder里看到效果了。

 

　　Demo工程地址：https://github.com/Guou/LiveRenderingDemo