利用IBInspectable和XIB桥接搭建实时编辑视图

1、关于IBDesignable和IBInspectable

这是苹果为了更方便开发者在XIB下开发而开放的两个接口属性，目的就是为了让更多的开发者转到以XIB+Storyboard为主的开发上来，这两个属性的增加对于那些喜欢用XIB开发却苦恼于自定义视图属性无法实时更新显示的开发者来说，无疑是极大的福音。如果你是以XIB为主的开发者，那么你一定非常喜欢attributesInspector这个面板，它可以让你快捷方便的设置视图的属性和一些基本的赋值(比如button、label、textField等)操作

不仅简单快捷，还能实时看到UI效果，对于开发效率而言提升的真不是一星半点!

但是如果你是自定义了一个视图，经过一层层的封装，许多复杂的效果和属性都被你尽入其中，在XIB中设置你希望的view类名为你自定义的类名，设置好约束，故事到此告一段落。如果你想预览它的UI效果，不好意思，你只能看到白茫茫的一片。想象一下如果能把你自定义的视图可以在XIB界面上实时编辑预览效果那该多好！这时就要IBDesignable和IBInspectable出场了

以一个简单的自定义进度条视图为例，如果没有这两个属性，你在XIB上添加的进度条类视图只能是一个普通的view，不能看到它的进度和颜色。加入我们需要在导航栏下方添加一个指示当前页面数据请求进度的进度指示条，大概就是这样

但是在XIB界面中你却看到的是这个样子

如果换成更复杂的界面，这将是非常糟糕的一种开发体验。现在我们为这个自定义类增加IBDesignable和IBInspectable这两个属性,就像这样

这时再打开XIB界面,你会看到

而且可以实时改变属性变量的值来预览改变效果

2、关于XIB桥接

如果一个项目多处用到功能界面一样并且构建复杂的视图，我们可能需要一个一个搭建，这样会非常浪费开发时间，如果可以将XIB中的view直接与自定义的用xib搭建的view关联起来，那样会好很多，也减少了自定义视图的开发时间，提高了开发效率。例如这样一个界面

三个独立的视图，我们可以直接自己创建一个自定义视图,在XIB界面中只需要创建三个类名为XXView(自定义类名)的view，拉好约束，自定义视图那些可以改变的属性都加上IBInspectable关键字

这里用到的桥接技术来自孙源大神的XXNibBridge(简单好用易学，谁用谁知道!),Swift版的可以看LCNibBridge,不需要用到IBDesignable关键字，只需要IBInspectable即可，由于自定义视图也是用XIB搭建，所以即使在storyboard中看不到具体界面，看自定义XIB界面也是一样的

整个过程就是这么简单！

小记：

XIB固然还有许多不足之处，但是如果掌握了这项技能，它在开发中给我们带来的效率提升绝对不是一星半点，这篇文章也给大家带来了一些让XIB开发效率更上一层楼的东西，如果你喜欢在项目中使用XIB，那么这些小技巧和技能或许能给你带来一定的帮助。本人是XIB开发的爱好者，所以拿来一些自己平时喜欢的感觉对开发效率有帮助的东西分享给大家，希望共同成长!

本文示例Demo:https://github.com/lvXiaoPeng/LYXIBExample