写一个TestView继承于UIView,然后写个对应的xib,把xib的名字设置成TestView,这是标准的用xib加载这个view必须得条件

然后xib里把这个View的backgroundColor设置为黑色,恩,看起来就是黑色的。

动态预览Xib的实现-LMLPHP

如果想要把背景色改为棕色或者更复杂的事情,那么就需要改代码然后编译运行看效果,那么本文章介绍的新功能就是打破这个僵局的。

在TestView类前面写@IBDesignable,且一定要保证实现initWithFrame和initWithCoder方法,因为预览会调用initWithFrame,且ib加载会调用initWithCoder,两者一定要实现,还要实现prepareForInterfaceBuilder方法来改变一些属性,如下

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import UIKit
 
@IBDesignable
 
class TestView: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
 
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    //这个方法是Xib加载显示前会调用的方法,这里设置默认值用来显示Xib前的最后一道管卡
    override func prepareForInterfaceBuilder() {
        self.backgroundColor = UIColor.brownColor()
    }
 
}

然后看TestView.xib会神奇的发现上面显示building,然后画面变成了棕色,但是IB设置还是之前的黑色

动态预览Xib的实现-LMLPHP

那么,这么修改只能是第一次启动的时候预览Xib,我们可以设定一个属性放在Xcode的右边栏,这样可以实时的修改这个属性预览,方法是使用@IBInspectable,比如还是背景色这个属性,下面将会把bgColor这个属性放到右边栏去

注释掉prepareForInterfaceBuilder,然后添加下面两个方法给TestView

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@IBInspectable
 
    var bgColor: UIColor? {
 
        didSet {
 
            refreshColor()
 
        }
 
    }
 
    private func refreshColor() {
 
        if let realColor = bgColor {
 
            self.backgroundColor = realColor
 
        }
 
    }

这样的话bgColor这个属性就跑到右面去了,就可以实时修改背景色了

动态预览Xib的实现-LMLPHP

此外,XIB视图预览还可以设置断点,方法是代码里设置断点,然后Editor -> Debug Selected Views(以前是automatic那个),比如在修改背景色那里设置断点,再修改背景色就会断在那里了,暂时就这些

05-14 20:04