This is the 21st day of my participation in the August Text Challenge.More challenges in August

Series of articles

Android custom view using drawArc dynamic effect

---

The source code will be attached at the end of the article

---

preface

A few days ago, I read a blog by a Byte Android engineer. He implemented the effect of scrolling lyrics up and down. The key to the implementation is to define an offset, and then modify the value according to the situation, and finally trigger the View to redraw to achieve the effect. So today according to this idea to write a simple article.

---

A, preparation,

Before we do that, let’s briefly describe some of the preparations for a custom view

1. The measurement

  @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        useWidth = mWidth;
        if(mWidth > mHeight) { useWidth = mHeight; }}Copy the code

2. Initialize the brush

    private void initPaint(a) {
        / / initialization
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(0x88FF0000);
        mPaint.setStrokeWidth(4);

        / / initialization
        mFramePaint = new Paint();
        mFramePaint.setAntiAlias(true);
        mFramePaint.setStyle(Paint.Style.STROKE);
        mFramePaint.setStrokeWidth(0);
    }
Copy the code

3. Customize attributes

For more information, please refer to my previous article: Android custom View of go animation

---

2. Introduction of key methods

drawArc

There are five parameters in this method

• Oval: Specifies the outer outline rectangular region of an arc.
• StartAngle: The starting Angle of the arc, in degrees.
• SweepAngle: The Angle of the arc swept clockwise, in degrees, zero degrees from right center.
• UseCenter: When True, include the center of a circle when drawing arcs, usually used to draw fans.
• Paint: Artboard property for drawing arcs.

3. Implement

1. The train of thought

Do this by changing the value of the sweepAngle (the third argument to the method above) and then refreshing the View

The code is as follows:

        mSweep += SWEEP_INC;
        if (mSweep > 360) {
            mSweep -= 360;
        }
        / / refresh the View
        invalidate();
Copy the code

2. The rendering

The source code

MySampleView.java

public class MySampleView extends View {
    private int mWidth;
    private int mHeight;
    private int useWidth, minwidth;
    private Paint mPaint;
    private Paint mFramePaint;
    private RectF mBigOval;
    private float mStart;
    private float mSweep;

    private static final float SWEEP_INC = 2;

    public MySampleView(Context context) {
        super(context);
    }

    public MySampleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public MySampleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
    private void init() {
        initPaint();
    }
    private void initPaint() {// initialize mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(0x88FF0000); mPaint.setStrokeWidth(4); // Initialize mFramePaint = new Paint(); mFramePaint.setAntiAlias(true);
        mFramePaint.setStyle(Paint.Style.STROKE);
        mFramePaint.setStrokeWidth(0);
    }
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        useWidth = mWidth;
        if(mWidth > mHeight) { useWidth = mHeight; } } @Override protected void onDraw(Canvas canvas) { init(); // define a minimum identifier minwidth = useWidth / 10; mBigOval = new RectF(minwidth, minwidth, minwidth*9, minwidth*9); // Draw the background canvas.drawColor(color.white); canvas.drawRect(mBigOval, mFramePaint); canvas.drawArc(mBigOval, mStart, mSweep,true, mPaint);


        mSweep += SWEEP_INC;
        if(mSweep > 360) { mSweep -= 360; } // refresh View invalidate(); }}Copy the code