欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

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

程序员文章站 2022-06-20 14:58:13
本文实例为大家分享了android qq运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性:

本文实例为大家分享了android qq运动步数的具体代码,供大家参考,具体内容如下

今天我们实现下面这样的效果:

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>

自定义view代码如下:

/**
 * 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();
  }
 
 
}

最后在布局以及mainactivity中调用:

<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();
 
  }

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