Android self-setting view realizes _android of imitation QQ movement steps arc and animation effect

In the previous Android ultra-precision pedometer development-dylan step of the home page to use a custom control, and the QQ movement of the interface is a bit similar, and animation effect, the following is to tell how this view is drawn.

1. See the effect chart first

2. Effect Chart Analysis

Function Description: Yellow on behalf of the user set the total plan of exercise steps, red on behalf of the user is currently walking the number of steps.

Preliminary analysis: Fully customizable view rewrite the OnDraw () method, drawing an arc.

3. Draw a circular arc essential knowledge

There is a method of drawing an arc in the canvas

DrawArc (RECTF oval, float startangle, float sweepangle, Boolean usecenter, Paint Paint)//Arc painting,

Parameter one is the RECTF object, and the boundary of a rectangular region is used to define the shape, size, arc,

Parameter two is the starting angle (degree) at the beginning of the arc, the arc starting angle, the unit is degree.

Parameter three arc sweep angle, clockwise direction, unit for degrees, starting from right middle to 0 degrees.

Parameter four is if True (true), the center of the circle is included when the arc is drawn, which is usually used to draw a pie, and if False (false) it will be an arc.

Parameter five is a paint object;

For this method, we can look at my hand-painted sketches, more rotten, express the meaning of these parameters and the drawing process, the painting is not good Hope everyone forgive me!

4. Preparation of drawings

(1). Get Center Point coordinates

/** Center Point of the x-coordinate
/float CenterX = (getwidth ())/2;

(2). Establish a reference rectangle outside the arc

/** specifies the outer contour rectangular area of the arc
/RECTF RECTF = new RECTF (0 + borderwidth, borderwidth, 2 * centerx-borderwidth, 2 * centerx-borde Rwidth);

5. Main steps of Drawing

(1). "First step" to draw the whole yellow arc

/** * 1. The yellow arc of the total number of steps * * @param canvas brush * @param RECTF Reference Rectangle * * private void Drawarcyell ow (Canvas Canvas, RECTF rectf) {Paint Paint = new Paint ();/** default brush color, yellow/Paint.setcolor (Getresources (). GetColor (R.colo
R.yellow));
The/** joint is an arc/paint.setstrokejoin (Paint.Join.ROUND);
/** set the style of the brush Paint.Cap.Round, cap.square, etc. are circular, square * * PAINT.SETSTROKECAP (Paint.Cap.ROUND); /** sets the fill style of the brush Paint.Style.FILL: padding inside; Paint.Style.FILL_AND_STROKE: Fills inside and stroke;
Paint.Style.STROKE: Only Strokes * * * Paint.setstyle (Paint.Style.STROKE);
/** anti-aliasing function */Paint.setantialias (TRUE);
/** Set Brush Width * * paint.setstrokewidth (borderwidth); /** the method of drawing arcs * DRAWARC (RECTF oval, float startangle, float sweepangle, Boolean usecenter, Paint Paint)/Draw arcs, parameter one is RECTF object, a rectangle
The boundary of the ellipse is used to define the shape, size, arc, parameter two is the starting angle (degree) at the beginning of the arc, the angle of the arc starting, the unit for degrees.
Parameter three arc sweep angle, clockwise direction, unit for degrees, starting from right middle to 0 degrees. Parameter four is if this is true (true), the center of the circle is included when the arc is drawn, and is usually used to draw a sector; if it is false (false) it will be an arc, and the parameter five is the paint object; * * CANVAS.DRAWARC (RECTF, StartAngle,
Anglelength, false, paint); }

(2). "Step two" to draw the red arc of the current progress

/**
* 2. Draw the current number of steps of the red arc *
/private void drawarcred (Canvas Canvas, RECTF rectf) {
Paint paintcurrent = new Pai NT ();
Paintcurrent.setstrokejoin (Paint.Join.ROUND);
Paintcurrent.setstrokecap (Paint.Cap.ROUND);//Fillet radians
paintcurrent.setstyle (Paint.Style.STROKE);//Set Fill style
Paintcurrent.setantialias (TRUE);/anti-aliasing
paintcurrent.setstrokewidth (borderwidth);//Set Brush width
Paintcurrent.setcolor (Getresources (). GetColor (r.color.red));/Set Brush color
canvas.drawarc (RECTF, StartAngle, Currentanglelength, False, paintcurrent);

(3). "Step three" draws the red number of the current progress

/**
* 3. The number of steps in the center of the ring
/private void Drawtextnumber (Canvas Canvas, float CenterX) {
Paint vtextpaint = new Pai NT ();
Vtextpaint.settextalign (Paint.Align.CENTER);
Vtextpaint.setantialias (TRUE);//anti-aliasing
vtextpaint.settextsize (numbertextsize);
typeface font = Typeface.create (Typeface.sans_serif, typeface.normal);
Vtextpaint.settypeface (font);//font style
Vtextpaint.setcolor (Getresources (). GetColor (r.color.red));
Rect bounds_number = new Rect ();
Vtextpaint.gettextbounds (stepnumber, 0, Stepnumber.length (), bounds_number);
Canvas.drawtext (Stepnumber, CenterX, GetHeight ()/2 + bounds_number.height ()/2, vtextpaint);

(4). "Step fourth" to draw the red number of "step number"

/**
* 4. The text of the Ring Center [step
]
/private void drawtextstepstring (Canvas Canvas, float CenterX) {
Paint Vtextpaint = new Paint ();
Vtextpaint.settextsize (DIPTOPX);
Vtextpaint.settextalign (Paint.Align.CENTER);
Vtextpaint.setantialias (TRUE);//anti-aliasing
Vtextpaint.setcolor (Getresources (). GetColor (R.color.grey));
String stepstring = "Step number";
Rect bounds = new Rect ();
Vtextpaint.gettextbounds (stepstring, 0, Stepstring.length (), bounds);
Canvas.drawtext (stepstring, CenterX, GetHeight ()/2 + bounds.height () + getfontheight (numbertextsize), vTextPaint); c13/>}

6. How the animation is implemented->valueanimator

Valueanimator is the core of the entire attribute animation mechanism of a class, the operating mechanism of the property animation is through continuous operation of the value of the implementation, and the animation between the initial value and the end value of the transition is valueanimator this class to be responsible for the calculation. Its interior uses a mechanism of time cycling to compute the animation transition between value and value, and we just need to provide the initial and end values to Valueanimator, and tell it how long the animation needs to run. Then Valueanimator will automatically help us finish the transition from the initial value to the end value smoothly.

/* Set Animation for Progress *
@param start initial value
* @param current End value
* @param length animation length
/private void Setanimation (f Loat start, float current, int length) {
Valueanimator progressanimator = valueanimator.offloat (start, current);
Progressanimator.setduration (length);
Progressanimator.settarget (currentanglelength);
Progressanimator.addupdatelistener (New Valueanimator.animatorupdatelistener () {
@Override public
Void Onanimationupdate (Valueanimator animation) {
/** each time the value of a smooth transition between the initial value and the end value, progressively updates the progress * * *
currentanglelength = ( float) animation.getanimatedvalue ();
Invalidate ();
}
);
Progressanimator.start ();
}

7. The entire custom Steparcview source code

Import Android.animation.ValueAnimator;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import Android.graphics.Paint;
Import Android.graphics.Rect;
Import Android.graphics.RectF;
Import Android.graphics.Typeface;
Import Android.util.AttributeSet;
Import Android.view.View;
Import CN.BLUEMOBI.DYLAN.STEP.R;
/** * Created by dylanandroid on 2016/5/26.
* Show the steps of the ARC/public class Steparcview extends View {/** * The width of the arc * * * private float borderwidth = 38f;/** * Number of steps in the font size of the value * *
private float numbertextsize = 0;
/** * * The number of steps/private String Stepnumber = "0";
/** * start to draw the angle of the arc * * Private float startangle = 135;
/** * The angle of the point corresponding to the starting point at the end of the endpoint/private float anglelength = 270;
/** * The angle of the current number of steps to be drawn at the end of the red arc to the starting point * * Private float currentanglelength = 0;
/** * Animation Length * * private int animationlength = 3000; Public Steparcview {Super (context);} public Steparcview (context context, AttributeSet Attrs) {Super (CO
ntext, attrs); Public Steparcview, AttributeSet attrs, int DEFSTYLEATTR) {Super (context, attrs, defstyleattr);} @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canv
AS);
/** Center Point of the X-coordinate/float CenterX = (getwidth ())/2; /** specifies the outer contour rectangular area of the arc/RECTF RECTF = new RECTF (0 + borderwidth, borderwidth, 2 * centerx-borderwidth, 2 * centerx-borderwid
TH);
/** "First step" to draw the whole yellow arc * * * * Drawarcyellow (canvas, RECTF);
/** "Step two" to draw the current progress of the red arc * * * drawarcred (canvas, RECTF);
/** "Step three" to draw the current progress of the red number * * * drawtextnumber (canvas, CenterX);
/** "Fourth step" to draw "step number" of the red number * * * drawtextstepstring (canvas, CenterX); 
/** * 1. Yellow ARC Drawing Total steps * * @param canvas brush * @param RECTF Reference Rectangle * * private void Drawarcyellow (canvas canvas, RECTF RECTF) {
Paint Paint = new Paint ();
/** default brush color, yellow/Paint.setcolor (Getresources (). GetColor (R.color.yellow));
The/** joint is an arc/paint.setstrokejoin (Paint.Join.ROUND);
/** set the style of the brush Paint.Cap.Round, cap.square, etc. are circular, square * * PAINT.SETSTROKECAP (Paint.Cap.ROUND); /** sets the fill style of the brush Paint.Style.FILL: padding inside; Paint.Style.FILL_AND_STROKE: Fills inside and stroke; Paint.Style.STROKE: Only Stroke/Paint.setstyle (Paint.Style.stroke);
/** anti-aliasing function */Paint.setantialias (TRUE);
/** Set Brush Width * * paint.setstrokewidth (borderwidth); /** the method of drawing arcs * DRAWARC (RECTF oval, float startangle, float sweepangle, Boolean usecenter, Paint Paint)/Draw arcs, parameter one is RECTF object, a rectangle
The boundary of the ellipse is used to define the shape, size, arc, parameter two is the starting angle (degree) at the beginning of the arc, the angle of the arc starting, the unit for degrees.
Parameter three arc sweep angle, clockwise direction, unit for degrees, starting from right middle to 0 degrees. Parameter four is if this is true (true), the center of the circle is included when the arc is drawn, and is usually used to draw a sector; if it is false (false) it will be an arc, and the parameter five is the paint object; * * CANVAS.DRAWARC (RECTF, StartAngle,
Anglelength, false, paint); /** * 2. Draw the current number of steps of the red arc/private void drawarcred (Canvas Canvas, RECTF rectf) {Paint paintcurrent = new Paint (); Paintcurr
Ent.setstrokejoin (Paint.Join.ROUND);
Paintcurrent.setstrokecap (Paint.Cap.ROUND);//Fillet radians Paintcurrent.setstyle (Paint.Style.STROKE);//Set Fill style Paintcurrent.setantialias (TRUE);/anti-aliasing paintcurrent.setstrokewidth (borderwidth);//Set Brush width paintcurrent.setcolor ( Getresources (). GetColor (r.color.red))//Set Brush color Canvas.drawarc (RECTF, StartAngle, Currentanglelength, False,
Paintcurrent); /** * 3. The number of steps in the center of the ring/private void Drawtextnumber (Canvas CANvas, float CenterX) {Paint vtextpaint = new Paint (); vtextpaint.settextalign (Paint.Align.CENTER);
Vtextpaint.setantialias (TRUE);//anti-aliasing vtextpaint.settextsize (numbertextsize);
typeface font = Typeface.create (Typeface.sans_serif, typeface.normal);
Vtextpaint.settypeface (font);//font style Vtextpaint.setcolor (Getresources (). GetColor (r.color.red));
Rect bounds_number = new Rect ();
Vtextpaint.gettextbounds (stepnumber, 0, Stepnumber.length (), bounds_number);
Canvas.drawtext (Stepnumber, CenterX, GetHeight ()/2 + bounds_number.height ()/2, vtextpaint); /** * 4. The text of the Ring Center [step]/private void drawtextstepstring (Canvas Canvas, float CenterX) {Paint vtextpaint = new Paint (); v
Textpaint.settextsize (DIPTOPX (16));
Vtextpaint.settextalign (Paint.Align.CENTER);
Vtextpaint.setantialias (TRUE);//anti-aliasing Vtextpaint.setcolor (Getresources (). GetColor (R.color.grey));
String stepstring = "Step number";
Rect bounds = new Rect ();
Vtextpaint.gettextbounds (stepstring, 0, Stepstring.length (), bounds); Canvas.drawtext (Stepstring, CenterX, GetHeight ()/2 + bounds.height () + getfontheight (numbertextsize), vtextpaint); /** * Get the height of the number of the current step * * @param fontsize font size * @return Font Height * * public int getfontheight (float fontsize) {Paint Paint = n
EW Paint ();
Paint.settextsize (fontsize);
Rect bounds_number = new Rect ();
Paint.gettextbounds (stepnumber, 0, Stepnumber.length (), bounds_number);
return Bounds_number.height (); /** * Dip Convert to px * * @param dip * @return/private int diptopx (float dip) {float density = getcontext (). Getresources ()
. Getdisplaymetrics (). density;
return (int) (DIP * density + 0.5f * (Dip >= 0? 1:-1));  /** * The pace of progress * * @param totalstepnum Set the number of steps * @param currentcounts walk number * * public void Setcurrentcount (int totalstepnum,
int currentcounts) {stepnumber = currentcounts + "";
Settextsize (currentcounts); /** if the current step exceeds the total step number, the arc or 270 degrees, cannot become the park/if (Currentcounts > Totalstepnum) {currentcounts = Totalstepnum;}/**
The number of steps used to occupy the total number of step/float scale = (float) currentcounts/totalstepnum; /** converted into radians the last angle to reachDegree of length--> arc length/float currentanglelength = scale * ANGLELENGTH;
/** began to perform animation/setanimation (0, Currentanglelength, animationlength); /** * Animation for Progress * Valueanimator is the core of the entire property animation mechanism of a class, the operation mechanism of the property animation through the constant operation of the value of the implementation, *
The animation transition between the initial value and the end value is computed by the Valueanimator class. * Its interior uses a mechanism of time cycling to compute the animation transition between values and value, * we only need to provide the initial and end values to the Valueanimator, and tell it how long the animation is required to run, *
Then Valueanimator will automatically help us finish the transition from the initial value to the end value smoothly. * @param last * @param/private void setanimation (float last, float current, int length) {Valueanimator progr
Essanimator = Valueanimator.offloat (last, current);
Progressanimator.setduration (length);
Progressanimator.settarget (currentanglelength); Progressanimator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void Onanimationupdate (Valueanimator animation) {currentanglelength = (float) animation.getanimatedvalue (); invalidate ();}}
);
Progressanimator.start (); /** * Sets the text size, prevents the number of steps from being put down, dynamically setting the font size * @param num */public void settextsize (int num) {String s = string.valUeof (num);
int length = S.length ();  if (length <= 4) {numbertextsize = Diptopx (m);} else if (length > 4 && length <= 6) {numbertextsize =
DIPTOPX (40); else if (length > 6 && length <= 8) {numbertextsize = Diptopx ()} else if (length > 8) {numbertext
Size = DIPTOPX (25); }
}
}

8. Instructions for use

in XML

<cn.bluemobi.dylan.step.view.steparcview
android:id= "@+id/sv"
android:layout_width= "200DP
" android:layout_height= "200DP"
android:layout_centerhorizontal= "true"
android:layout_margintop= "50DP"/ >

In activity

Steparcview SV = (steparcview) Findviewbyid (R.ID.SV);
Sv.setcurrentcount (7000, 1000);

The above is a small set to introduce Android imitation QQ movement steps arc and animation effect, I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!