Android custom view imitation QQ movement steps effect

This example shares the specific code of Android QQ movement steps for your reference. The specific contents are as follows

Today we achieve the following results:

First, customize the attributes:

<?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>

The custom view code is as follows:

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

}

Finally, it is called in layout and 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();

  }

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.