Implement a simple Android switch

Recently in the study of Android graphics in the drawing series, according to the idea of the great God, find gourd painting scoop realized a switch, under:

Record the implementation method:

1. Painting background

Shape, divided into two semicircle with a rectangle, then the code can be written as:

  Private voidDrawbackground (canvas canvas) {Mbackgroundpaint.SetColor (Mcurrentbackgroundcolor);//Draw the right half circleRECTF RECF= NewRECTF (mtogglewidth/ 2 -Mradius,-mradius, Mtogglewidth/ 2 +Mradius, Mradius); Canvas.DrawArc (RECF,- -, the,true, Mbackgroundpaint);//Draw RectangleRECTF Tangle= NewRECTF (-mtogglewidth / 2,-mradius, Mtogglewidth/ 2, Mradius); Canvas.DrawRect (Tangle, mbackgroundpaint);//Draw the left half circleRECTF RECTF= NewRECTF (-mtogglewidth / 2 -Mradius,-mradius,-mtogglewidth / 2 +Mradius, Mradius); Canvas.DrawArc (RECTF, the,- the,true, Mbackgroundpaint); Canvas.Restore (); }

3. Draw Dots:

Here I am using a ring [purple]+ inside cut ring of solid circle [blue] constitute, perhaps you will say, directly set Panint.setstrokewidth not can, this idiot, hehe, actually I also want, but found not to ah "more ugly, and my color is not good set, hehe, You'll find out if you try. "
The Purple ring is responsible for showing the inner solid circle, forming a boundary effect, which is very good for white solid circles.

4. Setting the Switch

publicvoidsetOpen(boolean isOpen) {        if (mIsOpen != isOpen) {            mIsOpen = isOpen;            showAnimation(mIsOpen);        }    }

As you can see, here I used the animated display effect, in the Android rampage era, without adding animation will show blunt. For a pear, I first met a friend to do a similar switch, directly called the visual Engineer [is the art] cut two pictures, have to say, the man is very clever, I naturally learned, and later found a good blunt ah, no sense of beauty, so I wrote.

A. Radius of a solid circle:

As you can see clearly in the diagram, I can write the code directly:

        //mtogglewidth is exactly the length of the rectangular rectangle:        Final floatStart = IsOpen? -mtogglewidth/2: Mtogglewidth/2;floatEnd = IsOpen? Mtogglewidth/2:-mtogglewidth/2;        Valueanimator animator = Valueanimator.offloat (start, end);        Animator.setduration (Manimationtime); Animator.setinterpolator (NewLinearinterpolator ()); Animator.addupdatelistener (NewValueanimator.animatorupdatelistener () {@Override             Public void onanimationupdate(Valueanimator valueanimator) {mcurrentxposition = (float) Valueanimator.getanimatedvalue ();                Setcurrentcolor ();            Invalidate ();        }        });    Animator.start (); }

B. Discoloration of the background:
From off the color to the open color, which is there is too much color, not clear, good you look at this:
Clearly, well, how do you play this color????

Many of the great God's articles have an introduction called Color estimator, namely:

 ValueAnimator.ofArgb(...)

Originally with this is easy to achieve, I can practice the SDK min version is 14, also really lazy to change, OK, too lazy to change my thinking method, method is this:

I am in the coordinates of the S point I know, then I can calculate the percentage of my animation execution, yes, what do you mean? ：

  floatpercent21.0f / mToggleWidth;

This view can be intuitive, I will not talk about, in fact, I am not very good at maths, but also special just learn paint, also engaged for a long time, more to engage may be good. Knowing the percentage of the animation, then we know the animation at any moment:

 float  percent  = (mcurrentxposition + mtogglewidth/2 ) * 1.0  f/mtogglewidth; int  currentr = (int ) ((Mendbgcolorr-        Mstartbgcolorr) * percent  + Mstartbgcolorr); int  currentg = (int ) ((Mendbgcolorg-        mstartbgcolorg) * percent  + mstartbgcolorg); int  currentb = (int ) ((Mendbgcolorb-        Mstartbgcolorb) * percent  + mstartbgcolorb); Mcurrentbackgroundcolor = Color.rgb (Currentr, CURRENTG, CURRENTB);  

The endbgcolor here refers to the background color at the end, while Startbgcolor refers to the background color at the beginning.

Well, you can see, you can also expand on my basis, just learn this aspect of things, the great God do not spray, needs bark.
Finally, the code.

Implement a simple Android switch