Android自定义View仿QQ运动步数效果

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

/**
 * created by michael on 2019/11/1.
 */
 
public class myqqstep extends view {
 
  private int out_color;
  private int inner_color;
  private float width;
  private float textsize;
  private int color;
  private int width01;
  private int height01;
  private paint outpaint;
  private paint innerpaint;
  private paint textpaint;
 
  private float percent;
  private int step;
 
  public myqqstep(context context) {
    this(context,null);
  }
 
  public myqqstep(context context, @nullable attributeset attrs) {
    this(context, attrs,0);
  }
 
  public myqqstep(context context, @nullable attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);
    typedarray array = context.obtainstyledattributes(attrs,r.styleable.myqqstep);
    out_color = array.getcolor(r.styleable.myqqstep_out_color, color.black);
    inner_color = array.getcolor(r.styleable.myqqstep_inner_color, color.red);
    width = array.getdimension(r.styleable.myqqstep_border_width,10);
    textsize = array.getdimensionpixelsize(r.styleable.myqqstep_text_size,20);
    color = array.getcolor(r.styleable.myqqstep_text_color, color.green);
    array.recycle();
    initpaint();
    percent = 0;
    step = 5000;
  }
 
  private void initpaint() {
    outpaint = new paint();
    outpaint.setantialias(true);
    outpaint.setstyle(paint.style.stroke);
    outpaint.setstrokewidth(width);
    outpaint.setcolor(out_color);
    outpaint.setstrokecap(paint.cap.round);
 
    innerpaint = new paint();
    innerpaint.setantialias(true);
    innerpaint.setstrokewidth(width);
    innerpaint.setstyle(paint.style.stroke);
    innerpaint.setcolor(inner_color);
    innerpaint.setstrokecap(paint.cap.round);
 
    textpaint = new paint();
    textpaint.setantialias(true);
    textpaint.setcolor(color);
    textpaint.setstyle(paint.style.stroke);
    textpaint.settextsize(textsize);
 
  }
 
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    //super.onmeasure(widthmeasurespec, heightmeasurespec);
    int widthmode = measurespec.getmode(widthmeasurespec);
    int heightmode = measurespec.getmode(heightmeasurespec);
    if (widthmode == measurespec.at_most){
 
    }else{
      width01 = measurespec.getsize(widthmeasurespec);
    }
    if (heightmode == measurespec.at_most){
 
    }else{
      height01 = measurespec.getsize(heightmeasurespec);
    }
    setmeasureddimension((width01>height01?height01:width01)
        ,(width01>height01?height01:width01));
  }
 
  @override
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
    int realwidth = getwidth()>getheight()?getheight():getwidth();
    int realheight = getwidth()>getheight()?getheight():getwidth();
    rectf r1 = new rectf(width/2,width/2,realwidth-width/2
        ,realheight-width/2);
    canvas.drawarc(r1,135,270,false,outpaint);
    canvas.drawarc(r1,135,270*percent,false,innerpaint);
 
    rect r = new rect();
    string s = step+"";
    textpaint.gettextbounds(s,0,s.length(),r);
    int textwidth = r.width();
    int textheight = r.height();
    paint.fontmetricsint fontmetricsint = new paint.fontmetricsint();
    int dy = (fontmetricsint.bottom-fontmetricsint.top)/2-fontmetricsint.bottom;
    int baseline = textheight/2+dy+realheight/2-textheight/2;
    int x0 = realwidth/2-textwidth/2;
    canvas.drawtext(s,x0,baseline,textpaint);
 
  }
 
  public void setpercent(float percent,float value){
    this.percent = percent;
    this.step = (int) value;
    invalidate();
  }
 
 
}

<com.example.qq_step.myqqstep
    android:id="@+id/qq_step"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:out_color="@color/coloraccent"
    app:border_width="10dp"
    app:inner_color="@color/colorprimary"
    app:text_size="20sp"
    app:text_color="@color/colorprimarydark"
    />

 private void initview() {
    final myqqstep qq_view = findviewbyid(r.id.qq_step);
    valueanimator animator = valueanimator.offloat(0,5000);
    animator.addupdatelistener(new valueanimator.animatorupdatelistener() {
      @override
      public void onanimationupdate(valueanimator animation) {
        float p = animation.getanimatedfraction();
        qq_view.setpercent(p,5000*p);
      }
    });
    animator.setduration(10000);
    animator.start();
 
  }