preface

At present, there are basically splash screen pages in our App, and most of the splash screen pages will add advertising information or our own logo and other promotional pictures to display, similar to the following effect:

Train of thought

Using a custom View, it is easy to change the display progress by drawing different arcs in onDraw() using the View’s redraw method Invalidate(). Let’s take a look at the implementation

  1. Determine the drawing position, first inonDraw()Get the width and height of the View and define a rectangle for our drawing range:
        int width = this.getWidth();
        int height = this.getHeight();

        if(width ! = height) {int min = Math.min(width, height);
            width = min;
            height = min;
        }
        
        // Define the rectangle's mStrokeWidth as the brush width
        // Why start from the brush width /2 position, see the picture below, red is the brush path, black is the rectangle position we defined
        mRectF.left = mStrokeWidth / 2;
        mRectF.top = mStrokeWidth / 2;
        mRectF.right = width - mStrokeWidth / 2;
        mRectF.bottom = height - mStrokeWidth / 2;
Copy the code

  1. Draw the background color, half of it is a translucent color, because half of it will display a skip or countdown time text, opaque can not see the following picture, full transparent and may be similar to the color of the bottom picture and can not see clearly. The canvas background color should be set to transparent:
        // Set the canvas to transparent
        canvas.drawColor(Color.TRANSPARENT);

        // Draw a translucent circle as the background
        mPaint.setColor(Color.parseColor("# 33000000"));
        // Set the brush to fill mode
        mPaint.setStyle(Paint.Style.FILL);
        // Draw an ellipse
        canvas.drawOval(mRectF, mPaint);
Copy the code
  1. Adjust the brush properties to draw an arc. Note that the starting Angle of the arc is 0 degrees at 3 o ‘clock and -90 degrees at 12 o ‘clock.
        // Set the brush
        mPaint.setAntiAlias(true);              / / anti-aliasing
        mPaint.setColor(paintColor);            // Set the brush color
        mPaint.setStyle(Paint.Style.STROKE);    // Set the brush fill mode
        mPaint.setStrokeWidth(mStrokeWidth);    // Set the brush width

        The first parameter is the rectangle we define to control the drawing area. It can also be controlled by passing the distance of the top, bottom, left and right borders directly
        // The second argument is the starting Angle of the arc
        // The third parameter is the range of angles to draw, which is mainly controlled by this parameter
        // The fourth parameter indicates whether the circle is connected to the center of the circle
        // mProgress is the current progress, the - sign is to control the drawing direction
        canvas.drawArc(mRectF, -90, -(mProgress / mMaxProgress) * 360.false, mPaint);
Copy the code
  1. The method of time schedule calculation here needs to be optimized, and the feeling is not particularly good. Now the loop controls the short sleep, using the View’s redraw method to update the drawing progress. Note here that the child thread must callpostInvalidate()Method to redraw.
/** * start countdown **@paramTime Indicates the countdown time in milliseconds */
    public void startDownTime(final long time) {
        // Maximum progress
        mMaxProgress = 100;
        // Start the child thread to do the sleep operation
        new Thread(new Runnable() {
            @Override
            public void run(a) {
                for (int i = (int) mMaxProgress; i >= 0; i--) {
                    try {
                        Thread.sleep((long) (time / mMaxProgress));
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    mProgress = (float) i;
                    // Invalidate () must be called in child threads only in the UI thread
                    ProgressView.this.postInvalidate();
                }
            }
        }).start();
    }
Copy the code

conclusion

You can change the way the progress bar works by changing the traversal method of the last step set, by controlling the direction of the drawing Angle, and so on. Source code Demo can be downloaded here: click here to jump to Github

If you have any questions or suggestions, please leave a message