Android自定义View圆形进度条控件（三）

概述继续练习自定义View，这次带来的圆形进度条控件与之前的圆形百分比控件大同小异，这次涉及到了渐变渲染以及画布旋转等知识点，效果如下：

继续练习自定义view，这次带来的圆形进度条控件与之前的圆形百分比控件大同小异，这次涉及到了渐变渲染以及画布旋转等知识点，效果如下：

虽然步骤类似，但是我还是要写，毕竟基础的东西就是要多练

1、在res/values文件夹下新建attrs.xml文件，编写自定义属性：

<?xml version="1.0" enCoding="utf-8"?><resources> <declare-styleable name="CircleProgressVIEw"> <!-- 弧线宽度 --> <attr name="arcWIDth" format="dimension" /> <!-- 刻度个数 --> <attr name="scaleCount" format="integer" /> <!-- 渐变起始颜色 --> <attr name="startcolor" format="color" /> <!-- 渐变终止颜色 --> <attr name="endcolor" format="color" /> <!-- 标签说明文本 --> <attr name="labelText" format="string" /> <!-- 文本颜色 --> <attr name="textcolor" format="color" /> <!-- 百分比文本字体大小 --> <attr name="progresstextSize" format="dimension" /> <!-- 标签说明字体大小 --> <attr name="labelTextSize" format="dimension" /> </declare-styleable></resources>

2、新建CircleProgressVIEw继承VIEw，重写构造方法：

 public CircleProgressVIEw(Context context) { this(context,null); } public CircleProgressVIEw(Context context,AttributeSet attrs) { this(context,attrs,0); } public CircleProgressVIEw(Context context,AttributeSet attrs,int defStyleAttr) { super(context,defStyleAttr); }

3、在第三个构造方法中获取自定义属性的值：

 TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.CircleProgressVIEw,defStyleAttr,0); marcWIDth = ta.getDimension(R.styleable.CircleProgressVIEw_arcWIDth,DensityUtils.dp2px(context,8)); mScaleCount = ta.getInteger(R.styleable.CircleProgressVIEw_scaleCount,24); mStartcolor = ta.getcolor(R.styleable.CircleProgressVIEw_startcolor,color.parsecolor("#3FC199")); mEndcolor = ta.getcolor(R.styleable.CircleProgressVIEw_endcolor,color.parsecolor("#3294C1")); mcolorArray = new int[]{mStartcolor,mEndcolor}; mLabelText = ta.getString(R.styleable.CircleProgressVIEw_labelText); mTextcolor = ta.getcolor(R.styleable.CircleProgressVIEw_textcolor,color.parsecolor("#4F5F6F")); mProgresstextSize = ta.getDimension(R.styleable.CircleProgressVIEw_progresstextSize,160); mLabelTextSize = ta.getDimension(R.styleable.CircleProgressVIEw_labelTextSize,64); ta.recycle();

4、创建画图所使用的对象，如Paint、Rect、RectF：

 marcBackPaint = new Paint(Paint.ANTI_AliAS_FLAG); marcBackPaint.setStyle(Paint.Style.stroke); marcBackPaint.setstrokeWIDth(marcWIDth); marcBackPaint.setcolor(color.LTGRAY); marcForePaint = new Paint(Paint.ANTI_AliAS_FLAG); marcForePaint.setStyle(Paint.Style.stroke); marcForePaint.setstrokeWIDth(marcWIDth); marcRectF = new RectF(); mlinePaint = new Paint(Paint.ANTI_AliAS_FLAG); mlinePaint.setStyle(Paint.Style.stroke); mlinePaint.setcolor(color.WHITE); mlinePaint.setstrokeWIDth(DensityUtils.dp2px(context,2)); mProgresstextPaint = new Paint(Paint.ANTI_AliAS_FLAG); mProgresstextPaint.setStyle(Paint.Style.FILL); mProgresstextPaint.setcolor(mTextcolor); mProgresstextPaint.setTextSize(mProgresstextSize); mLabelTextPaint = new Paint(Paint.ANTI_AliAS_FLAG); mLabelTextPaint.setStyle(Paint.Style.FILL); mLabelTextPaint.setcolor(mTextcolor); mLabelTextPaint.setTextSize(mLabelTextSize); mTextRect = new Rect();

5、重写onMeasure()方法，计算自定义view的宽高：

 @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) { setMeasuredDimension(measuredDimension(wIDthMeasureSpec),measuredDimension(heightmeasureSpec)); } private int measuredDimension(int measureSpec) { int result; int mode = MeasureSpec.getMode(measureSpec); int size = MeasureSpec.getSize(measureSpec); if (mode == MeasureSpec.EXACTLY) {  result = size; } else {  result = 800;  if (mode == MeasureSpec.AT_MOST) {  result = Math.min(result,size);  } } return result; }

6、重写onDraw()方法，绘制圆弧、刻度线和百分比文本、标签说明文本，注意坐标的计算：

 @OverrIDe protected voID onDraw(Canvas canvas) { super.onDraw(canvas); marcRectF.set(marcWIDth / 2,marcWIDth / 2,getWIDth() - marcWIDth / 2,getHeight() - marcWIDth / 2); //画背景弧线 canvas.drawArc(marcRectF,-90,360,false,marcBackPaint); //设置渐变渲染 linearGradIEnt linearGradIEnt = new linearGradIEnt(getWIDth() / 2,getWIDth() / 2,getHeight(),mcolorArray,null,Shader.TileMode.CLAMP); marcForePaint.setShader(linearGradIEnt); //画百分比值弧线 canvas.drawArc(marcRectF,mSweepAngle,marcForePaint); //画刻度线 for (int i = 0; i < mScaleCount; i++) {  canvas.drawline(getWIDth() / 2,marcWIDth,mlinePaint);  //旋转画布  canvas.rotate(360 / mScaleCount,getHeight() / 2); } //画百分比文本 String progresstext = mProgress + "%"; mProgresstextPaint.getTextBounds(progresstext,progresstext.length(),mTextRect); float progresstextWIDth = mTextRect.wIDth(); float progresstextHeight = mTextRect.height(); canvas.drawText(progresstext,getWIDth() / 2 - progresstextWIDth / 2,getHeight() / 2 + progresstextHeight / 2,mProgresstextPaint); //画标签说明文本 mLabelTextPaint.getTextBounds(mLabelText,mLabelText.length(),mTextRect); canvas.drawText(mLabelText,getWIDth() / 2 - mTextRect.wIDth() / 2,getHeight() / 2 - progresstextHeight / 2 - mTextRect.height(),mLabelTextPaint); }

7、暴露一个动态设置百分比的方法：

 public voID setProgress(float progress) { Log.e("--> ",progress + ""); ValueAnimator anim = ValueAnimator.offloat(mProgress,progress); anim.setDuration((long) (Math.abs(mProgress - progress) * 20)); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  @OverrIDe  public voID onAnimationUpdate(ValueAnimator animation) {  mProgress = (float) animation.getAnimatedValue();  mSweepAngle = mProgress * 360 / 100;  mProgress = (float) (Math.round(mProgress * 10)) / 10;//四舍五入保留到小数点后两位  invalIDate();  } }); anim.start(); }

8、在activity_main.xml布局文件中使用该VIEw：

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:cpv="http://schemas.androID.com/apk/res-auto" xmlns:tools="http://schemas.androID.com/tools" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:paddingBottom="@dimen/activity_vertical_margin" androID:paddingleft="@dimen/activity_horizontal_margin" androID:paddingRight="@dimen/activity_horizontal_margin" androID:paddingtop="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <com.monkey.circleprogressvIEw.CircleProgressVIEw androID:ID="@+ID/circle_progress_vIEw" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:layout_centerInParent="true" cpv:arcWIDth="8dp" cpv:endcolor="#126b94" cpv:labelText="学习进度" cpv:labelTextSize="20sp" cpv:progresstextSize="55sp" cpv:scaleCount="24" cpv:startcolor="#12d699" cpv:textcolor="#4F5F6F" /></relativeLayout>

9、在MainActivity中设置监听，传入百分比：

 final CircleProgressVIEw vIEw = (CircleProgressVIEw) findVIEwByID(R.ID.circle_progress_vIEw); vIEw.setonClickListener(new VIEw.OnClickListener() { @OverrIDe public voID onClick(VIEw v) {  float progress = (float) (Math.random() * 100);  vIEw.setProgress(progress); } });

代码下载地址：
https://github.com/MonkeyMushroom/CircleProgressView/tree/master

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义View圆形进度条控件（三）全部内容，希望文章能够帮你解决Android自定义View圆形进度条控件（三）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。