Last week, I met a requirement to show the proportion of an operation in the form of a circular progress bar. Although there are many similar wheels, I think it would be better to write this simple custom View myself if I have time.

First take a look at the renderings:

Analysis: As can be seen from the renderings, the overall effect is divided into the following parts:

  • Background circle
  • Progress of the arc
  • End small circle (should not exist when progress is 0 and 100%)
  • Three lines inside

How to achieve: After analyzing the overall framework, the idea is actually very simple, I realize it like this:

  1. Draw circles background
  2. Draw an arc by calculating the arc of the sweep according to the current progress
  3. Draw two solid circles of different sizes with the position of the end of the second step as the coordinate to achieve the design effect
  4. Draw three lines of text

In the third step, the trigonometric function is used to determine the end position of the arc. A simple graph is drawn here, which is easy to understand:

Starting at the vertex, the radius of the circle is r, and the arc is swept at an Angle of alpha.

The code is simply listed below the main code, the full code address is placed at the end of the text. 1. To be more flexible, I have provided a number of attributes for users to set themselves:

    private String title;
    private String num;
    private String unit;

    private float titleTextsize;
    private float numTextsize;
    private float unitTextsize;

    private int titleTextColor;
    private int numTextColor;
    private int unitTextColor;

    private float backCircleWidth;
    private float outerCircleWidth;

    private int backCircleColor;
    private int outerCircleColor;

    private float endCircleWidth;
    private int endCircleColor;Copy the code

2. To make the code clearer, I set the following Paint

Private Paint backCirclePaint,// Paint the background circle,// Paint the progress circle endCirclePaint,// Paint the end large solid circle endCirclePaint2,// Paint the end small solid circle TitlePaint,// draw the first line numPaint,// draw the second line unitPaint; Draw the third line of textCopy the code

3. In the onDraw method to achieve the drawing operation

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int centerX = width / 2; int centerY = height / 2; Float radius = (width / 2) -outerCircleWidth + (outerCircleWidth - backCircleWidth) / 2; float radius = (width / 2) -outerCircleWidth + (outerCircleWidth - backCircleWidth) / 2; DrawCircle (centerX, centerY, radius, backCirclePaint); RectF RectF = new RectF(outerCircleWidth / 2 + backCircleWidth / 2, outerCircleWidth / 2 + backCircleWidth / 2, width - outerCircleWidth / 2 - backCircleWidth / 2, height - outerCircleWidth / 2 - backCircleWidth / 2); canvas.drawArc(rectF, -90, 360 * currentPercent, false, outerCirclePaint); TextRect = new Rect(); titlePaint.getTextBounds(title, 0, title.length(), textRect); canvas.drawText(title, width / 2 - textRect.width() / 2, height / 4 + textRect.height() / 2, titlePaint); numPaint.getTextBounds(num, 0, num.length(), textRect); canvas.drawText(num, width / 2 - textRect.width() / 2, height / 2 + textRect.height() / 2, numPaint); unitPaint.getTextBounds(unit, 0, unit.length(), textRect); canvas.drawText(unit, width / 2 - textRect.width() / 2, height * 2 / 3 + textRect.height() / 2, unitPaint); // I only draw the end circle when the progress is 0~100%, If (currentPercent < 1 &&CurrentPercent > 0) {canvas.drawCircle(centerX + rectf.width () / 2 * (float) Math.sin(360 * currentPercent * Math.PI / 180), centerY - rectF.width() / 2 * (float) Math.cos(360 * currentPercent * Math.PI / 180), endCircleWidth / 2, endCirclePaint); canvas.drawCircle(centerX + rectF.width() / 2 * (float) Math.sin(360 * currentPercent * Math.PI / 180), centerY - rectF.width() / 2 * (float) Math.cos(360 * currentPercent * Math.PI / 180), endCircleWidth / 4, endCirclePaint2); }}Copy the code

Full code address



Progressviewwithcircle (progressViewWithCircle, progressViewWithCircle, progressViewWithCircle, progressViewWithCircle, progressViewWithCircle (ProgressViewWithCircle, ProgressViewWithCircle)