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文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RatingBar">
        <attr name="ratingOrign" format="reference" />//初始图片
        <attr name="ratingChange" format="reference" />//评分改变图片
        <attr name="ratingCount" format="integer" />//星星数
    </declare-styleable>
</resources>

• layout布局文件引用控件

    <com.incall.apps.ratingbar.RatingBar
        android:id="@+id/rating_own"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="5dp"
        app:ratingOrign="@mipmap/rating"
        app:ratingChange="@mipmap/rating_click"
        app:ratingCount="5"/>

• 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