Android自定义View实现炫酷进度条

本文实例为大家分享了android实现炫酷进度条的具体代码，供大家参考，具体内容如下

下面我们来实现如下效果：

第一步：创建attrs文件夹，自定义属性：

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="myprogress">
    <attr name="out_color" format="color"/>
    <attr name="inner_color" format="color"/>
    <attr name="border_width" format="dimension"/>
    <attr name="text_color" format="color"/>
    <attr name="text_size" format="dimension"/>
  </declare-styleable>
</resources>

第二步：自定义view：

/**
 * created by michael on 2019/11/1.
 */
 
public class myprogress extends view {
 
  private int outcolor;
  private int innercolor;
  private int textcolor;
  private float borderwidth;
  private int textsize;
  private paint moutpaint;
  private paint minnerpaint;
  private paint mtextpaint;
  private float percent;
  private int p;
 
  public myprogress(context context) {
    this(context,null);
  }
 
  public myprogress(context context, @nullable attributeset attrs) {
    this(context, attrs,0);
  }
 
  public myprogress(context context, @nullable attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);
    typedarray array = context.obtainstyledattributes(attrs,r.styleable.myprogress);
    outcolor = array.getcolor(r.styleable.myprogress_out_color, color.green);
    innercolor = array.getcolor(r.styleable.myprogress_inner_color, color.blue);
    textcolor = array.getcolor(r.styleable.myprogress_text_color, color.black);
    borderwidth = array.getdimension(r.styleable.myprogress_border_width,10);
    textsize = array.getdimensionpixelsize(r.styleable.myprogress_text_size,20);
    array.recycle();
    init();
 
 
  }
 
  private void init() {
    moutpaint = new paint();
    moutpaint.setantialias(true);
    moutpaint.setdither(true);
    moutpaint.setstyle(paint.style.stroke);
    moutpaint.setstrokewidth(borderwidth);
    moutpaint.setcolor(outcolor);
 
    minnerpaint = new paint();
    minnerpaint.setantialias(true);
    minnerpaint.setdither(true);
    minnerpaint.setstyle(paint.style.stroke);
    minnerpaint.setstrokewidth(borderwidth);
    minnerpaint.setcolor(innercolor);
 
    mtextpaint = new paint();
    mtextpaint.setantialias(true);
    mtextpaint.setdither(true);
    mtextpaint.setstyle(paint.style.fill);
    mtextpaint.settextsize(textsize);
    mtextpaint.setcolor(textcolor);
 
    percent = 0;
    p = 100;
  }
 
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    int widthmode = measurespec.getmode(widthmeasurespec);
    int heightmode = measurespec.getmode(heightmeasurespec);
    int width = 0,height =0;
    if (widthmode == measurespec.at_most){
 
    }else{
      width = measurespec.getsize(widthmeasurespec);
    }
    if (heightmode == measurespec.at_most){
 
    }else{
      height = measurespec.getsize(heightmeasurespec);
    }
    setmeasureddimension(width>height?height:width,width>height?height:width);
  }
 
  @override
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
    int rwidth = getwidth()>getheight()?getheight():getwidth();
    int rheight = getwidth()>getheight()?getheight():getwidth();
    //int rwidth = getwidth();
    //int rheight = getheight();
 
    float radius = rwidth/2 - borderwidth/2;
    canvas.drawcircle(rwidth/2,rheight/2,radius,moutpaint);
 
    rectf r = new rectf(borderwidth/2,borderwidth/2,
        rwidth-borderwidth/2,rheight-borderwidth/2);
    canvas.drawarc(r,0,360*percent,false,minnerpaint);
 
    string s1 = (int)(percent*100) + "%";
    rect r2 = new rect();
    mtextpaint.gettextbounds(s1,0,s1.length(),r2);
    int twidth = r2.width();
    int theight = r2.height();
    paint.fontmetricsint fontmetricsint = new paint.fontmetricsint();
    int dy = (fontmetricsint.bottom-fontmetricsint.top)/2-fontmetricsint.bottom;
    int baseline = theight/2+dy+rheight/2-theight/2;
    int x0 = rwidth/2-twidth/2;
    canvas.drawtext(s1,x0,baseline,mtextpaint);
  }
 
  public void setprogress(float percent,int value){
    this.percent = percent;
    invalidate();
  }
 
 
}

然后在布局中使用：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.constraintlayout 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"
  tools:context="com.example.michael.view_02.mainactivity">
 
  <com.example.michael.view_02.myprogress
    android:id="@+id/progress"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:out_color="@color/colorprimary"
    app:inner_color="@color/coloraccent"
    app:text_color="@color/colorprimarydark"
    app:border_width="10dp"
    app:text_size="20sp"
    />
 
</android.support.constraint.constraintlayout>

在activity中使用属性动画完成效果：

public class mainactivity extends appcompatactivity {
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    final myprogress progress = findviewbyid(r.id.progress);
    valueanimator animator = valueanimator.ofint(0,5000);
    animator.addupdatelistener(new valueanimator.animatorupdatelistener() {
      @override
      public void onanimationupdate(valueanimator animation) {
        float p = animation.getanimatedfraction();
        int value = (int)animation.getanimatedvalue();
        progress.setprogress(p,value);
      }
    });
    animator.setduration(10000);
    animator.start();
  }
 
 
}

如果我们改动一下代码：

//int rwidth = getwidth();
//int rheight = getheight();

我们使用ondraw()方法的时候如果使用上面的方法确定宽高，将会绘制成下图所示：

很奇怪！欢迎大家解决此问题。

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