之前有個朋友有個需求趣兄，需要做一個評分視圖绽左，視圖由5顆星星構成，根據(jù)評分艇潭，星星對應比例填充好顏色拼窥，效果如下：
剛好在學paintcode，所以就嘗試做一個暴区。
具體paintcode 怎么用闯团，就不細講了，可以參看葉孤城大神博客仙粱，他正在翻譯教程房交，大家可以緊跟他，他肯定會很快發(fā)表新文章的伐割。在這里膜拜下葉孤城候味，寫了很多好的文章。
當然也可以去paintcode 的官網查看視頻教程隔心，不過要翻墻白群。有英文的字母，中文的也有硬霍，不過感覺還是看英文的更好理解帜慢。
好了，開始唯卖。
看了這個需求后粱玲，可以把控件分成3層，第一層拜轨，可以想象一下抽减，一張紙上挖了5顆星走了，漏空的橄碾。第二次就是橙色的填充層卵沉，第三層就是背景層了。
1.打開paintcode法牲，繪制一個漏空的星星：
操作為：創(chuàng)建canvas 大小30 * 30史汗；修改名稱為Star；繪制一個矩形 30 * 30拒垃；繪制一個星星 30 * 30 淹办，星星弧度改為55 %；選中矩形和星星恶复，點擊difference怜森，變成bezier 曲線。
接下來谤牡，我們添加一個新的canvas副硅，繪制我們需要的控件
操作為：創(chuàng)建星星評分canvas 150 * 30；創(chuàng)建背景矩形 150 * 30翅萤；創(chuàng)建填充矩形 100 * 30恐疲；放置5個第一步中繪制的漏空的星星到canvas 上，5個星星組成一個group套么；然后就可以看到我們想要的視圖基本已經出來了培己。
下一步：將我們畫好的生成style文件加入到我們的工程中;
先創(chuàng)建一個新的空白工程，添加一個自定義的類ScoreStarsView 繼承自UIView;
操作為點擊paintcode 的file- export 生成stylekit文件放到我們新建的工程下胚泌，然后打開xcode 省咨，添加生成是ScoreStarsKit 文件。然后在自定義的ScoreStarsView 類中導入kit玷室，然后在drawRect 進行繪制零蓉。最后在storyboard中添加uiview ，把這個view的類改成ScoreStarsView穷缤；然后我們用模擬器運行敌蜂，效果如下：
看，基本就出來效果了津肛。不過我們希望它的自定義程度更高點章喉，所以我們先來把三層視圖的顏色作為參數(shù)創(chuàng)建。
操作為身坐，三個顏色分別對應起來秸脱，frontColor,fillColor,backColor,這三個顏色均設置為parameter，方便我們進行繪制時自定義掀亥，然后重新export撞反，快捷鍵為command + R；回到xcode 發(fā)現(xiàn)報錯了搪花，因為scorestarskit 代碼已經改變了遏片，我們使用三個顏色進行創(chuàng)建，運行之后看看效果撮竿，顏色變了吮便。
接下來，我們希望它使用更方便幢踏，那么我們來把這三個顏色做成property 方便在storyboard中創(chuàng)建髓需；
現(xiàn)在可以看到，已經可以在storyboard中看到效果房蝉，而且可以隨心所欲改變顏色了僚匆，那么我們還有一個需求微渠，就是評分是變化的，所以填充的多少也是變化的咧擂，我們來看下一步逞盆；
操作為：添加一個value 的fraction ，然后添加一個width 的expression 松申，讓width = value * 150云芦；然后拉一個線到fillRect 的寬度上，這樣value 改變贸桶，我們就看到width 跟著改變了舅逸，然后重新export，回到xcode 添加一個新的property ?value皇筛，重新修改代碼琉历，就可以在storybord 中設置value 然后看到評分不同，星星填充的也就不同了设联。
現(xiàn)在還有一個問題善已，我們看到畫的三個view 的frame 明顯不同可是，我們看到的師徒除了顏色不一樣离例，大小都是一樣的换团，原因很簡單，生成的代碼的大小都是寫死的宫蛆；下面我們來看怎么讓他大小跟著改變艘包。
操作為：為了讓整體有個比例，改變畫布大小為200 * 40耀盗，同時把三層view 均重新設置大邢牖ⅰ；添加一個frame叛拷，讓底層view 和 最上層的漏空星星跟隨frame 變化舌厨，類似于自動布局的約束；重新export忿薇；我們可以看到fillRect 的約束是不對的裙椭，他的寬度和高度寫死了，我們自己來調整代碼署浩，讓它的寬度隨value 和視圖的寬度變化揉燃，讓它的高度隨視圖的高度變化。就這樣筋栋，一個評分用的星星視圖就完成了炊汤。
當然這個還有一些問題，當背景不是純色的時候，就會稍顯無力了抢腐，希望大家可以想出更好的設計方案姑曙，此文拋磚引玉，同時希望大家多多支持氓栈，多多點贊渣磷！
