Android自定义星星评分控件

来源：互联网发布：淘宝话术技巧编辑：程序博客网时间：2024/05/20 22:41

转载：Android自定义星星评分控件
源码：http://download.csdn.net/detail/a756213932/9579325

星星评分控件的设计，大体规划为：
需要两张图片，一颗亮星星，一颗空星星；（当然图片不一定是星星，其他图片也可以，现在实验就用星星就好了）星星数量，间距可以自定义，星星的最小步进为0.1，在用户使用的时候与Android自带的方法一样。
星星控件大体分为两层，第一层空星星，第二层亮星星，第一层固定，第二层动态绘制，这样就可以实现评分。
在画星星的时候，由于在xml得出回来的对象是drawable,不必再转换为bitmap绘制，故直接绘制drawable，并且提升效率。
绘制drawable需要两个方法就够了
1、设置绘制到那里：
setBounds(int left ,int top , int right ,int bottom);
2、绘制：
draw(Canvas canvas);
经过一个for循环，五颗空星星就出来了，哈哈

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

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

经过一系列的实验，发现Drawable对象没有能指定绘制需要的部分，也就是不能绘制半颗星星（反正找不到，找到可以评论告诉我），然后就采用了折中的方法，把Drawable对象变为Bitmap这样就好办了，再利用BitmapShader，想绘制多少就绘制多上（就是实现0.1步进），下面为1/3颗的效果： 这里写图片描述 转换方法：private Bitmap drawableToBitmap(Drawable drawable)    {        if (drawable == null)return null;        Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(bitmap);        drawable.setBounds(0, 0, starSize, starSize);        drawable.draw(canvas);        return bitmap;    }把Bitmap转换为画笔绘制：    paint = new Paint();    paint.setAntiAlias(true);    paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));    在ondraw()方法绘制（三分之一个）canvas.drawRect(0,0,starSize/3,starSize,paint);原理就是这样，剩下就是逻辑问题了，以下为星星控件代码：

package cn.net.cnea.transportcapacitycooldemo.widget;import android.view.View;/** * Created by lyx on 2017/4/6 0006. */import android.content.Context;import android.content.res.TypedArray;import android.graphics.Bitmap;import android.graphics.BitmapShader;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.MotionEvent;import cn.net.cnea.transportcapacitycooldemo.R;/** * Created by DMing on 2016/7/18. * */public class StarBar extends View{    private int starDistance = 0; //星星间距    private int starCount = 5;  //星星个数    private int starSize;     //星星高度大小，星星一般正方形，宽度等于高度    private float starMark = 0.0F;   //评分星星    private Bitmap starFillBitmap; //亮星星    private Drawable starEmptyDrawable; //暗星星    private OnStarChangeListener onStarChangeListener;//监听星星变化接口    private Paint paint;         //绘制星星画笔    private boolean integerMark = false;    public StarBar(Context context, AttributeSet attrs) {        super(context, attrs);        init(context, attrs);    }    public StarBar(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context, attrs);    }    /**     * 初始化UI组件     *     * @param context     * @param attrs     */    private void init(Context context, AttributeSet attrs){        setClickable(true);        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);        this.starDistance = (int) mTypedArray.getDimension(R.styleable.RatingBar_starDistance, 0);        this.starSize = (int) mTypedArray.getDimension(R.styleable.RatingBar_starSize, 20);        this.starCount = mTypedArray.getInteger(R.styleable.RatingBar_starCount, 5);        this.starEmptyDrawable = mTypedArray.getDrawable(R.styleable.RatingBar_starEmpty);        this.starFillBitmap =  drawableToBitmap(mTypedArray.getDrawable(R.styleable.RatingBar_starFill));        mTypedArray.recycle();        paint = new Paint();        paint.setAntiAlias(true);        paint.setShader(new BitmapShader(starFillBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));    }    /**     * 设置是否需要整数评分     * @param integerMark     */    public void setIntegerMark(boolean integerMark){        this.integerMark = integerMark;    }    /**     * 设置显示的星星的分数     *     * @param mark     */    public void setStarMark(float mark){        if (integerMark) {            starMark = (int)Math.ceil(mark);        }else {            starMark = Math.round(mark * 10) * 1.0f / 10;        }        if (this.onStarChangeListener != null) {            this.onStarChangeListener.onStarChange(starMark);  //调用监听接口        }        invalidate();    }    /**     * 获取显示星星的数目     *     * @return starMark     */    public float getStarMark(){        return starMark;    }    /**     * 定义星星点击的监听接口     */    public interface OnStarChangeListener {        void onStarChange(float mark);    }    /**     * 设置监听     * @param onStarChangeListener     */    public void setOnStarChangeListener(OnStarChangeListener onStarChangeListener){        this.onStarChangeListener = onStarChangeListener;    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        setMeasuredDimension(starSize * starCount + starDistance * (starCount - 1), starSize);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (starFillBitmap == null || starEmptyDrawable == null) {            return;        }        for (int i = 0;i < starCount;i++) {            starEmptyDrawable.setBounds((starDistance + starSize) * i, 0, (starDistance + starSize) * i + starSize, starSize);            starEmptyDrawable.draw(canvas);        }        if (starMark > 1) {            canvas.drawRect(0, 0, starSize, starSize, paint);            if(starMark-(int)(starMark) == 0) {                for (int i = 1; i < starMark; i++) {                    canvas.translate(starDistance + starSize, 0);                    canvas.drawRect(0, 0, starSize, starSize, paint);                }            }else {                for (int i = 1; i < starMark - 1; i++) {                    canvas.translate(starDistance + starSize, 0);                    canvas.drawRect(0, 0, starSize, starSize, paint);                }                canvas.translate(starDistance + starSize, 0);                canvas.drawRect(0, 0, starSize * (Math.round((starMark - (int) (starMark))*10)*1.0f/10), starSize, paint);            }        }else {            canvas.drawRect(0, 0, starSize * starMark, starSize, paint);        }    }//禁止点击评分//    @Override//    public boolean onTouchEvent(MotionEvent event) {//        int x = (int) event.getX();//        if (x < 0) x = 0;//        if (x > getMeasuredWidth()) x = getMeasuredWidth();//        switch(event.getAction()){//            case MotionEvent.ACTION_DOWN: {//                setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));//                break;//            }//            case MotionEvent.ACTION_MOVE: {//                setStarMark(x*1.0f / (getMeasuredWidth()*1.0f/starCount));//                break;//            }//            case MotionEvent.ACTION_UP: {//                break;//            }//        }//        invalidate();//        return super.onTouchEvent(event);//    }    /**     * drawable转bitmap     *     * @param drawable     * @return     */    private Bitmap drawableToBitmap(Drawable drawable)    {        if (drawable == null)return null;        Bitmap bitmap = Bitmap.createBitmap(starSize, starSize, Bitmap.Config.ARGB_8888);        Canvas canvas = new Canvas(bitmap);        drawable.setBounds(0, 0, starSize, starSize);        drawable.draw(canvas);        return bitmap;    }}

attrs的文件：

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="RatingBar">        <!--星星间距-->        <attr format="dimension" name="starDistance"/>        <!--星星大小-->        <attr format="dimension" name="starSize"/>        <!--星星个数-->        <attr format="integer" name="starCount"/>        <!--星星空图-->        <attr format="reference" name="starEmpty"/>        <!--星星满图-->        <attr format="reference" name="starFill"/>    </declare-styleable></resources>

XML的使用方式：

   <com.dming.starbar.StarBar        android:id="@+id/starBar"        android:layout_below="@+id/display"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        ratingbar:starEmpty="@drawable/star_empty"        ratingbar:starFill="@drawable/star_full"        ratingbar:starDistance="5dp"        ratingbar:starCount="8"        ratingbar:starSize="30dp"/>

0 0