Xcode6 New Feature - 2.Live Render

Veröffentlicht am

Xcode6中可以创建可以在 storyboard 中进行修改的自定义空间.

@IBDesignable

给控件所使用的class加上@IBDesignable前缀, 就可以让相应class中代码的修改, 马上更新到storyboard中.

创建一个 UIView, 并让它的class为CustomVierw.
创建一个 UIVIew, class 为 CustomView

在CustomView的 class 前加上@IBDesignable前缀, 这样在drawRect(rect: CGRect)中的修改就会马上更新到Stroyboard中.

1
2
3
4
5
6
7
8
import UIKit
@IBDesignable class CustomView: UIView {
    override func drawRect(rect: CGRect) {
        UIColor.redColor().setFill()
        UIRectFill(bounds)
    }
}

通过@IBDesignable 对 View 进行更新

###@IBInspectable
除了及时更新代码的修改之外, 我们还可以在 Inspect 中添加我们自定的属性调节选项.

首先, 我们需要创建一个 closure属性borderWidth(也就是说, 属性的值是通过 block 中的计算得出的)在自定义属性之前添加@IBInspectable前缀, didSet方法会在属性被修改之后调用, 我们可以在didSet中对属性进行操作, 这里只是简单的赋值.

1
2
3
4
5
6
@IBInspectable var borderWidth: CGFloat = 10 {
    didSet {
        //call after varable was set
        layer.borderWidth = borderWidth
    }
}

回到 Srotyboard 中, 我们会发现, 在对应的 UIView 的 Inspect 中多了一个borderWidth的设置项, 这样我们就可以在 storyboard 中对 UI 进行实时修改了.

Inspect 中多了一个 Border Width 的设置项