项目地址：https://github.com/qingtenglv/ImageRatingView
因为android自带的RatingBar用起来不是很方便，于是决定自己写一个替代品。欢迎大家去github issue。
控件介绍：
示意图
<declare-styleable name="ImageRatingView">
//设置评分最大值
<attr name="maxCount" format="integer" />
//设置评分之间的跨度，示意图中为0.5
<attr name="minStep" format="float" />
//设置评分时的图片
<attr name="frontImage" format="reference"/>
//设置未评分的图片（需和评分的图片等宽等高）
<attr name="backImage" format="reference"/>
//图片之间的间隔
<attr name="spanSize" format="dimension"/>
//默认评分
<attr name="rating" format="float"/>
//是否可触摸评分
<attr name="touchable" format="boolean"/>
//设定图片的宽（layout_width设置为wrap_content即可）
<attr name="imageWidth" format="dimension"/>
//设定图片的高（layout_height设置为wrap_content即可）
<attr name="imageHeight" format="dimension"/>
</declare-styleable>
在代码中支持设定默认评分以及获取评分，还可以通过设置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或者简书留言！谢谢
