自定义控件-星级评分（仿淘宝，美团）

1.demo简介

该demo是仿照淘宝，美团等电商平台的星级评分控件。安卓已集成RatingBar控件，开发可以直接使用，该demo仅供学习使用。

2.图片资源

rating.png

rating_click.png

3.设计思路

• 1.编写attrs文件，自定义属性：
• 2.在布局中使用该控件
• 3.编写控件实现类
• 3.1.初始化属性 ：mOrignPic：未点评时的星星图，这里简称初始底图；mChangePic：点评时的星星，这里简称变化图
• 3.2.编写onmeasure方法，注意添加padding值
• 3.3.编写ondraw方法，绘制图像，这里使用drawBitmap进行图像绘制
• 4.编写onTouchEvent方法
• 5.简单优化代码

4.代码实现

• attrs文件

    
        //初始图片
        //评分改变图片
        //星星数
    

• layout布局文件引用控件

• RatingBar.class(自定义控件实现类)

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;
public class RatingBar extends View {

    private Bitmap mOrignPic; //初始底图
    private Bitmap mChangePic;//变化图
    private int mCount = 5;//星星个数
    private int mCurrentNumber = 0;//当前分数
    private int mCurrtentCode = 0;//当前分数记录（优化）
    private Paint mOriginPaint, mChangePaint;//定义画笔

    public RatingBar(Context context) {
        this(context, null);
    }

    public RatingBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public RatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }


    /**
     * 初始化
     */
    private void init(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
        int mOrignPicId = array.getResourceId(R.styleable.RatingBar_ratingOrign, 0);
        int mChangePicId = array.getResourceId(R.styleable.RatingBar_ratingChange, 0);
        mOrignPic = BitmapFactory.decodeResource(getResources(), mOrignPicId);
        mChangePic = BitmapFactory.decodeResource(getResources(), mChangePicId);
        mCount = array.getInt(R.styleable.RatingBar_ratingCount, 5);
        mOriginPaint = new Paint();
        mOriginPaint.setAntiAlias(true);

        mChangePaint = new Paint();
        mChangePaint.setAntiAlias(true);
        array.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = (mOrignPic.getWidth() + getPaddingRight()) * mCount;
        int height = mOrignPic.getHeight();
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int x = mOrignPic.getWidth() + getPaddingRight();
        //绘制初始底图
        for (int i = 0; i < mCount; i++) {
            if (mCurrentNumber > i) {
                canvas.drawBitmap(mChangePic, i * x, 0, mChangePaint);
            } else {
                canvas.drawBitmap(mOrignPic, i * x, 0, mOriginPaint);
            }

        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                float eventX = event.getX();//getX()表示焦点离当前控件的x，getRawX()是焦点离屏幕的x
                mCurrentNumber = (int) (eventX / (mOrignPic.getWidth() + getPaddingRight())) + 1;
        }

        //优化：减少ondraw方法调用
        if (mCurrtentCode == mCurrentNumber) {
            return true;
        }
        mCurrtentCode = mCurrentNumber;
        invalidate();
        return true;
    }
}

5.效果图

RatingBar.gif