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