Android自定义View——动态进度条

1、Android自定义View动态进度条效果图:11384中口<QJill+rwSI4,H11这个是看了梁肖的demo,根据他的思路自己写了一个，但是我写的这个貌似计算还是有些问题，从上面的图就可以看出来，左侧、顶部、右侧的线会有被截掉的部分，有懂得希望能给说一下，改进一下，这个过程还是有点曲折的，不过还是觉得收获挺多的。比如通动画来进行动态的展示（之前做的都是通过Handler进行更新的所以现在换一种思路觉得特别好）还有圆弧的起止角度，矩形区域的计算等！关于绘制我们可以循序渐进，比如最开始先画圆,然后再画周围的线，最后设置动画部分就可以了。不多说了，上代码了。代码自定义Viewpubli

2、cclassColorProgressBarextendsView下面这两行在本demo中没什么用，只是前几天看别人的代码时学到的按一定尺寸，设置其他尺寸的方式，自动忽略或者学习一下也不错/privateintdefaultStepIndicatorNum=(int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,40,getResources().getDisplayMetrics。)；/intmCircleRadius=0.28f*defaultStepIndicatorNum;布局的宽高privateintmWidth;priv

3、ateintmHeight;/直径privateintmDiameter=500;底层圆画笔privatePaintmPaintbg;顶层圆的画笔privatePaintmPaintft;周围线的画笔privatePaintmPaintLine;外层线条的长度privateintmLongItem=dip2Px(20);/线条与圆的间距privateintmDistanceItem=dip2Px(10);/进度条的最大宽度(取底层进度条与顶层进度条宽度最大的)privateintmProgressWidth;底层圆的颜色privateintmBackColor;顶层圆的颜色privateint

4、mFrontColor;底层圆、顶层圆的宽度privatefloatmBackWidth;privatefloatmFrontWidth;设置进度privatefloatcurrentvalue;通过动画演示进度privateValueAnimatoranimator;privateintcurvalue;publicColorProgressBar(Contextcontext)this(context,null,0);publicColorProgressBar(Contextcontext,AttributeSetattrs)this(context,attrs,0);publicCol

5、orProgressBar(Contextcontext,AttributeSetattrs,intdefStyleAttr)super(context,attrs,defStyleAttr);TypedArrayta=context.obtainStyledAttributes(attrs,R.styleable.ColorProgressBar);mBackColor=ta.getC010r(R.styleable.ColorProgressBar_back_color,Color.BLACK);mFrontCo1or=ta.getC010r(R.sty1eab1e.Co1orProgre

6、ssBar_front_co1or,mBackCo1or);mBackWidth=ta.getDimension(R.styleable.ColorProgressBar_back_width,dip2Px(10);mFrontWidth=ta.getDimension(R.sty1eab1e.Co1orProgressBar_front_width,dip2Px(10);mProgressWidth=mBackWidth>mFrontWidth?(int)mBackWidth:(int)mFrontWidth;注意释放资源ta.recyc1e();init();/*都是画笔初始化*/p

7、rivatevoidinit()mPaintbg=newPaint(Paint.ANTI_ALIAS_FLAG);mPaintbg.setStrokeWidth(mProgressWidth);mPaintbg.setC010r(mBackColor);mPaintbg.setStrokeCap(Paint.Cap.ROUND);mPaintbg.setStyle(Paint.Style.STROKE);mPaintft=newPaint(Paint.ANTI_ALIAS_FLAG);mPaintft.setC010r(mFrontColor);mPaintft.setStyle(Paint.

8、Style.STROKE);mPaintft.setStrokeWidth(mFrontWidth);mPaintft.setStrokeCap(Paint.Cap.ROUND);mPaintLine=newPaint(Paint.ANTI_ALIAS_FLAG);mPaintLine.setColor(Color.BLACK);mPaintLine.setStrokeWidth(5);OverrideprotectedvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec)super.onMeasure(widthMeasureSpec,

9、heightMeasureSpec);/宽度=高度=(长指针+指针与圆盘的间距+进度条白粗细+半径)*2Log.e("测量数据","LongItem"+mLongItem+"mDistanceItem:"+mDistanceItem+"mProgressWidth:"+mProgressWidth+"mDiameter:"+mDiameter/2);mWidth=(int)2*(mLongItem+mDistanceItem+mProgressWidth*2+mDiameter/2);mHeig

10、ht=(int)2*(mLongItem+mDistanceItem+mProgressWidth*2+mDiameter/2);Log.e("自定义View","高度"+mHeight+"宽度"+mWidth);setMeasuredDimension(mWidth,mHeight);OverrideprotectedvoidonDraw(Canvascanvas)super.onDraw(canvas);绘制底层圆弧，矩形的具体计算见图片canvas.drawArc(newRectF(mProgressWidth/2+mDista

11、nceItem+mLongItem,mProgressWidth/2+mDistanceItem+mLongItem,mWidth-mProgressWidth/2-mDistanceItem-mLongItem,mHeight-mProgressWidth/2-mDistanceItem-mLongItem),0,360,true,mPaintbg);/SweepGradientgradient=newSweepGradient();/绘制边缘线canvas.save();canvas.rotate(144,mWidth/2,mHeight/2);for(inti=0;i<=30;i+

12、)canvas.rotate(-9,mWidth/2,mHeight/2);if(i%5=0)canvas.drawLine(mWidth/2,5,mWidth/2,mLongItem,mPaintbg);elsecanvas.drawLine(mWidth/2,25,mWidth/2,mLongItem,mPaintLine);canvas.restore();给画笔设置渐变SweepGradientsweepGradient=newSweepGradient(mWidth/2,mHeight/2,Color.RED,Color.YELLOW);mPaintft.setShader(swee

13、pGradient);绘制顶层圆弧，currentvalue在改变时呈现动态效果canvas.drawArc(newRectF(mProgressWidth/2+mDistanceItem+mLongItem,mProgressWidth/2+mDistanceItem+mLongItem,mWidth-mPgressWidth/2-mDistanceItem-mLongItem,mHeight-mProgressWidth/2-mDistanceItem-mLongItem),135,currentvalue,false,mPaintft);mPaintft.setTextSize(100)

14、;mPaintft.setTextAlign(Paint.Align.CENTER);绘制文本canvas.drawText(String.format("%.0f",currentvalue),mWidth/2,mHeight/2+50,mPaintft);invalidate();/*设置动画*paramvalue*/publicvoidsetCurrentValue(floatvalue)/currentvalue=value;animator=ValueAnimator.ofFloat(currentvalue,value);animator.setDuration

15、(3000);animator.setTarget(currentvalue);animator.addUpdateListener(newValueAnimator.AnimatorUpdateListener()OverridepublicvoidonAnimationUpdate(ValueAnimatorvalueAnimator)currentvalue=(float)valueAnimator.getAnimatedValue();curvalue=curvalue/10;);animator.start();privateintdip2Px(floatdip)floatdensi

16、ty=getContext().getResources().getDisplayMetrics().density;return(int)(dip*density+0.5f);矩形讨算Activity调用OverrideprotectedvoidonCreate(NullableBundlesavedInstanceState)super.onCreate(savedInstanceState);setContentView(R.layout.colorprogressbar);mBtStart1=(Bton)findViewById(R.id.bt1);bar1=(ColorProgres

17、sBar)findViewById(R.id.cp1);mBtStart1.setOnClickListener(newView.OnClickListener()OverridepublicvoidonClick(Viewview)bar1.setCurrentValue(270););自定义属性<declare-styleablename="ColorProgressBar"><attrname="back_color"format="color"></attr><attrname=&qu

18、ot;front_color"format="color"></attr><attrname="back_width"format="dimension"></attr><attrname="front_width"format="dimension"></attr></declare-styleable>布局注意：为了使用自定义属性需要添加一行代码(AS)布局<LinearLayoutxmlns:android="<Buttonandroid:id="+id/bt1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="start1"/><workdemo.colorprogressbar.widget.ColorProgressBarandroid:id="+id/cp1"