53.星級評分條

時間 2019-12-05

標籤星級評分简体版

原文原文鏈接

【實際效果圖】

1.相關資源：

/**
 * 自定義View的幾個重要方法步驟：
 * 1、構造方法 建立 對象：據使用的那種方式調用那種方法
 * 2、獲取View的大小 ：onMeasure(int,int)
 * 3、肯定View的位置，view自身有必定的權力，可是決定權在父佈局上 ： onLayout();
 * 4、繪製View的內容：onDraw(Canvas)
 */
//自定義控件---星級評分條（只用於顯示,不可拖動）
public class MyRatingBar extends View {
    private Paint paint;//畫筆

    private float rateNum;//當前星級值（0~5）
    private int stepSizeType;//步長類型
    private Bitmap starYesBitmap;//滿星圖片
    private Bitmap starNoBitmap;//無星圖片
    private Bitmap starHalfBitmap;//半星圖片

    //此處的final整數值應該與attr裏面的屬性枚舉值保持一致
    public final static int halfStar = 0;//有半星
    public final static int fullStar = 1;//無半星

    /**
     * 在佈局文件中使用自定義的view時，調用此構造方法
     */
    public MyRatingBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        //獲取自定義屬性
        TypedArray typeArray = context.obtainStyledAttributes(attrs, R.styleable.MyRatingBar);//獲取屬性命名空間
        rateNum = typeArray.getFloat(R.styleable.MyRatingBar_rateNum, 0);//獲取屬性值-星級值
        stepSizeType = typeArray.getInt(R.styleable.MyRatingBar_stepSizeType, 0);//獲取屬性值-步長類型

        int starYesID = typeArray.getResourceId(R.styleable.MyRatingBar_star_yes, R.drawable.star_yes);
        int starNoID = typeArray.getResourceId(R.styleable.MyRatingBar_star_no, R.drawable.star_no);
        int starHalfID = typeArray.getResourceId(R.styleable.MyRatingBar_star_half, R.drawable.star_half);
        starYesBitmap = BitmapFactory.decodeResource(getResources(), starYesID);
        starNoBitmap = BitmapFactory.decodeResource(getResources(), starNoID);
        starHalfBitmap = BitmapFactory.decodeResource(getResources(), starHalfID);

        initView();
    }

    /**
     * 初始化視圖數據
     */
    private void initView() {
        paint = new Paint();
        paint.setAntiAlias(true);//設置抗鋸齒

        //自定義屬性若想屬性生效，必須刷新狀態
        flushState();
    }

    /**
     * 測量View的大小
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(starNoBitmap.getWidth() * 5, starNoBitmap.getHeight() * 1);
    }


    /**
     * 肯定View的位置
     */
    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        //自定義view的時候，通常來講做用不大,故此處不作任何處理
        super.onLayout(changed, left, top, right, bottom);
    }

    /**
     * 繪製View的內容
     */
    @Override
    protected void onDraw(Canvas canvas) {
        int starWidth = starNoBitmap.getWidth();
        //無半星
        if (stepSizeType == 1) {
            int index = (int) (rateNum / 1);
            for (int i = 0; i < 5; i++) {
                if (i < index) {
                    canvas.drawBitmap(starYesBitmap, starWidth * i, 0, paint);//設置第i顆星爲滿星
                } else {
                    canvas.drawBitmap(starNoBitmap, starWidth * i, 0, paint);//設置第i顆星爲無星
                }
            }
        }
        //有半星
        else if (stepSizeType == 0) {
            int index = (int) (rateNum / 0.5);
            for (int i = 0; i < 5; i++) {
                if (i * 2 < index) {
                    if (i * 2 <= (index - 2)) {
                        canvas.drawBitmap(starYesBitmap, starWidth * i, 0, paint);//設置第i顆星爲滿星
                    } else {
                        canvas.drawBitmap(starHalfBitmap, starWidth * i, 0, paint);//設置第i顆星爲半星
                    }
                } else {
                    canvas.drawBitmap(starNoBitmap, starWidth * i, 0, paint);//設置第i顆星爲無星
                }

            }

        }


    }

    /**
     * 監聽手勢事件
     *
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

    /**
     * 刷新View的狀態
     */
    private void flushState() {
        //刷新View,因本例子比較簡單，因此flushState()沒啥用，只是跳到了flushView()而已，不過複雜點的控件的話，仍是將刷新狀態和刷新視圖分開比較好
        flushView();
    }

    /**
     * 刷新View的內容
     */
    private void flushView() {
        //刷新界面,會從新調用onDraw()方法,不在UI線程中刷新界面得使用postInvalidate().
        invalidate();
    }

    public void setRateNum(float rateNum) {
        this.rateNum = rateNum;
        flushState();
    }

    public void setStepSizeType(int stepSizeType) {
        this.stepSizeType = stepSizeType;
        flushState();
    }

    public void setStarYesBitmap(Bitmap starYesBitmap) {
        this.starYesBitmap = starYesBitmap;
        flushState();
    }

    public void setStarNoBitmap(Bitmap starNoBitmap) {
        this.starNoBitmap = starNoBitmap;
        flushState();
    }

    public void setStarHalfBitmap(Bitmap starHalfBitmap) {
        this.starHalfBitmap = starHalfBitmap;
        flushState();
    }
}

自定義屬性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyRatingBar">
        <attr name="rateNum" format="float"/>
        <attr name="stepSizeType" >
            <enum name="halfStar" value="0" />
            <enum name="fullStar" value="1" />
        </attr>
        <attr name="star_yes" format="reference"/>
        <attr name="star_no" format="reference"/>
        <attr name="star_half" format="reference"/>
    </declare-styleable>


</resources>

圖片資源