Android用来替代RatingBar的自定义ImageRatingView

项目地址：https://github.com/qingtenglv/ImageRatingView
因为android自带的RatingBar用起来不是很方便，于是决定自己写一个替代品。欢迎大家去github issue。

控件介绍：

示意图

        //设置评分最大值
          
         //设置评分之间的跨度，示意图中为0.5
              
        //设置评分时的图片 
           
        //设置未评分的图片（需和评分的图片等宽等高）
           
        //图片之间的间隔
            
        //默认评分
               
        //是否可触摸评分
            
        //设定图片的宽（layout_width设置为wrap_content即可）
           
        //设定图片的高（layout_height设置为wrap_content即可）   
          
    

在代码中支持设定默认评分以及获取评分，还可以通过设置OnRatingChangedListener来监听评分的变化。

基本思路：

利用canvas.drawBitmap(bitmap,src,dst,paint)来绘制评分的图标。照图上来讲分三部分进行绘制：①绘制前三个黄色的星星、②绘制后面三个白色的星星、③第四个星星单独绘制。

代码实现：

• 绘制前三个黄色的星星

private void drawFront(Canvas canvas) {
        //src是指图片要显示的部分，这里为显示整个星星。
        Rect src = new Rect(0, 0, mFront.getWidth(), mFront.getHeight());
        for (int i = 0; i < (int) mRating; i++) {
            int left = i * (mBitmapDstWidth + mSpanSize);
            int right = (i + 1) * mBitmapDstWidth + i * mSpanSize;
            //dst指图片在view中显示的位置，这里动态计算出每个星星的坐标位置。
            Rect dst = new Rect(left, 0, right, mBitmapDstHeight);
            canvas.drawBitmap(mFront, src, dst, null);
        }
    }

• 绘制后三个白色的星星

private void drawBack(Canvas canvas) {
        Rect src = new Rect(0, 0, mFront.getWidth(), mFront.getHeight());
        //和绘制前三个的主要区别是这里的起始值不同
        for (int i = (int) (mRating + 1); i < mMaxCount; i++) {
            //mBitmapDstWidth是图片指定的宽度
            int left = i * (mBitmapDstWidth + mSpanSize);
            int right = (i + 1) * mBitmapDstWidth + i * mSpanSize;
            Rect dst = new Rect(left, 0, right, mBitmapDstHeight);
            canvas.drawBitmap(mBack, src, dst, null);
         }
     }

• 绘制第四个星星

private void drawLastFront(Canvas canvas) {
        //先画front部分即黄色的部分
        //rating小数点前的值。
        int rating = (int) mRating;
        //算出rating小数点后的值，图中实例为0.5
        float frontPart = mRating - rating;
        int frontWidth = (int) (frontPart * mFront.getWidth());
        //这里src的宽度就是图片的一半
        Rect srcFront = new Rect(0, 0, frontWidth, mFront.getHeight());
        //位置的起始值和之前的一样
        int leftFront = rating * (mBitmapDstWidth + mSpanSize);
        //区别在结束值，按照图中实例来理解就是3.5*图片的宽度+3*图片之间的间隔
        int rightFront = (int) (mRating* mBitmapDstWidth + rating * mSpanSize);
        Rect dstFront = new Rect(leftFront, 0, rightFront, mBitmapDstHeight);
        canvas.drawBitmap(mFront, srcFront, dstFront, null);

        //back部分即白色的部分
        int backWidth = (int) (frontPart * mFront.getWidth());
        Rect srcBack = new Rect(backWidth, 0, mFront.getWidth(), mFront.getHeight());
        //位置的起始值即刚才画前半部分的结束值
        int leftBack = (int) (mRating * mBitmapDstWidth + rating * mSpanSize);
        int rightBack = (rating + 1) * mBitmapDstWidth + rating * mSpanSize;
        Rect dstBack = new Rect(leftBack, 0, rightBack, mBitmapDstHeight);
        canvas.drawBitmap(mBack, srcBack, dstBack, null);
    }

其他细节：

因为本控件支持设定最小评分的跨度，例如设置step为0.5，如果这时传进来3.3分，就要四舍五入到3.5。代码如下：

 private void correctedRatingValue() {
        if (mRating > mMaxCount) {
            mRating = mMaxCount;
        } else if (mRating < 0) {
            mRating = 0;
        }
        //最后一个跨度 进行四舍五入的判断
        float after = mRating % mMinStep > mMinStep / 2 ? mMinStep : 0;
        //除去最后个跨度
        float front = mRating - mRating % mMinStep;
        mRating = after +front;
    }

但在触摸控件评分时上面的算法就不能用了，举个例子例如我触摸得到的评分是3.1，那么按照上面的算法会得到3分，最后就显示为3个星星。这样显示就很怪异，因为正常情况你的手指触摸在了星星上就表示这个星星会亮，因此这时候要换一种算法：

 private void correctedRatingValueForTouch() {
        if (mRating % mMinStep == 0)
            return;
        mRating = mRating - mRating % mMinStep + mMinStep;
    }

最后

欢迎大家使用，有问题可以在github或者留言！谢谢