1. 說明

基于我們前邊寫的自定義View的入門、自定義TextView、仿QQ運動步數(shù)、玩轉字體變色、類似QQ運動步數(shù)進度條、3個形狀來回切換等自定義View外，這節(jié)課我們來寫一個評分控件，類似于淘寶、騰訊課堂的評分控件 —— RatingBar。

我們前邊寫的上邊的6個效果，都屬于靜態(tài)自定義View控件，不涉及用戶去觸摸該控件；
但是，從這節(jié)課開始，我們所寫的效果就屬于交互控件，何為交互控件？ 就是用戶可以在這個控件上邊去觸摸，即就是按下、移動、抬起。

2. 效果圖如下：

剛開始進入app是一個圖片都沒有選中，如圖所示：

圖片.png

手指觸摸后，就選中觸摸的圖片，如圖所示：

圖片.png

3. 思路分析

3.1：首先剛進來是初始化的樣子：

1>：就是只有5張未被選中的圖片，這里需要自定義屬性、2張圖片資源、評分的等級數(shù)量；
2>：指定控件的寬高；
3>：繪制圖片Bitmap；

3.2：需要在onTouch()方法中處理用戶和該控件的交互事件；

3.3：優(yōu)化部分：

1>：如果分數(shù)相同，就不需要再去繪制了；
2>：就是盡量減少onDraw()方法的調用；
3>：onTouchEvent()方法必須return true，如果返回false，就表示事件不消費，第一次可以進入MotionEvent.ACTION_MOVE事件，以后就不能進來了，所以這里必須return true，并且以后只要是自定義View，并且凡是涉及到用戶觸摸事件，onTouchEvent()方法都return true；

4. 代碼如下

自定義RatingBar.java代碼如下：

/**
 * Email: 2185134304@qq.com
 * Created by JackChen 2018/3/19 15:01
 * Version 1.0
 * Params:
 * Description:  評分控件RatingBar
*/

public class RatingBar extends View {


    // 用BitmapFactory 解析出來的沒有選中的圖片
    private Bitmap mStarNormalBitmap;
    // 用BitmapFactory 解析出來的已經(jīng)選中的圖片
    private Bitmap mStarFocusBitmap;
    // 總共的分數(shù)
    private int mGradeNumber = 5 ;
    // 當前的分數(shù)
    private int mCurrentNumber = 0 ;


    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) {
        super(context, attrs, defStyleAttr);

        // 以下是獲取自定義屬性
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RatingBar);
        // 獲取資源id
        int starNormalId = array.getResourceId(R.styleable.RatingBar_starNormal, 0);
        if (starNormalId == 0){
            throw new RuntimeException("請設置屬性 starNormal") ;
        }
        // 用BitmapFactory 解析資源
        mStarNormalBitmap = BitmapFactory.decodeResource(getResources(), starNormalId);


        int starFocusId = array.getResourceId(R.styleable.RatingBar_starFocus, 0);
        if (starFocusId == 0){
            throw new RuntimeException("請設置屬性 starFocus") ;
        }
        // 用BitmapFactory 解析資源
        mStarFocusBitmap = BitmapFactory.decodeResource(getResources(), starFocusId);

        // 獲取分數(shù)
        mGradeNumber = array.getInt(R.styleable.RatingBar_gradeNumber , mGradeNumber) ;
        array.recycle();

    }


    /**
     * 測量控件的寬高
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        // 控件的寬度
        int width = mStarFocusBitmap.getWidth() * mGradeNumber;
        int height = mStarFocusBitmap.getHeight();
        setMeasuredDimension(width , height);
    }


    /**
     * 畫選中的圖片和未選中的圖片
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
//        super.onDraw(canvas);
        for (int i = 0; i < mGradeNumber; i++) {
            // i * 星星的寬度
            int x = i * mStarFocusBitmap.getWidth() ;

            // 觸摸的時候 mCurrentGrade的值是不斷變化的
            if (mCurrentNumber > i){
                canvas.drawBitmap(mStarFocusBitmap , x , 0 , null);
            }else{
                canvas.drawBitmap(mStarNormalBitmap , x , 0 , null);
            }
        }
    }


    /**
     * 處理用戶觸摸
     * 移動、按下、抬起，處理邏輯都是一樣的，判斷手指的位置，根據(jù)當前位置計算出分數(shù)，然后去刷新并顯示
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
//            case MotionEvent.ACTION_DOWN:   // 盡量減少onDraw()方法的調用
            case MotionEvent.ACTION_MOVE:
//            case MotionEvent.ACTION_UP:    // 盡量減少onDraw()

                // 手指的位置，計算當前的分數(shù)
                float moveX = event.getX();
                // 計算當前分數(shù)
                int currentGrade = (int) (moveX/mStarFocusBitmap.getWidth()+1);

                //范圍問題
                if (currentGrade < 0){
                    currentGrade = 0 ;
                }

                if (currentGrade > mGradeNumber){
                    currentGrade = mGradeNumber ;
                }

                // 分數(shù)相同的情況下，就不要再去繪制了，盡量減少onDraw()方法的調用
                if (currentGrade == mGradeNumber){
                    return true ;
                }

                // 判斷完異常情況之后，最后記錄當前分數(shù)，然后重新繪制
                mCurrentNumber = currentGrade ;
                invalidate();    // 因為 invalidate()方法會調用
                break;
        }
        return true;
    }
}

attrs.xml資源文件如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="RatingBar">

        <attr name="starNormal" format="reference"/>
        <attr name="starFocus" format="reference"/>
        <attr name="gradeNumber" format="integer"/>
    </declare-styleable>
</resources>

直接在activity_main.xml布局文件中引用該RatingBar控件即可：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jackchen.view_day06_2.MainActivity">

    <com.jackchen.view_day06_2.RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:starNormal="@drawable/star_normal"
        app:starFocus="@drawable/star_selected"
        app:gradeNumber="5"
        />

</RelativeLayout>

具體代碼已上傳至github：
https://github.com/shuai999/View_day06_2.git