Android自定義View--RatingStarView:自定義星星評分/打分控件

一、前言

由於最近項目中需要使用到自定義星星評分和打分控件,而且需要支持根據後臺返回的數據動態配置滿星星和空星星的顏色,雖然Android中也提供了官方的星星評分控件RatingStar,但其效果不能滿足UI和產品需求,而且項目中現用的自定義星星評分控件,是基於本地設置滿星星和空星星的Drawable圖片資源來實現滿星星和空星星的顯示效果,不能滿足動態根據配置的顏色數據來改變滿星星和空星星的顏色效果,基於這種需求場景,纔有了今天文章所說的RatingStarView。

本控件主要參考和優化改造於GitHub項目https://github.com/everhad/AndroidRatingStar,原作者博客地址https://www.cnblogs.com/everhad/p/6828627.html,非常感謝原作者的啓發。

二、RatingStarView及效果展示

RatingStarView是一款類似於Android官方RatingStar控件的評分和打分控件,支持使用顏色值動態設置控制星星的前景和背景顏色(滿星星和空星星),同時支持打分、邊界等更多的自定義屬性設置,主要支持特性如下:
     1)支持任意小數比例顆星
     2)填充色(前景色,即滿星星顏色)、底色(背景色,即空星星顏色)、描邊色
     3)指定高度,寬度自適應
     4)拐角弧度、描邊寬度、星星間距
     5)肥胖指數(star thickness),越胖越可愛
     6)支持點擊評分設置,目前點擊評分不支持半顆星

效果如下:

三、實現原理與思路

實現原理和思路可以參考原作者博文鏈接https://www.cnblogs.com/everhad/p/6828627.html,作者已講述得很細和很棒,本文不再重述,本文所述控件主要是基於原作者的AndroidRatingStarView,主要優化原作者星星評分控件在填充顏色是半透明時或較淺顏色時,空星星內部中間出現灰色的明顯線條的問題,如下圖第一行最後面兩顆空星星所示:

issue

本人也是在實際項目使用中發現和修復了這個問題,同時也在原作者GitHub上提交了這個Issue,鏈接https://github.com/everhad/AndroidRatingStar/issues/4

在原作者中,是通過五次Path路徑完成五個星星尖角的繪製,然後再繪製星星中間空洞而實現整顆星星的繪製,而且中間可能存在偏移值,如上文所述,在填充顏色是半透明時或較淺顏色時,空星星內部中間出現灰色的明顯線條的問題,針對這個問題,本人主要是優化了原作者繪製星星的代碼的實現思路,本人通過路徑Path,一次完成星星的填充Path繪製,從而解決了這個問題,有興趣的朋友可以閱讀代碼瞭解:

private void drawSolidStar(StarModel star, Canvas canvas, int fillColor) {
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        paint.setColor(fillColor);
        paint.setPathEffect(pathEffect);

        VertexF prev = star.getVertex(1);
        Path path = new Path();
        path.moveTo(prev.x, prev.y);

        for (int i = 0; i < 5; i++) {
            VertexF next = prev.next;
            path.lineTo(next.x, next.y);
            path.lineTo(next.next.x, next.next.y);
            path.lineTo(next.next.x, next.next.y);
            prev = next.next;
        }
        canvas.drawPath(path, paint);
    }

 

四、相關鏈接和參考

所有代碼已提交到本人GitHub項目,有興趣的朋友可以參考本人GitHub項目代碼,希望能給大家帶有更多的參考價值,大家互相學習和討論,鏈接請見https://github.com/oukanggui/WidgetLibrary/tree/master/widget/src/main/java/com/baymax/widget/ratingstar

同時也感謝原作者項目和博文的參考和啓發:

原作者Github項目地址https://github.com/everhad/AndroidRatingStar

原作者博客地址https://www.cnblogs.com/everhad/p/6828627.html

發佈了11 篇原創文章 · 獲贊 19 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章