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里看到效果了。

Xcode6新功能 - Live Rendering_第1张图片

Demo工程地址:https://github.com/Guou/demo-ios-LiveRendering


你可能感兴趣的:(Xcode6新功能 - Live Rendering)