1.demo簡介

該demo是仿照淘寶，美團等電商平臺的星級評分控件。安卓已集成RatingBar控件，開發(fā)可以直接使用，該demo僅供學(xué)習(xí)使用。

2.圖片資源

rating.png

rating_click.png

3.設(shè)計思路

• 1.編寫attrs文件，自定義屬性：
• 2.在布局中使用該控件
• 3.編寫控件實現(xiàn)類
• 3.1.初始化屬性 ：mOrignPic：未點評時的星星圖，這里簡稱初始底圖；mChangePic：點評時的星星，這里簡稱變化圖
• 3.2.編寫onmeasure方法，注意添加padding值
• 3.3.編寫ondraw方法，繪制圖像，這里使用drawBitmap進行圖像繪制
• 4.編寫onTouchEvent方法
• 5.簡單優(yōu)化代碼

4.代碼實現(xiàn)

• 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" />//星星數(shù)
    </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(自定義控件實現(xiàn)類)

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;//星星個數(shù)
    private int mCurrentNumber = 0;//當(dāng)前分數(shù)
    private int mCurrtentCode = 0;//當(dāng)前分數(shù)記錄（優(yōu)化）
    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()表示焦點離當(dāng)前控件的x，getRawX()是焦點離屏幕的x
                mCurrentNumber = (int) (eventX / (mOrignPic.getWidth() + getPaddingRight())) + 1;
        }

        //優(yōu)化：減少ondraw方法調(diào)用
        if (mCurrtentCode == mCurrentNumber) {
            return true;
        }
        mCurrtentCode = mCurrentNumber;
        invalidate();
        return true;
    }
}

5.效果圖

RatingBar.gif