Android自定义星星评分控件

亦凉 2022-12-04 01:13 405阅读 0赞

下面为控件的实现历程：
此控件高效，直接使用ondraw绘制，先亮照：
这里写图片描述这里写图片描述
由于Android自身的星星评分控件样式可以改，但是他的大小不好调整的缺点，只能用small normal这样的style调整，自定义不强，因此击发了我自定义星星控件的欲望。
星星评分控件的设计，大体规划为：
需要两张图片，一颗亮星星，一颗空星星；（当然图片不一定是星星，其他图片也可以，现在实验就用星星就好了）星星数量，间距可以自定义，星星的最小步进为0.1，在用户使用的时候与Android自带的方法一样。
星星控件大体分为两层，第一层空星星，第二层亮星星，第一层固定，第二层动态绘制，这样就可以实现评分。
在画星星的时候，由于在xml得出回来的对象是drawable,不必再转换为bitmap绘制，故直接绘制drawable，并且提升效率。
绘制drawable需要两个方法就够了
1、设置绘制到那里：
setBounds(int left ,int top , int right ,int bottom);
2、绘制：
draw(Canvas canvas);
设置错误setBounds会导致绘制变形：
这里写图片描述这里写图片描述
把setbounds设置好后就一切正常：
这里写图片描述 这里写图片描述
经过一个for循环，五颗空星星就出来了，哈哈

  1. for (int i = 0;i < starCount;i++) {
  2.             starEmptyDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
  3.             starEmptyDrawable.draw(canvas);
  4.         }

这里写图片描述

  1. for (int i = 0;i < starCount;i++) {
  2.             starEmptyDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
  3.             starEmptyDrawable.draw(canvas);
  4.         }
  5.         for (int i = 0;i < starCount -1;i++) {
  6.             starFillDrawable.setBounds(starSize * i, 0, starSize * (i + 1), starSize);
  7.             starFillDrawable.draw(canvas);
  8.         }

上面几行代码成功强行装成了一个评了4分的这里写图片描述
现在，显示几颗几颗的星星无压力，但是我们目标是需要步进为0.1的星星。
But
经过一系列的实验，发现Drawable对象没有能指定绘制需要的部分，也就是不能绘制半颗星星（反正找不到，找到可以评论告诉我），然后就采用了折中的方法，把Drawable对象变为Bitmap这样就好办了，再利用BitmapShader，想绘制多少就绘制多上（就是实现0.1步进），下面为1/3颗的效果：
这里写图片描述
转换方法：

  1. private Bitmap drawableToBitmap(Drawable drawable)
  2.     {
  3.         if (drawable == null)return null;
  4.         Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);
  5.         Canvas canvas = new Canvas(bitmap);
  6.         drawable.setBounds(0, 0, starSize, starSize);
  7.         drawable.draw(canvas);
  8.         return bitmap;
  9.     }

把Bitmap转换为画笔绘制：

  1. paint = new Paint();
  2.     paint.setAntiAlias(true);
  3.     paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
  5. 在ondraw()方法绘制（三分之一个）
  7. canvas.drawRect(0,0,starSize/3,starSize,paint);

原理就是这样，剩下就是逻辑问题了，以下为星星控件代码：

  1. package com.dming.starbar;
  3. import android.content.Context;
  4. import android.content.res.TypedArray;
  5. import android.graphics.Bitmap;
  6. import android.graphics.BitmapShader;
  7. import android.graphics.Canvas;
  8. import android.graphics.Paint;
  9. import android.graphics.drawable.Drawable;
  10. import android.util.AttributeSet;
  11. import android.view.MotionEvent;
  12. import android.view.View;
  14. /**
  15.  * Created by DMing on 2016/7/18.
  16.  *
  17.  */
  18. public class StarBar extends View{
  19.     private int starDistance = 0; //星星间距
  20.     private int starCount = 5;  //星星个数
  21.     private int starSize;     //星星高度大小，星星一般正方形，宽度等于高度
  22.     private float starMark = 0.0F;   //评分星星
  23.     private Bitmap starFillBitmap; //亮星星
  24.     private Drawable starEmptyDrawable; //暗星星
  25.     private OnStarChangeListener onStarChangeListener;//监听星星变化接口
  26.     private Paint paint;         //绘制星星画笔
  27.     private boolean integerMark = false;
  28.     public StarBar(Context context, AttributeSet attrs) {
  29.         super(context, attrs);
  30.         init(context, attrs);
  31.     }
  33.     public StarBar(Context context, AttributeSet attrs, int defStyleAttr) {
  34.         super(context, attrs, defStyleAttr);
  35.         init(context, attrs);
  36.     }
  38.     /**
  39.      * 初始化UI组件
  40.      *
  41.      * @param context
  42.      * @param attrs
  43.      */
  44.     private void init(Context context, AttributeSet attrs){
  45.         setClickable(true);
  46.         TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
  47.         this.starDistance = (int) mTypedArray.getDimension(R.styleable.RatingBar_starDistance, 0);
  48.         this.starSize = (int) mTypedArray.getDimension(R.styleable.RatingBar_starSize, 20);
  49.         this.starCount = mTypedArray.getInteger(R.styleable.RatingBar_starCount, 5);
  50.         this.starEmptyDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starEmpty);
  51.         this.starFillBitmap =  drawableToBitmap(mTypedArray.getDrawable(R.styleable.RatingBar_starFill));
  52.         mTypedArray.recycle();
  54.         paint = new Paint();
  55.         paint.setAntiAlias(true);
  56.         paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
  57.     }
  59.     /**
  60.      * 设置是否需要整数评分
  61.      * @param integerMark
  62.      */
  63.     public void setIntegerMark(boolean integerMark){
  64.         this.integerMark = integerMark;
  65.     }
  67.     /**
  68.      * 设置显示的星星的分数
  69.      *
  70.      * @param mark
  71.      */
  72.     public void setStarMark(float mark){
  73.         if (integerMark) {
  74.             starMark = (int)Math.ceil(mark);
  75.         }else {
  76.             starMark = Math.round(mark * 10) * 1.0f / 10;
  77.         }
  78.         if (this.onStarChangeListener != null) {
  79.             this.onStarChangeListener.onStarChange(starMark);  //调用监听接口
  80.         }
  81.         invalidate();
  82.     }
  84.     /**
  85.      * 获取显示星星的数目
  86.      *
  87.      * @return starMark
  88.      */
  89.     public float getStarMark(){
  90.         return starMark;
  91.     }
  94.     /**
  95.      * 定义星星点击的监听接口
  96.      */
  97.     public interface OnStarChangeListener {
  98.         void onStarChange(float mark);
  99.     }
  101.     /**
  102.      * 设置监听
  103.      * @param onStarChangeListener
  104.      */
  105.     public void setOnStarChangeListener(OnStarChangeListener onStarChangeListener){
  106.         this.onStarChangeListener = onStarChangeListener;
  107.     }
  109.     @Override
  110.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  111.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  112.         setMeasuredDimension(starSize * starCount + starDistance * (starCount - 1), starSize);
  113.     }
  115.     @Override
  116.     protected void onDraw(Canvas canvas) {
  117.         super.onDraw(canvas);
  118.         if (starFillBitmap == null || starEmptyDrawable == null) {
  119.             return;
  120.         }
  121.         for (int i = 0;i < starCount;i++) {
  122.             starEmptyDrawable.setBounds((starDistance + starSize) * i, 0, (starDistance + starSize) * i + starSize, starSize);
  123.             starEmptyDrawable.draw(canvas);
  124.         }
  125.         if (starMark > 1) {
  126.             canvas.drawRect(0, 0, starSize, starSize, paint);
  127.             if(starMark-(int)(starMark) == 0) {
  128.                 for (int i = 1; i < starMark; i++) {
  129.                     canvas.translate(starDistance + starSize, 0);
  130.                     canvas.drawRect(0, 0, starSize, starSize, paint);
  131.                 }
  132.             }else {
  133.                 for (int i = 1; i < starMark - 1; i++) {
  134.                     canvas.translate(starDistance + starSize, 0);
  135.                     canvas.drawRect(0, 0, starSize, starSize, paint);
  136.                 }
  137.                 canvas.translate(starDistance + starSize, 0);
  138.                 canvas.drawRect(0, 0, starSize * (Math.round((starMark - (int) (starMark))*10)*1.0f/10), starSize, paint);
  139.             }
  140.         }else {
  141.             canvas.drawRect(0, 0, starSize * starMark, starSize, paint);
  142.         }
  143.     }
  146.     @Override
  147.     public boolean onTouchEvent(MotionEvent event) {
  148.         int x = (int) event.getX();
  149.         if (x < 0) x = 0;
  150.         if (x > getMeasuredWidth()) x = getMeasuredWidth();
  151.         switch(event.getAction()){
  152.             case MotionEvent.ACTION_DOWN: {
  153.                 setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));
  154.                 break;
  155.             }
  156.             case MotionEvent.ACTION_MOVE: {
  157.                 setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));
  158.                 break;
  159.             }
  160.             case MotionEvent.ACTION_UP: {
  161.                 break;
  162.             }
  163.         }
  164.         invalidate();
  165.         return super.onTouchEvent(event);
  166.     }
  168.     /**
  169.      * drawable转bitmap
  170.      *
  171.      * @param drawable
  172.      * @return
  173.      */
  174.     private Bitmap drawableToBitmap(Drawable drawable)
  175.     {
  176.         if (drawable == null)return null;
  177.         Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);
  178.         Canvas canvas = new Canvas(bitmap);
  179.         drawable.setBounds(0, 0, starSize, starSize);
  180.         drawable.draw(canvas);
  181.         return bitmap;
  182.     }
  183. }

attrs的文件：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <declare-styleable name="RatingBar">
  4.         <!--星星间距-->
  5.         <attr format="dimension" name="starDistance"/>
  6.         <!--星星大小-->
  7.         <attr format="dimension" name="starSize"/>
  8.         <!--星星个数-->
  9.         <attr format="integer" name="starCount"/>
  10.         <!--星星空图-->
  11.         <attr format="reference" name="starEmpty"/>
  12.         <!--星星满图-->
  13.         <attr format="reference" name="starFill"/>
  14.     </declare-styleable>
  16. </resources>
  18. XML的使用方式：
  19.     <com.dming.starbar.StarBar
  20.         android:id="@+id/starBar"
  21.         android:layout_below="@+id/display"
  22.         android:layout_width="wrap_content"
  23.         android:layout_height="wrap_content"
  24.         ratingbar:starEmpty="@drawable/star_empty"
  25.         ratingbar:starFill="@drawable/star_full"
  26.         ratingbar:starDistance="5dp"
  27.         ratingbar:starCount="8"
  28.         ratingbar:starSize="30dp"/>

完！！！

发表评论

表情：
评论列表 （有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

    相关 android 自定义控件

    Android自定义View实现很简单 继承View，重写构造函数、onDraw，（onMeasure）等函数。 如果自定义的View需要有自定义的属性，需要在values

    墨蓝墨蓝/ 0 赞/ 419 阅读