Android用来替代RatingBar的自定义ImageRatingView
<p>因为android自带的RatingBar用起来不是很方便,于是决定自己写一个替代品。</p> <h2>控件介绍:</h2> <p style="text-align: center;"><img src="https://simg.open-open.com/show/c38cdcf255d1c7491a8c07ee1a3a7cfd.png"></p> <p>示意图</p> <pre> <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></pre> <p>在代码中支持设定默认评分以及获取评分,还可以通过设置 OnRatingChangedListener 来监听评分的变化。</p> <h2>基本思路:</h2> <p>利用 canvas.drawBitmap(bitmap,src,dst,paint) 来绘制评分的图标。照图上来讲分三部分进行绘制:①绘制前三个黄色的星星、②绘制后面三个白色的星星、③第四个星星单独绘制。</p> <h2>代码实现:</h2> <ul> <li>绘制前三个黄色的星星 <pre> 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); } }</pre> </li> <li>绘制后三个白色的星星 <pre> 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); } }</pre> </li> <li> <p>绘制第四个星星</p> <pre> 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); }</pre> </li> </ul> <h2>其他细节:</h2> <p>因为本控件支持设定最小评分的跨度,例如设置step为0.5,如果这时传进来3.3分,就要四舍五入到3.5。代码如下:</p> <pre> 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; }</pre> <p>但在触摸控件评分时上面的算法就不能用了,举个例子例如我触摸得到的评分是3.1,那么按照上面的算法会得到3分,最后就显示为3个星星。这样显示就很怪异,因为正常情况你的手指触摸在了星星上就表示这个星星会亮,因此这时候要换一种算法:</p> <pre> private void correctedRatingValueForTouch() { if (mRating % mMinStep == 0) return; mRating = mRating - mRating % mMinStep + mMinStep; }</pre> <p> </p> <p> </p> <p> </p>