Android利用Paint自定义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 , 0, 360*progress/max, false, mpaint);
  break;
  case fill:
  mpaint.setstyle(paint.style.fill_and_stroke);
  if(progress!=0)
   canvas.drawarc(oval , 0, 360*progress/max, 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:style="stroke"
 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:style="fill"
 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的理解。

总结

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