Xcode 6 live rendering初体验

苹果的开发环境每个版本都会给我们带来不同的体验,使我们又爱又恨,爱的是新的特性很amazing,让人忍不住要去探索,恨的是又有一堆不兼容问题,导致我们需要更新自己的app。在这里我介绍XCode中的新特性live rendering,简单可以理解为所见即所得。相信大家都用过自定义view,通过继承UIView做自定义绘制操作,在以前,想要查看或调试效果,必须要运行程序,而现在,有了live rendering,可以直接通过Interface Builder查看效果,参照苹果提供了示例图片:
xcode6_living_render_demo
相对于swift,我采用的object-c做代码实现,swift只是初步了解,应用到实际工程还有距离。

实例工程

首先,为了演示,创建LiveRendingDemo工程,操作步骤这里不详述,这里附上初始化的demo代码。demo包含了9个子视图(只是为了显示效果),同时都继承自CustomView。对于live rendering,相对于以前唯一的区别就是增加IB_DESIGNABLE关键字,注意不是@IBDesignable,@IBDesignable是swift的关键字,如下所示:

IB_DESIGNABLE
@interface CustomView : UIView

@end

这里为了测试效果,我通过DrawRect方法为UIView增加边框做测试,代码如下:

- (void)drawRect:(CGRect)rect {
    UIBezierPath *beizerPath = [UIBezierPath bezierPathWithRect:rect];
    [[UIColor greenColor] setStroke];
    beizerPath.lineWidth = 6.0;
    [beizerPath stroke];
}

代码比较简单,就不解释了,现在打开Assistant Editor,选择如下:
xcode6_live_rending_assistant_editor
好了,现在我来尝试改变一下边框颜色,如你所见,可以即时看到Interface Builder中视图的变化,如下所示:xcode6_live_rending_change_color
很酷吧!!

IBInspectable

同时,除了IB_DESIGNABLE,Interface Builder还引入另一个关键字IBInspectable,可以自定义Interface Builder的Attributes inspector。这里以修改边框颜色作说明,修改CustomView.h,代码如下:

IB_DESIGNABLE
@interface CustomView : UIView

@property(nonatomic,strong) IBInspectable UIColor *borderColor;

@end

修改CustomView.m代码如下:

- (void)drawRect:(CGRect)rect {
    UIBezierPath *beizerPath = [UIBezierPath bezierPathWithRect:rect];
    [self.borderColor setStroke];
    beizerPath.lineWidth = 6.0;
    [beizerPath stroke];
}

现在返回Interface Builder,选中任意CustomView打开Attributes inspector,如下图所示:
xcode6_live_rending_custom_attribute