简单实现自定义圆环进度播放

简单实现自定义圆环进度播放

效果图

为什么要用自定义控件

一般来讲，在开发项目中，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);
    }

要说明的是，覆盖圆环是加了动画的。

其实，即使在复杂的控件，只要把该控件一步步拆分出来，变成一个个小的功能实现，这样对于我们来说就不是那么的难了。最后，这个还是要多多练习，毕竟熟能生巧嘛。。?

源代码下载