Arc progress bar (animated version), arc progress bar animated version

Arc progress bar (animated version), arc progress bar animated version

This blog is original as long as it does not indicate "Conversion". For the post, please indicate the link to this blog.

 

Let's first break down the problem into the following three small problems.

1. How to draw an arc

2. How to load the Arc Belt

3. How to make the progress value rotate along the Arc

 

1. Let's first look at the progress bar.

The progress bar is very simple, with an arc. The long white arc is 100%, and the shorter red arc is the current progress.

Here I use an arc, with a radian of 240 degrees. Here, I use an angle system and a radian system to calculate the trigonometric function, therefore, conversion is required.

 

Now we know the progress bar we want, and there is a way to make it.

First draw an arc, 240 degrees, and then draw an arc, the progress in the figure is 7/8 = 87.5%, the red arc degree is 240*7/8 = 210 degrees. We only need to press a red arc on the Starting Arc.

The arc has a characteristic that the two ends are circular. So we need to set the Paint first.

MPaint = new Paint (); mPaint. setAntiAlias (true); // eliminate the Sawtooth mPaint. setStyle (Paint. style. STROKE); // draw a hollow circle mPaint. setStrokeWidth (mRingWidth); // set the progress bar width mPaint. setColor (mRingColor); // set the progress bar color mPaint. setStrokeJoin (Paint. join. ROUND); mPaint. setStrokeCap (Paint. cap. ROUND); // sets the rounded corner.

Of course we have two arcs. The painting settings are similar.

 

Below we start to draw an arc, the code is like below

Protected void onDraw (Canvas canvas) {canvas. drawArc (...); // complete arc canvas. drawArc (...); // red progress bar arc super. onDraw (canvas );}

DrawArc is the arc function.

Public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint)

Here we need to explain the startAngle and sweepAngle parameters.

The two parameters determine the two sides of the corner,StartAngle is the starting edge. It uses the starting point as the center, and the position after the sweepAngle degree is clockwise as the final edge.In this way, an angle is determined to determine an arc.0 degrees is in the direction of three o'clock, that is, the positive direction of the X axis.

In the gray section of the arc is how many degrees to how many degrees, I choose from-210 degrees, to 30 degrees, the range is 240 degrees.

 

Now we can start to draw an arc.

First, determine the size of the View. Here, let the View be a square. Set both width and height to Math. min (width, height.

Knowing the size of the View, we can place a small square in the Square in the center. The distance between the two squares is half the arc width. Then, the painting spreads by 1/2 arc width inside and outside respectively.

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);    int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);    int sideLength = Math.min(widthSpecSize, heightSpecSize);    setMeasuredDimension(sideLength, sideLength);}

Next we will draw an arc

Private float mStart =-210; private static final int FULL_ANGLE = 240; @ Overrideprotected void onDraw (Canvas canvas) {RectF mBigOval = new RectF (mRingWidth/2, mRingWidth/2, getWidth ()-(mRingWidth + 1)/2, getHeight ()-(mRingWidth + 1)/2); canvas. drawArc (mBigOval, mStart, FULL_ANGLE, false, mRemainderPaint); // a gray arc canvas. drawArc (mBigOval, mStart, delta, false, mPaint); // red arc super. onDraw (canvas );}

Delta is our progress, but delta ranges from 0 to 240.

Now, how to create an arc progress bar is finished. The following is an animation for it.

2. animation is also very easy. We only need to keep delta from 0 to our final progress.

We implement the ValueAnimator. AnimatorUpdateListener interface.

public void setDelta(float delta) {    this.delta = delta;}@Overridepublic void onAnimationUpdate(ValueAnimator animation) {    invalidate();}

After delta is changed, refresh the View.

 

3. It is difficult to place a number on it and let it move along with the progress bar.

We know that each View is a rectangle, and the number is placed in a rectangle TextView, so the question is how to make the rectangle run around the Arc. Let's first look at the figure below.

If you only consider the arc top side when designing your program, the following problems may occur.

A. if the distance from the bottom side of the rectangle to the arc is used as the reference for rotation, how should we select the reference when the rectangle is rotated to another direction (not top, bottom, left, right?

If the distance from a vertex of a rectangle to an arc is still very troublesome, consider the different situations in the four quadrants and the special circumstances when the rectangle is rotated to the arc square direction.

B. if we use the O1 distance from the center of the rectangle to the O distance from the center of the circle as the reference for rotation, it will be much better, but we can see the rectangle in the upper right corner of the arc. After the rotation, the rectangle and the arc shape are in contact!

 

The smart person can see from the figure that when the distance between the rectangle and the center of the circle is closest, it is the time when a vertex of the rectangle is rotated to the link between O and the center of the rectangle. Because in the circle, the radius of the line segment starting from the center is the largest. It's easy to know the rest of this. We just need to keep the circle of the size tangent (center distance = R + r). Of course, the distance is even bigger, that is, it's not very nice.

For TextView, we can even make the two circles slightly cross each other. Because text does not fill up TextView. The larger the font size, the larger the white space left up and down.

For more information, click here. In addition, set Android: includeFontPadding to false!

 

As we know, rotating the center of a rectangle around the center of a certain length is what we want. The following question is how to place the rectangle on the screen. First, we need to find out the relationship between α and O2 in the center of the rectangle. In addition, we have no way to make android take the rectangle center as a reference. That is to say, we need to find the relationship between α and a vertex in the rectangle through the relationship between α and the rectangle center O2.

 

We record the center distance as D (OO2 ). So

OA = Dcos α, AO2 = Dsin α

The O coordinate of the center is recorded as (x, y). We know the arc position in advance, so both x and y are known here. So the O2 coordinate is

O2 (x + Dcos α, y-Dsin α)

Now, we know the relationship between α and O2 in the center of the rectangle. Next we will calculate the relationship between vertex B (not marked in the figure) and α in the upper left corner of the rectangle. Obviously, we need to know the width and height of the rectangle. The size of the rectangle is directly related to the font size and the length of the text. Here we use a simple and crude method to find a TextView and put it into the text and style you want, and then measure it ...... W and h respectively. Then, the coordinates of B are

B (x + Dcos α-w/2, y-Dsin α-h/2)

Finally, there are some details. For example, the α variation ranges from 210 ° to-30 °.

 

 

Repost the following link

My blog address

Http://su1216.iteye.com/

Http://blog.csdn.net/su1216/

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.