之前有个朋友有个需求，需要做一个评分视图，视图由5颗星星构成，根据评分，星星对应比例填充好颜色，效果如下：
刚好在学paintcode，所以就尝试做一个。
具体paintcode 怎么用，就不细讲了，可以参看叶孤城大神博客，他正在翻译教程，大家可以紧跟他，他肯定会很快发表新文章的。在这里膜拜下叶孤城，写了很多好的文章。
当然也可以去paintcode 的官网查看视频教程，不过要翻墙。有英文的字母，中文的也有，不过感觉还是看英文的更好理解。
好了，开始。
看了这个需求后，可以把控件分成3层，第一层，可以想象一下，一张纸上挖了5颗星走了，漏空的。第二次就是橙色的填充层，第三层就是背景层了。
1.打开paintcode，绘制一个漏空的星星：
操作为：创建canvas 大小30 * 30；修改名称为Star；绘制一个矩形 30 * 30；绘制一个星星 30 * 30 ，星星弧度改为55 %；选中矩形和星星，点击difference，变成bezier 曲线。
接下来，我们添加一个新的canvas，绘制我们需要的控件
操作为：创建星星评分canvas 150 * 30；创建背景矩形 150 * 30；创建填充矩形 100 * 30；放置5个第一步中绘制的漏空的星星到canvas 上，5个星星组成一个group；然后就可以看到我们想要的视图基本已经出来了。
下一步：将我们画好的生成style文件加入到我们的工程中;
先创建一个新的空白工程，添加一个自定义的类ScoreStarsView 继承自UIView;
操作为点击paintcode 的file- export 生成stylekit文件放到我们新建的工程下，然后打开xcode ，添加生成是ScoreStarsKit 文件。然后在自定义的ScoreStarsView 类中导入kit，然后在drawRect 进行绘制。最后在storyboard中添加uiview ，把这个view的类改成ScoreStarsView；然后我们用模拟器运行，效果如下：
看，基本就出来效果了。不过我们希望它的自定义程度更高点，所以我们先来把三层视图的颜色作为参数创建。
操作为，三个颜色分别对应起来，frontColor,fillColor,backColor,这三个颜色均设置为parameter，方便我们进行绘制时自定义，然后重新export，快捷键为command + R；回到xcode 发现报错了，因为scorestarskit 代码已经改变了，我们使用三个颜色进行创建，运行之后看看效果，颜色变了。
接下来，我们希望它使用更方便，那么我们来把这三个颜色做成property 方便在storyboard中创建；
现在可以看到，已经可以在storyboard中看到效果，而且可以随心所欲改变颜色了，那么我们还有一个需求，就是评分是变化的，所以填充的多少也是变化的，我们来看下一步；
操作为：添加一个value 的fraction ，然后添加一个width 的expression ，让width = value * 150；然后拉一个线到fillRect 的宽度上，这样value 改变，我们就看到width 跟着改变了，然后重新export，回到xcode 添加一个新的property value，重新修改代码，就可以在storybord 中设置value 然后看到评分不同，星星填充的也就不同了。
现在还有一个问题，我们看到画的三个view 的frame 明显不同可是，我们看到的师徒除了颜色不一样，大小都是一样的，原因很简单，生成的代码的大小都是写死的；下面我们来看怎么让他大小跟着改变。
操作为：为了让整体有个比例，改变画布大小为200 * 40，同时把三层view 均重新设置大小；添加一个frame，让底层view 和 最上层的漏空星星跟随frame 变化，类似于自动布局的约束；重新export；我们可以看到fillRect 的约束是不对的，他的宽度和高度写死了，我们自己来调整代码，让它的宽度随value 和视图的宽度变化，让它的高度随视图的高度变化。就这样，一个评分用的星星视图就完成了。
当然这个还有一些问题，当背景不是纯色的时候，就会稍显无力了，希望大家可以想出更好的设计方案，此文抛砖引玉，同时希望大家多多支持，多多点赞！
网友评论