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

所属分类: 软件编程 / Android 阅读数: 107
收藏 0 赞 0 分享

本文实例为大家分享了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, 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();
 
  }

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

更多精彩内容其他人还在看

Android网络编程之获取网络上的Json数据实例

这篇文章主要介绍了Android网络编程之获取网络上的Json数据实例,本文用完整的代码实例讲解了在Android中读取网络中Json数据的方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中的windowSoftInputMode属性详解

这篇文章主要介绍了Android中的windowSoftInputMode属性详解,本文对windowSoftInputMode的9个属性做了详细总结,需要的朋友可以参考下
收藏 0 赞 0 分享

Android网络编程之UDP通信模型实例

这篇文章主要介绍了Android网络编程之UDP通信模型实例,本文给出了服务端代码和客户端代码,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中使用ListView实现漂亮的表格效果

这篇文章主要介绍了Android中使用ListView实现漂亮的表格效果,本文用详细的代码实例创建了一个股票行情表格,需要的朋友可以参考下
收藏 0 赞 0 分享

Android中刷新界面的二种方法

这篇文章主要介绍了Android中刷新界面的二种方法,本文使用Handler、postInvalidate两种方法实现界面刷新,需要的朋友可以参考下
收藏 0 赞 0 分享

Android SDK三种更新失败及其解决方法

这篇文章主要介绍了Android SDK三种更新失败及其解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(一)

Android3.0(API level 11)开始,Android设备不再需要专门的菜单键。随着这种变化,Android app应该取消对传统6项菜单的依赖。取而代之的是提供anction bar来提供基本的用户功能
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(二)

这次将继续上一篇文章没有讲完的Menu的学习,上下文菜单(Context menu)和弹出菜单(Popup menu)
收藏 0 赞 0 分享

Android学习笔记——Menu介绍(三)

今天继续昨天没有讲完的Menu的学习,主要是Popup Menu的学习,需要的朋友可以参考下
收藏 0 赞 0 分享

Android显示网络图片实例

这篇文章主要介绍了Android显示网络图片的方法,以实例形式展示了Android程序显示网络图片的方法,非常具有实用价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多