Android用来替代RatingBar的自定义ImageRatingView

xinewedngcp 8年前
   <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>