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

Android自定义View仿QQ运动步数效果,第1张

概述Android自定义View仿QQ运动步数效果 本文实例为大家分享了Android QQ运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="MyQQStep"> <attr name="out_color" format=&quot ...

本文实例为大家分享了AndroID 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,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,270*percent,innerPaint);    Rect r = new Rect();    String s = step+"";    textPaint.getTextBounds(s,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();  }

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

总结

以上是内存溢出为你收集整理的Android自定义View仿QQ运动步数效果全部内容,希望文章能够帮你解决Android自定义View仿QQ运动步数效果所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1144335.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存