自定義評(píng)分條（實(shí)現(xiàn)方式二）-CustomAnimRatingBar

接著上一篇博客http://blog.csdn.net/sdfdzx/article/details/75447981,由于需求變動(dòng)，需要星星在滑動(dòng)的時(shí)候能夠有動(dòng)畫(huà)效果，由于CustomRatingBar是基于自定義View，實(shí)現(xiàn)onDraw繪制而成，實(shí)現(xiàn)動(dòng)畫(huà)效果比較困難，所以只能考慮從用另一個(gè)方式實(shí)現(xiàn)這個(gè)組件，這篇博文就是用ViewGroup實(shí)現(xiàn)自定義評(píng)分條并且實(shí)現(xiàn)動(dòng)畫(huà)效果。

功能特性
效果

1.可設(shè)置星星大小
2.可設(shè)置星星之間的間距
3.可以設(shè)置星星圖片（填充圖片和半填充圖片）
4.可以設(shè)置星星是否可觸摸評(píng)分
5.可設(shè)置評(píng)分范圍（整顆 | 半顆 ） 此處不支持隨意
6.可以設(shè)置總星量

實(shí)現(xiàn)思路

1.利用自定義ViewGroup繼承LinearLayout,動(dòng)態(tài)添加ImageView實(shí)現(xiàn)。
2.根據(jù)進(jìn)度動(dòng)態(tài)設(shè)置ImageView的圖片背景。
3.重寫(xiě)onTouchEvent,利用屬性動(dòng)畫(huà)在MOVE事件時(shí)實(shí)現(xiàn)動(dòng)畫(huà)效果。

實(shí)現(xiàn)難點(diǎn)

1.觸摸進(jìn)度的判斷。
2.屬性動(dòng)畫(huà)的實(shí)現(xiàn)。
3.一定的滑動(dòng)沖突處理。

整體代碼

package com.study.dzx.library.widget;

import android.animation.ObjectAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.study.dzx.library.R;
import com.study.dzx.library.utils.DensityUtils;


/**
 * Author : Xuan.
 * Data : 2017/7/12.
 * Description :
 * 星星評(píng)分-viewgroup
 * -可動(dòng)畫(huà)
 */

public class CustomAnimRatingBar extends LinearLayout {
    //星星個(gè)數(shù)
    private int mStarNum;
    //星星之間的距離
    private int mStarDistance;
    //星星的大小
    private int mStarSize;
    //空星星圖片
    private Drawable mEmptyStar;
    //填充的星星的照片
    private Drawable mFillStar;
    //半個(gè)星星的圖片
    private Drawable mHalfStar;
    //星星的進(jìn)度
    private float mTouchStarMark;
    //上次的星星進(jìn)度
    private float mLastMark;
    //是否顯示半個(gè)
    private boolean mShowHalf;
    //顯示星星的個(gè)數(shù)
    private int mShowNum;
    //觸摸模式 1--單個(gè)星星 2--半個(gè)星星
    private int mMode;
    //是否可以觸摸
    private boolean mTouchAble;

    private int mLastX;
    private int mLastY;

    //星星變化接口
    public interface onStarChangedListener {
        void onStarChange(CustomAnimRatingBar ratingBar, float mark);
    }

    private onStarChangedListener mOnStarChangeListener;

    public void setmOnStarChangeListener(onStarChangedListener mOnStarChangeListener) {
        this.mOnStarChangeListener = mOnStarChangeListener;
    }

    private Context mContext;

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

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

    public CustomAnimRatingBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        setOrientation(HORIZONTAL);
        initAttr(context, attrs);
        initView();
    }

    /**
     * 和ScrollView嵌套時(shí)滑動(dòng)沖突
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:{
                getParent().requestDisallowInterceptTouchEvent(true);
                break;
            }
            case MotionEvent.ACTION_MOVE:{
                int deltaX = x - mLastX;
                int deltaY = y - mLastY;
                if (Math.abs(deltaX) > Math.abs(deltaY)) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }else {
                    getParent().requestDisallowInterceptTouchEvent(false);
                }
            }

        }
        mLastX = x;
        mLastY = y;
        return super.dispatchTouchEvent(ev);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!mTouchAble) {
            return super.onTouchEvent(event);
        }
        float x = event.getX();
        float touchStar = x / getWidth() * mStarNum;
        if (touchStar <= 0.5f) {
            touchStar = 0.5f;
        }
        if (touchStar > mStarNum) {
            touchStar = mStarNum;
        }

        switch (mMode) {
            case 1://整個(gè)星星
            {
                touchStar = (float) Math.ceil(touchStar);
                break;
            }
            case 2://half
            {
                if ((touchStar - Math.floor(touchStar) <= 0.5)&& touchStar - Math.floor(touchStar)!=0) {
                    touchStar = (float) (Math.floor(touchStar) + 0.5f);
                } else {
                    touchStar = (float) Math.ceil(touchStar);
                }
                break;
            }
        }

        mShowHalf = false;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                setRating(touchStar);
                ObjectAnimator
                        .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                        .setDuration(300).start();
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                setRating(touchStar);
                if (mTouchStarMark != mLastMark) {
                    ObjectAnimator
                            .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                            .setDuration(300).start();
                }
                mLastMark = mTouchStarMark;
                break;
            }
            case MotionEvent.ACTION_UP: {
                break;
            }

        }
        return true;
    }

    private void fillStar() {
        mShowNum = (int) Math.ceil(mTouchStarMark);
        if ((mTouchStarMark - Math.floor(mTouchStarMark)) <= 0.5f &&
                mTouchStarMark - Math.floor(mTouchStarMark) != 0) {
            mShowNum = (int) Math.ceil(mTouchStarMark);
            mShowHalf = true;
        }
        for (int i = 0; i < mShowNum - 1; i++) {
            ((ImageView) getChildAt(i)).setImageDrawable(mFillStar);
        }
        if (mShowHalf) {
            ((ImageView) getChildAt(mShowNum - 1)).setImageDrawable(mHalfStar);
        } else {
            ((ImageView) getChildAt(mShowNum - 1)).setImageDrawable(mFillStar);
        }

        resetView();
    }

    /**
     * 設(shè)置評(píng)分
     */
    public void setRating(float touchStar) {

        if (mOnStarChangeListener != null) {
            this.mOnStarChangeListener.onStarChange(this, touchStar);
        }
        mTouchStarMark = touchStar;
        fillStar();
    }

    /**
     * 獲得評(píng)分
     */
    public float getRating() {
        return mTouchStarMark;
    }

    /**
     * 設(shè)置是否可以點(diǎn)擊
     */
    public void setTouchAble(boolean mTouchAble) {
        this.mTouchAble = mTouchAble;
    }

    /**
     * 重置空白星星
     */
    private void resetView() {
        for (int i = mStarNum - 1; i > mShowNum - 1; i--) {
            ((ImageView) getChildAt(i)).setImageDrawable(mEmptyStar);
        }
    }

    private void initView() {
        for (int i = 0; i < mStarNum; i++) {
            ImageView iv = new ImageView(mContext);
            LayoutParams layoutParams = new LayoutParams(mStarSize
                    , mStarSize);
            layoutParams.gravity = Gravity.CENTER_VERTICAL;
            layoutParams.setMargins(mStarDistance / 2, 0, mStarDistance / 2, 0);
            iv.setLayoutParams(layoutParams);
            iv.setImageDrawable(mEmptyStar);
            this.addView(iv);
        }
    }

    private void initAttr(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomAnimRatingBar);
        mStarNum = array.getInteger(R.styleable.CustomAnimRatingBar_starAnimNum, 5);
        mStarDistance = array.getDimensionPixelSize(R.styleable.CustomAnimRatingBar_starAnimDistance, DensityUtils.dp2px(context, 0));
        mStarSize = array.getDimensionPixelSize(R.styleable.CustomAnimRatingBar_starAnimSize, DensityUtils.dp2px(context, 20));
        mEmptyStar = array.getDrawable(R.styleable.CustomAnimRatingBar_starAnimEmpty);
        mFillStar = array.getDrawable(R.styleable.CustomAnimRatingBar_starAnimFill);
        mHalfStar = array.getDrawable(R.styleable.CustomAnimRatingBar_starAnimHalf);
        mMode = array.getInt(R.styleable.CustomAnimRatingBar_modeAnim, 2);
        mTouchAble = array.getBoolean(R.styleable.CustomAnimRatingBar_touchAbleAnim, true);
        mTouchStarMark = array.getInt(R.styleable.CustomAnimRatingBar_ratingAnimProgress, 0);
        array.recycle();
        this.mContext = context;
        if (mMode == 1) {
            mHalfStar = mFillStar;
        }
    }
}

關(guān)鍵代碼

1.initView方法
private void initView() {
    for (int i = 0; i < mStarNum; i++) {
        ImageView iv = new ImageView(mContext);
        LayoutParams layoutParams = new LayoutParams(mStarSize
                , mStarSize);
        layoutParams.gravity = Gravity.CENTER_VERTICAL;
        layoutParams.setMargins(mStarDistance / 2, 0, mStarDistance / 2, 0);
        iv.setLayoutParams(layoutParams);
        iv.setImageDrawable(mEmptyStar);
        this.addView(iv);
    }
}

根據(jù)對(duì)應(yīng)的星星數(shù)量，動(dòng)態(tài)添加ImageView作為為灰的星星，并且利用LayoutParams來(lái)設(shè)置星星的大小和星星之間的間距。

2.onTouchEvent()
@Override
public boolean onTouchEvent(MotionEvent event) {
    if (!mTouchAble) {
        return super.onTouchEvent(event);
    }
    float x = event.getX();
    float touchStar = x / getWidth() * mStarNum;
    if (touchStar <= 0.5f) {
        touchStar = 0.5f;
    }
    if (touchStar > mStarNum) {
        touchStar = mStarNum;
    }

    switch (mMode) {
        case 1://整個(gè)星星
        {
            touchStar = (float) Math.ceil(touchStar);
            break;
        }
        case 2://half
        {
            if ((touchStar - Math.floor(touchStar) <= 0.5)&& touchStar - Math.floor(touchStar)!=0) {
                touchStar = (float) (Math.floor(touchStar) + 0.5f);
            } else {
                touchStar = (float) Math.ceil(touchStar);
            }
            break;
        }
    }

    mShowHalf = false;
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN: {
            setRating(touchStar);
            ObjectAnimator
                    .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                    .setDuration(300).start();
            break;
        }
        case MotionEvent.ACTION_MOVE: {
            setRating(touchStar);
            if (mTouchStarMark != mLastMark) {
                ObjectAnimator
                        .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                        .setDuration(300).start();
            }
            mLastMark = mTouchStarMark;
            break;
        }
        case MotionEvent.ACTION_UP: {
            break;
        }

    }
    return true;
}

1)首先得到觸摸的坐標(biāo)，利用觸摸的坐標(biāo)x/組件的長(zhǎng)度 * 星星的總個(gè)數(shù)得到需要的星星進(jìn)度。

float touchStar = x / getWidth() * mStarNum;

2)區(qū)分整個(gè)星星還是半顆星星

  switch (mMode) {
            case 1://整個(gè)星星
            {
                touchStar = (float) Math.ceil(touchStar);
                break;
            }
            case 2://half
            {
                if ((touchStar - Math.floor(touchStar) <= 0.5)&& touchStar - Math.floor(touchStar)!=0) {
                    touchStar = (float) (Math.floor(touchStar) + 0.5f);
                } else {
                    touchStar = (float) Math.ceil(touchStar);
                }
                break;
            }
        }

如果是整顆星星模式，則將進(jìn)度直接向上取整。
如果是半顆星星，對(duì)于小數(shù)位大于0.5的就向上取整，對(duì)于小數(shù)位小于0.5的就將整數(shù)位向下取整，再加0.5的進(jìn)度。

3）

switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                setRating(touchStar);
                ObjectAnimator
                        .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                        .setDuration(300).start();
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                setRating(touchStar);
                if (mTouchStarMark != mLastMark) {
                    ObjectAnimator
                            .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                            .setDuration(300).start();
                }
                mLastMark = mTouchStarMark;
                break;
            }
            case MotionEvent.ACTION_UP: {
                break;
            }

        }

首先看setRating方法

 /**
     * 設(shè)置評(píng)分
     */
    public void setRating(float touchStar) {

        if (mOnStarChangeListener != null) {
            this.mOnStarChangeListener.onStarChange(this, touchStar);
        }
        mTouchStarMark = touchStar;
        fillStar();
    }

這里面進(jìn)行接口回調(diào)，并且進(jìn)行星星圖片的填充。對(duì)應(yīng)fillStar()方法

 private void fillStar() {
        mShowNum = (int) Math.ceil(mTouchStarMark);
        if ((mTouchStarMark - Math.floor(mTouchStarMark)) <= 0.5f &&
                mTouchStarMark - Math.floor(mTouchStarMark) != 0) {
            mShowNum = (int) Math.ceil(mTouchStarMark);
            mShowHalf = true;
        }
        for (int i = 0; i < mShowNum - 1; i++) {
            ((ImageView) getChildAt(i)).setImageDrawable(mFillStar);
        }
        if (mShowHalf) {
            ((ImageView) getChildAt(mShowNum - 1)).setImageDrawable(mHalfStar);
        } else {
            ((ImageView) getChildAt(mShowNum - 1)).setImageDrawable(mFillStar);
        }

        resetView();
    }

這里的處理方法同CustomRatingBar，例如一個(gè)進(jìn)度是3.5，則先填充3，最后填充0.5個(gè)星星。如果是4，則先填充3，最后填充1個(gè)星星。

  /**
     * 重置空白星星
     */
    private void resetView() {
        for (int i = mStarNum - 1; i > mShowNum - 1; i--) {
            ((ImageView) getChildAt(i)).setImageDrawable(mEmptyStar);
        }
    }

resetView則將剩余的空白星星制空。

   ObjectAnimator
                        .ofFloat(getChildAt(mShowNum - 1), "translationY", 0, -20, 0)
                        .setDuration(300).start();

setRating方法執(zhí)行完，則執(zhí)行動(dòng)畫(huà)效果，這里利用屬性動(dòng)畫(huà)里面的translationY，進(jìn)行跳動(dòng)效果，具體的動(dòng)畫(huà)效果也可以在此處進(jìn)行相應(yīng)的修改。

    /**
     * 和ScrollView嵌套時(shí)滑動(dòng)沖突
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:{
                getParent().requestDisallowInterceptTouchEvent(true);
                break;
            }
            case MotionEvent.ACTION_MOVE:{
                int deltaX = x - mLastX;
                int deltaY = y - mLastY;
                if (Math.abs(deltaX) > Math.abs(deltaY)) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }else {
                    getParent().requestDisallowInterceptTouchEvent(false);
                }
            }

        }
        mLastX = x;
        mLastY = y;
        return super.dispatchTouchEvent(ev);
    }

這里涉及到一個(gè)滑動(dòng)沖突問(wèn)題，就是當(dāng)該組件和ScrollView嵌套時(shí)，向下的ScrollView滑動(dòng)和橫向的星星滑動(dòng)，當(dāng)歇著滑動(dòng)的時(shí)候，就會(huì)出現(xiàn)星星的滑動(dòng)被ScrollView消費(fèi)，導(dǎo)致無(wú)法觸動(dòng)星星的滑動(dòng)。所以為了解決這個(gè)問(wèn)題，就需要處理滑動(dòng)沖突。
可以看到這里重寫(xiě)了dispathTouchEvent（）,利用requestDisallowInterceptTouchEvent（true）進(jìn)行攔截。這里的處理邏輯就是，當(dāng)DOWN事件時(shí)進(jìn)行攔截，交給星星處理，當(dāng)是MOVE事件時(shí)，對(duì)滑動(dòng)的X和Y軸的方向的距離進(jìn)行判斷，如果X>Y，則進(jìn)行攔截，如果Y>X，則交給ScrollView處理。

總結(jié)

這里大體的實(shí)現(xiàn)思路分析完了，總的來(lái)說(shuō)沒(méi)有特別的難點(diǎn)，主要就是處理自定義組件的細(xì)節(jié)問(wèn)題需要多注意，多在細(xì)節(jié)進(jìn)行優(yōu)化。這里提供Github地址https://github.com/sdfdzx/CustomRatingBar/blob/master/library/src/main/java/com/study/dzx/library/widget/CustomAnimRatingBar.java

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,197評(píng)論 4贊 61
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,954評(píng)論 25贊 709
  • 2017/03/10【打卡】 12#夏天第309天1.記錄?哥哥千里開(kāi)車回來(lái)，昨夜到家，明天又將離開(kāi)，晚上家人聚餐...
    Grit888閱讀 152評(píng)論 0贊 0
  • 我們家養(yǎng)的雞、狗、貓什么的，都是村子里長(zhǎng)得最肥壯的，別人都很羨慕，都問(wèn)有什么訣竅，可是我知道，哪有什么秘訣啊，只不...
    星空22閱讀 368評(píng)論 1贊 2
  • Chapter 1. 專業(yè)主義 作為一名“專業(yè)人士”，不僅僅是一種榮耀，它更多的意味著義務(wù)，正所謂欲戴王冠,必承其...
    Misa527528閱讀 5,324評(píng)論 13贊 17

友情鏈接更多精彩內(nèi)容