簡單實現自定義圓環進度播放

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/huangf321123/article/details/81223514

簡單實現自定義圓環進度播放

效果圖

爲什麼要用自定義控件

一般來講，在開發項目中，Android自帶的基礎控件難免有些不符合咱們公司設計師的眼光，通過它們刁鑽的眼光，設計出一些比較炫的效果展示。這時，通過Android自帶的基礎控件，根本無法實現，那自定義控件就排上用場啦。。。

自定義控件的實現

首先考慮實現該圓環的屬性有哪些

比如：圓環顏色、圓環的寬度、圓環的半徑、圓中心的圖片等等。這些屬性統統都在構造函數中進行初始化。

先在styles.xml中對這些屬性進行處理，如下所示

  <declare-styleable name="CustomCircleProgressView">
        <!--圓環中心圖片-->
        <attr name="circlecenterbg" format="integer"/>
        <!--在動畫過程中 可能需要切換背景-->
        <attr name="circlecenterbganimator" format="integer"/>
        <!--圓環顏色-->
        <attr name="circlecolor" format="color"/>
        <!--在動畫過程中 可能需要改變圓環顏色-->
        <attr name="circlecoloranimator" format="color"/>
        <!--圓環寬度-->
        <attr name="circlewidth" format="dimension"/>
        <!--覆蓋圓環顏色-->
        <attr name="circle_cover_color" format="color"/>
        <!--覆蓋圓環進度-->
        <attr name="circle_cover_progree" format="integer"/>
        <!--圓環半徑-->
        <attr name="circle_radius" format="dimension"/>
    </declare-styleable>

接下來，在該自定義類的構造函數中對這些屬性進行初始化。如下所示：

public void init(AttributeSet attrs){
    TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.CustomCircleProgressView);
    circleCenterImage = typedArray.getResourceId(R.styleable.CustomCircleProgressView_circlecenterbg,R.drawable.sound_play_orange);
    circleCenterAnimator = typedArray.getResourceId(R.styleable.CustomCircleProgressView_circlecenterbganimator,0);
    circleColor = typedArray.getColor(R.styleable.CustomCircleProgressView_circlecolor,getResources().getColor(R.color.color_39));
    circleColorAnimator = typedArray.getColor(R.styleable.CustomCircleProgressView_circlecoloranimator,0);
    circleWidth = typedArray.getDimension(R.styleable.CustomCircleProgressView_circlewidth,DEFAULT_CIRCLE_WIDTH);
    circleRadius = (int) typedArray.getDimension(R.styleable.CustomCircleProgressView_circle_radius,DEFAULT_CIRCLE_RADIUS);
    circleCoverColor = typedArray.getColor(R.styleable.CustomCircleProgressView_circle_cover_color,getResources().getColor(R.color.color_5711));
    circleCoverProgress = typedArray.getDimension(R.styleable.CustomCircleProgressView_circle_cover_progree,DEFAULT_COVER_CIRCLE_PROGRESS);

    typedArray.recycle();
}

初始化畫筆

 mCirclePaint = new Paint();
        // 設置抗鋸齒,會消耗較大資源，繪製圖形速度會變慢。
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setStrokeWidth(circleWidth);
        //繪製空心圓
        mCirclePaint.setStyle(Paint.Style.STROKE);

測量該自定義view的寬高，onMeasure方法裏面進行

 mMesuaredWidth = DisplayUtils.measure(widthMeasureSpec, VIEW_DEFAULT_WIDTH);
        mMesuaredHeight = DisplayUtils.measure(heightMeasureSpec, VIEW_DEFAULT_HEIGHT);
        setMeasuredDimension(mMesuaredWidth,mMesuaredHeight);

繪製view，onDraw方法裏面進行繪製

首先，繪製一個圓環

private void drawCircle(Canvas canvas) {
        mCirclePaint.setColor(circleColor);
        if(mIsAnimator && circleColorAnimator != 0){//動畫時候切換背景
            mCirclePaint.setColor(circleColorAnimator);
        }
        canvas.drawCircle(mCircleX,mCircleY,circleRadius,mCirclePaint);
    }

其次，繪製圓環中心圖片

private void drawCircleCenterImage(Canvas canvas) {
        if(isExam){
            canvas.drawCircle(mCircleX,mCircleY,DisplayUtils.dip2px(DEFAULT_EXAM_BG_RADIUS),mExamBgPaint);
        }
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), circleCenterImage);
        if(mIsAnimator && circleCenterAnimator != 0){//動畫時候切換背景
            bitmap = BitmapFactory.decodeResource(getResources(), circleCenterAnimator);
        }
        Rect rect = new Rect((int)mCircleX-bitmap.getWidth()/2,(int)mCircleY-bitmap.getHeight()/2,
                (int)mCircleX+bitmap.getWidth()/2,(int)mCircleY+bitmap.getHeight()/2);
        canvas.drawBitmap(bitmap,null,rect,mCircleCenterPaint);

    }

最後，繪製覆蓋圓環，即在原圓環位置上再畫一個圓。

private void drawCircleCover(Canvas canvas) {
        if(mIsAnimator){
            drawAnimatorArc(canvas);
            return;
        }
//        RectF rectF = new RectF(mCircleX-circleRadius,mCircleY-circleRadius,
//                mCircleX+circleRadius,mCircleY+circleRadius);
//        canvas.drawArc(rectF,-90,90,false,mCoverCirclePaint);
        mEndSweepValue = circleCoverProgress * 360;
        canvas.drawArc(mRectF,mStartSweepValue,mEndSweepValue,false,mCoverCirclePaint);
    }

要說明的是，覆蓋圓環是加了動畫的。

其實，即使在複雜的控件，只要把該控件一步步拆分出來，變成一個個小的功能實現，這樣對於我們來說就不是那麼的難了。最後，這個還是要多多練習，畢竟熟能生巧嘛。。?

源代碼下載