Android利用Paint自定义View实现进度条控件方法示例

概述前言View的三大流程：测量，布局，绘制，自定义View学的是啥？无非就两种：绘制文字和绘制图像。

前言

VIEw的三大流程：测量，布局，绘制，自定义view学的是啥？无非就两种：绘制文字和绘制图像。

我们在上一篇文章《Android绘图之Paint的使用》中学习了Paint的基本用法，但是具体的应用我们还没有实践过。从标题中可知，本文是带领读者使用Paint，自定义一个进度条控件。

效果图

上图就是本文要实现的效果图。

实现过程

既然是自定义控件，本文的该控件是直接继承VIEw，然后重写VIEw的onMeasure和onDraw方法来实现。其中onMeasure主要作用是测量控件的宽/高。而onDraw则是将界面绘制到屏幕上。

从效果的效果上看，我们需要自定义一些属性，如：进度度条的颜色、圆边框的颜色、圆边框的宽度和文本的大小等等。
具体的自定义属性请看下面attrs.xml的代码：

<?xml version="1.0" enCoding="utf-8"?><resources> <declare-styleable name="CustomProgressbar"> <attr name="roundProgresscolor" format="color"></attr> <attr name="roundcolor" format="color"></attr> <attr name="rounDWIDth" format="dimension"></attr> <attr name="textSize" format="dimension"></attr> <attr name="textcolor" format="color"></attr> <attr name="max" format="integer"></attr> <attr name="textShow" format="boolean"></attr> <attr name="style">  <enum name="stroke" value="0"></enum>  <enum name="FILL" value="1"></enum> </attr> </declare-styleable></resources>

接下来看本文的最重要部分，也就是自定义view

public class CustomProgressbar extends VIEw { private int max = 100;//总进度 private int roundcolor = color.RED;//进度圆弧的颜色 private float rounDWIDth = 10;//圆边框宽度 private int roundProgresscolor = color.BLUE;//默认的大圆环边框颜色 private float textSize = 55;//文本大小 private int textcolor = color.GREEN;//文本默认颜色 private boolean textShow = true;//是否展示文本 public static final int stroke = 0;//描边 public static final int FILL = 1;//填充 private int style = stroke;//默认描边 private int progress;//进度 private Paint mPaint; private int mWIDth = 200;//默认控件宽度，wrap_content时候使用 private int mHeight = 200;//默认控件高度，wrap_content时候使用 public CustomProgressbar(Context context) { this(context,null); } public CustomProgressbar(Context context,@Nullable AttributeSet attrs) { super(context,attrs); init(context,attrs); } private voID init(Context context,AttributeSet attrs) { mPaint = new Paint(); if (attrs != null) {  TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomProgressbar);  max = typedArray.getInteger(R.styleable.CustomProgressbar_max,100);  roundcolor = typedArray.getcolor(R.styleable.CustomProgressbar_roundcolor,color.BLUE);  roundProgresscolor = typedArray.getcolor(R.styleable.CustomProgressbar_roundProgresscolor,color.BLUE);  textcolor = typedArray.getcolor(R.styleable.CustomProgressbar_textcolor,color.GREEN);  textSize = typedArray.getDimension(R.styleable.CustomProgressbar_textSize,55);  rounDWIDth = typedArray.getDimension(R.styleable.CustomProgressbar_rounDWIDth,10);  textShow = typedArray.getBoolean(R.styleable.CustomProgressbar_textShow,true);  style = typedArray.getInt(R.styleable.CustomProgressbar_style,0);  typedArray.recycle(); } } @OverrIDe protected voID onMeasure(int wIDthMeasureSpec,int heightmeasureSpec) { super.onMeasure(wIDthMeasureSpec,heightmeasureSpec); int wIDthSpecsize = MeasureSpec.getSize(wIDthMeasureSpec); int wIDthSpecMode = MeasureSpec.getMode(wIDthMeasureSpec); int heightSpecsize = MeasureSpec.getSize(heightmeasureSpec); int heightSpecMode = MeasureSpec.getMode(heightmeasureSpec); if (wIDthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){  setMeasuredDimension(mWIDth,mHeight); }else if (wIDthSpecMode == MeasureSpec.AT_MOST){  setMeasuredDimension(mWIDth,heightSpecsize); }else if (heightSpecMode == MeasureSpec.AT_MOST){  setMeasuredDimension(wIDthSpecsize,mHeight); } } @OverrIDe protected voID onDraw(Canvas canvas) { super.onDraw(canvas); final int paddingleft = getpaddingleft(); final int paddingRight = getpaddingRight(); final int paddingtop = getpaddingtop(); final int paddingBottom = getpaddingBottom(); int wIDth = getWIDth() - paddingleft - paddingRight; int height = getHeight() - paddingBottom - paddingtop; //画默认的大圆环 float radius = (float)Math.min(wIDth,height)/2.0f;//中心坐标点 mPaint.setcolor(roundcolor); mPaint.setStyle(Paint.Style.stroke);//描边 mPaint.setstrokeWIDth(rounDWIDth);//圆环边的宽度// if (style == stroke){//  mPaint.setstrokeWIDth(rounDWIDth);//圆环边的宽度// } mPaint.setAntiAlias(true); //(float cx,float cy,float radius,@NonNull Paint paint) canvas.drawCircle(paddingleft+wIDth/2,paddingtop+height/2,radius,mPaint); //画进度百分比 mPaint.setcolor(textcolor); mPaint.setstrokeWIDth(0);//圆环的宽度 mPaint.setTextSize(textSize); mPaint.setTypeface(Typeface.DEFAulT_BolD); int percent = (int)(progress/(float)max * 100); if(textShow && percent!=0 && style == stroke){  //(@NonNull String text,float x,float y,@NonNull Paint paint)  canvas.drawText(percent+"%",(getWIDth()-mPaint.measureText(percent+"%"))/2f,//y公式： float baselineY = centerY + (FontMetrics.bottom-FontMetrics.top)/2 - FontMetrics.bottom   getWIDth()/2f-(mPaint.descent()+mPaint.ascent())/2f,mPaint); } //画圆弧 //矩形区域，定义圆弧的形状大小 //(float left,float top,float right,float bottom) RectF oval = new RectF(paddingleft,paddingtop,wIDth+paddingleft,height+paddingtop); mPaint.setcolor(roundProgresscolor); mPaint.setstrokeWIDth(rounDWIDth);//圆环边的宽度 switch (style){  case stroke:  mPaint.setStyle(Paint.Style.stroke);  //(@NonNull RectF oval,float startAngle,float sweepAngle,boolean useCenter,@NonNull Paint paint)  //useCenter:设置圆弧在绘画的时候，是否经过圆形  canvas.drawArc(oval,360*progress/max,false,mPaint);  break;  case FILL:  mPaint.setStyle(Paint.Style.FILL_AND_stroke);  if(progress!=0)   canvas.drawArc(oval,true,mPaint);  break;  default:  break; } } public voID setProgressWIDth(int wIDth) { mWIDth = wIDth; } public voID setProgressHeight(int height) { mHeight = height; } public synchronized voID setMax(int max) { if (max < 0) {  throw new IllegalArgumentException("max不能小于0"); } this.max = max; } public voID setRoundcolor(int roundcolor) { this.roundcolor = roundcolor; } public voID setRounDWIDth(float rounDWIDth) { this.rounDWIDth = rounDWIDth; } public voID setRoundProgresscolor(int roundProgresscolor) { this.roundProgresscolor = roundProgresscolor; } public voID setTextSize(float textSize) { this.textSize = textSize; } public voID setTextcolor(int textcolor) { this.textcolor = textcolor; } public voID setTextShow(boolean textShow) { this.textShow = textShow; } public synchronized voID setProgress(int progress) { if (progress < 0) {  throw new IllegalArgumentException("progress不能小于0"); } if (progress > max) {  progress = max; } if (progress <= max) {  this.progress = progress;  postInvalIDate(); } } public synchronized int getMax() { return max; } public int getRoundcolor() { return roundcolor; } public float getRounDWIDth() { return rounDWIDth; } public int getRoundProgresscolor() { return roundProgresscolor; } public int getTextcolor() { return textcolor; } public boolean isTextShow() { return textShow; } public synchronized int getProgress() { return progress; }}

流程：初始化的时候会拿到自定义属性，然后onMeasure方法中测量控件的宽和高，该方法主要处理了LayoutParams的wrap_content，当wrap_content时，默认设置默认宽/高，而不是让控件占据整个屏幕，需要调用setMeasuredDimension方法测量。最后测量得到了控件的宽/高，调用onDraw方法将界面绘制到屏幕上，在onDraw方法绘制的时需要考虑padding的情况，如果不做padding处理，则padding将不起作用。

onDraw绘制流程：先绘制一个默认的大圆环，然后在圆中心绘制百分比的文本，最后再绘制一个进度圆环，进度圆环会覆盖底部的默认大圆环，这样就达到显示进度的情况。

设置好画笔之后，使用canvas.drawCircle绘制默认的大圆环，再次设置画笔，使用canvas.drawText方法绘制文本；画圆弧时需要定义一个矩形区域RectF，通过canvas.drawArc方法绘制。

绘制好之后，如何让用户看到进度条在变化呢？其实就是通过setProgress方法里面的postInvalIDate()方法，该方法会刷新界面，刷新界面时会调用onDraw，这样就可以将进度画到屏幕上，进度条不停的在变化。

使用

XML中使用

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:app="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:orIEntation="vertical" tools:context="com.main.paint.PaintActivity"> <com.main.paint.CustomProgressbar androID:ID="@+ID/progressbar" androID:layout_wIDth="200dp" androID:layout_height="200dp" app:roundProgresscolor="#FF0000" app:rounDWIDth="2dp" app:textcolor="#FF0000" app: androID:padding="30dp" app:textSize="20dp"/> <com.main.paint.CustomProgressbar androID:ID="@+ID/progressbar01" androID:layout_wIDth="200dp" androID:layout_height="200dp" app:roundProgresscolor="#FF0000" app:rounDWIDth="2dp" app:textcolor="#FF0000" app: androID:padding="30dp" app:textSize="20dp"/></linearLayout>

Activity代码如下：

public class PaintActivity extends AppCompatActivity { private CustomProgressbar mCustomProgressbar; private CustomProgressbar mCustomProgressbar01; private int progress; @OverrIDe protected voID onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentVIEw(R.layout.activity_paint); mCustomProgressbar = (CustomProgressbar)this.findVIEwByID(R.ID.progressbar); mCustomProgressbar.setonClickListener(new VIEw.OnClickListener() {  @OverrIDe  public voID onClick(VIEw v) {  new Thread(new Runnable() {   @OverrIDe   public voID run() {   progress = 0;   while (progress <= 100) {    progress += 2;    mCustomProgressbar.setProgress(progress);    try {    Thread.sleep(100);    } catch (InterruptedException e) {    e.printstacktrace();    }   }   }  }).start();  } }); mCustomProgressbar01 = (CustomProgressbar)this.findVIEwByID(R.ID.progressbar01); mCustomProgressbar01.setonClickListener(new VIEw.OnClickListener() {  @OverrIDe  public voID onClick(VIEw v) {  new Thread(new Runnable() {   @OverrIDe   public voID run() {   progress = 0;   while (progress <= 100) {    progress += 2;    mCustomProgressbar01.setProgress(progress);    try {    Thread.sleep(100);    } catch (InterruptedException e) {    e.printstacktrace();    }   }   }  }).start();  } }); }}

这样就完成了一个自定义的进度条控件，并且在onDraw方法中使用Paint将界面绘制出来。读者可以自行实践一把，加深对Paint的理解。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程小技巧的支持。

总结

以上是内存溢出为你收集整理的Android利用Paint自定义View实现进度条控件方法示例全部内容，希望文章能够帮你解决Android利用Paint自定义View实现进度条控件方法示例所遇到的程序开发问题。

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