简单实现自定义圆环进度播放
效果图
为什么要用自定义控件
一般来讲,在开发项目中,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);
}
要说明的是,覆盖圆环是加了动画的。
其实,即使在复杂的控件,只要把该控件一步步拆分出来,变成一个个小的功能实现,这样对于我们来说就不是那么的难了。最后,这个还是要多多练习,毕竟熟能生巧嘛。。?