PaintCode - 随心所欲的将界面设计转换成代码
PaintCode 提供了一种全新的 iOS APP 资源处理方式，用了它之后，我们可以不使用图片资源，而直接将 UI 元素通过代码的形式集成的 APP 中。使用熟练之后，将能够非常大的提高我们的开发效率。并且它的美妙之处还不止这些，咱们来详细了解吧。
首先，我们可以访问 PaintCode 的官网，来下载这个工具：
下载安装好后，我们就可以打开并看到它的主界面了：
为何要用 PaintCode
PaintCode 的界面非常整齐美观。那么，到现在大家肯定会有一个疑问，就是，我为什么要用它呢？直接用图片作为资源文件，然后在代码中加载，这种方式不是挺好的么？
相信很多朋友都会有同样的疑问，包括我自己在在开始的时候也有这样的疑问。但还是耐下心来用了用 PaintCode，有了一些发现。
-
首先，PaintCode 生成的是 Core Graphics 代码，所以不必考虑图片在不同设备上的分辨率兼容问题，比如我们使用图片资源的时候，对同一个图片，我们都需要提供 @2x @3x 几个不同分辨率的版本。而使用 Paint Code 生成的 UI 资源，是不需要这些繁杂的操作的。
-
调试起来比较容易，比如我们在调校一些小图标的时候，每做一次小的修改都要重新导出图片，比较耗费精力。使用 PaintCode 我们只需要对预览视图进行微调，更新生成后的代码即可。 能省去很多调整 UI 资源的时间。
-
另外，PaintCode 也是一个非常优秀的原型构建工具，能帮助我们快速的创建 APP 最初的 Demo。
当然，PaintCode 也有它的不足，比如它生成的 UI 代码，不一定是最高效的，并且正式版还要收费。这里我把 PaintCode 的特性，以及它能给我们带来的便利列举出来，至于是否觉得它有用以及是否能提升你的效率，就见仁见智了。
开始使用 PaintCode
我们先用 PaintCode 来实现一个按钮的 UI，首先我们在 PaintCode 中点击 Rect 工具:
然后在中间的 Canvas 中绘制两个细长的矩形，组成一个加号图案：
默认的填充颜色有些浅，我们可以在右边的属性面板设置颜色，选中 Canvas 上面的两个矩形，然后在 Fill 分类中，可以设置填充颜色：
我们将背景色改成黑色：
绘制好图案后，在 PaintCode 下方的代码区域，就可以看到为我们生成的 UI 代码了：
代码区域的左上角，有几个下拉菜单，可以让我们选择生成代码的平台，以及语言，我们这里生成了 iOS 平台的 Swift 代码。
有了 UI 代码，我们怎么把它应用到 APP 中呢，我们可以进行一些中间操作，定义一个 Graphics 类：
class Graphics: NSObject {
class func getAddImageNormal() -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(20, 20), false, 1.0)
//// Color Declarations
let color = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1.000)
//// Rectangle Drawing
let rectanglePath = UIBezierPath(rect: CGRectMake(0, 9, 20, 2))
color.setFill()
rectanglePath.fill()
//// Rectangle 2 Drawing
let rectangle2Path = UIBezierPath(rect: CGRectMake(9, 0, 2, 20))
color.setFill()
rectangle2Path.fill()
return UIGraphicsGetImageFromCurrentImageContext();
}
}
我们这个类，定义了一个 getAddImageNormal 类方法，我们将 PaintCode 中生成的代码复制到这个方法中，并增加了两个图片渲染的调用：
UIGraphicsBeginImageContextWithOptions(CGSizeMake(20, 20), false, 1.0)
...
return UIGraphicsGetImageFromCurrentImageContext();
这样，我们刚才制作的图片资源，就集成到项目中了。我们接下来，将它放到 UIButton 上面：
let addButton = UIButton()
addButton.frame = CGRectMake(0, 0, 20, 20)
addButton.setImage(Graphics.getAddImageNormal(), forState: UIControlState.Normal)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: addButton)
这样，就完成了图片的设置。现在我们可以运行程序，看看效果了：
成功的将按钮的图片设置好了，最终效果和用图片资源所达成的基本一样。而且我们不需要考虑图片在不同分辨率上的分辨率匹配问题，因为 PaintCode 生成的 UI 代码本身就是矢量的，所以我们不需要在指定 @2x @3x 这些资源，这点还是比较方便的。
我们刚刚制作的按钮，只有一个默认状态的图标，我们应该还需要一个用户按下按钮时候的状态图标。接下来，我们在 PaintCode 中进行简单的调整即可，还是选中 Canvas 中绘制的那个图案，然后在右边的属性窗口将填充颜色设置成灰色即可：
设置好后，PaintCode 会更新生成的代码，我们只需把新的代码复制下来，然后在 Graphics 类中新建一个方法就完成了点击状态图片的设置：
class func getAddImageSelected() -> UIImage {
UIGraphicsBeginImageContextWithOptions(CGSizeMake(20, 20), false, 1.0)
//// PaintCode Trial Version
//// www.paintcodeapp.com
//// Color Declarations
let color = UIColor(red: 0.590, green: 0.590, blue: 0.590, alpha: 1.000)
//// Rectangle Drawing
let rectanglePath = UIBezierPath(rect: CGRectMake(0, 9, 20, 2))
color.setFill()
rectanglePath.fill()
//// Rectangle 2 Drawing
let rectangle2Path = UIBezierPath(rect: CGRectMake(9, 0, 2, 20))
color.setFill()
rectangle2Path.fill()
return UIGraphicsGetImageFromCurrentImageContext();
}
再更新一下 UIButton 的初始化代码：
let addButton = UIButton()
addButton.frame = CGRectMake(0, 0, 20, 20)
addButton.setImage(Graphics.getAddImageNormal(), forState: UIControlState.Normal)
addButton.setImage(Graphics.getAddImageSelected(), forState: UIControlState.Highlighted)
self.navigationItem.rightBarButtonItem = UIBarButtonItem(customView: addButton)
这样就完成了 UIButton 视图资源的配置了。
恩。。 还是比较方便的哈。PaintCode 所反映的是另外一种开发模式，至于它是否能提高你的效率就是一个见仁见智的事情了。如果熟练的使用，确实能够加快 UI 开发的速度。另外它的一个附加好处就是生成的图片资源代码是可拉伸的，有别于我们预定义好的传统像素图片。所以将来即使出现更大分辨率的设别，我们也只需要很小的代价就可以兼容适配，这也是它的一个优点。
结语
好了，介绍了这些，我们用了一个简单的例子基本体现出了 PaintCode 的主要特点。如果有兴趣，你可以下载它的试用版来体验一下。然后嘛，正式版的价格是 99 美金，还是有些小贵的，值与不值，就看你自己体验后的感觉了。我个人的感觉是，如果你在一个团队中，它能否真正提高整体团队的效率，就要看设计师对 PaintCode 的接受程度了。毕竟还是要他们来设计 UI 资源的，无论是在 Photoshop 上，还是在 PaintCode 上。如果你是一个独立开发者的话，不妨可以先用一下它的试用版，图片与代码都是你一个人负责，看看它是否能让你摆脱繁琐的图片导出以及多分辨率生成这些事情吧。
更多精彩内容可关注微信公众号：
swift-cafe
