Android Custom View Imitation vivo I housekeeper virus scanning animation effect

Technology is never-ending, if the true love of technology, then brave to stick to it. I like this sentence very much, when I encountered the problem, when I think the code is boring, I will ask myself, in the end is not really love technology, this time, my heart is always up with waves, my answer is yes, I deeply love this door technology.

Today we're going to talk about Android's Custom view series. Let's look at the effect first:

This is my mobile phone anti-virus software animation effect, similar to radar search, so the use is still very extensive, especially the first to understand the specific logic here and the wording, the progress of technology must be very useful.

First of all, a simple analysis of the elements here, mainly four circles, a fan, and eight dotted lines. When this is known, the code can begin to write.

Let's see what variables are used here.

      Mwidth;

      Mheight;

     Paint Mpaint, MPaint2, MPaint3, MPaint4, Mlinepaint;

     RECTF MRECTF;

      StartAngle =;

      Radius1, Radius2, Radius3, RADIUS4;
     Path path;

Not many, there are 6 brushes, then width and height, there is the angle and the radius of four circles, as well as a rectangle, and of course, the path to draw the dotted line. The next step is to initialize the operation.

    Initialization brush operation
    private void InitData () {
        mpaint = new Paint ()
        mpaint () mpaint (
        true)
        Mpaint (Style)
        mpaint (Color ())

        MPaint2 = new Paint ()
        mPaint2 ()
        MPaint2 (color ())

        MPaint3 = new Paint (
        ) MPaint3 ()
        MPaint3 (True)
        MPaint3 (Style)
        MPaint3 (Color ())

        mPaint4 = new Paint ()
        mPaint4 ()
        MPaint4 (True)
        mPaint4 (Style)
        mPaint4 (Color ())

        mlinepaint = new Paint (paint_alias_flag)
        Mlinepaint ()
        mlinepaint (Paint)
        Mlinepaint (True)
        Mlinepaint (Color ())

        path = new path ()

    }

This includes the initialization of five brushes, and the initialization of a path. Note that each brush's specific style is not the same, so it is convenient to achieve different effects.
After the initialization of the operation, is to assign a value to the variable, or the same, we choose to Onsizechange () in the face of the variable to assign value. The code is as follows:

    
      (W,  H,  oldw,  oldh) {
        . onsizechanged (W, H, OLDW, OLDH);
        Mwidth = GetWidth ();
        Mheight = GetHeight ();
        MRECTF =  RECTF (() (Mwidth *), () (Mwidth *),
                () (Mwidth *), () (Mwidth *));
        
        LinearGradient gradient =  lineargradient (() (Mwidth *),
                () (Mwidth *), () (Mwidth *),
                () (Mwidth *), 
  [] {
                        color.parsecolor (), Color.green,
                        color.parsecolor (), Color.White,
                        Color.parsecolor ()},
                Shader.TileMode.CLAMP);
        Mpaint2.setshader (gradient);
        
        Radius1 = () (Mwidth *);
        Radius2 = () (Mwidth *);
        RADIUS3 = () (Mwidth *);
        RADIUS4 = () (Mwidth *);

    }

In fact, it is obvious that, in a few of the custom view we talked about, almost all the initial variables are written in this method, what is the characteristic of this method? In fact, this is the system callback method, is the system call, its method name has been told us, this method will change in the size of the view is called by the system, we have to remember that the view size change, this method is executed on it. Most important, it is also invoked before the OnDraw method.

Do you remember the previous effect? There is a gradient, this gradient is the code in the LinearGradient class operation results, the specific usage, I will specifically to explain it later.

Here, basically all the preparation work is done, and then the real drawing is done.
Let's take a look at the actions in the OnDraw method:

    
    protected void OnDraw (Canvas) {
        super.ondraw ();
        Canvasarc ();
        CanvasArc2 ();
        Canvascircle ();
        Canvasline ();

    }

There are painted round, there are fan-shaped, there are lines, so you can find that all of the effects we see are realized in the OnDraw method. Let's look at each method specifically:

First Draw sector:

    
      (Canvas Canvas) {
        Canvas.drawarc (MRECTF, StartAngle,,, MPaint2);
    }

Only two lines of code are easy to understand, and the second sector is similar:

    
      (Canvas Canvas) {
        Canvas.drawarc (MRECTF, StartAngle,,, MPaint3);
    }

It is worth noting that the second sector angle is 1, why is 1, originally I just want it to rotate the angle of effect, do not need it is how wide, so in the specific implementation of the custom view, but also learn to ingenious.

Two fans have been painted, then look at the four circle how to draw:

    
    private void Canvascircle (Canvas) {
        . Drawcircle (Mwidth/, Mheight/, Radius1, MPaint3);
        . Drawcircle (Mwidth/, Mheight/, Radius2, Mpaint);
        . Drawcircle (Mwidth/, Mheight/, RADIUS3, Mpaint);
        . Drawcircle (Mwidth/, Mheight/, RADIUS4, mPaint4);
    

Four circles is four lines of code, how, very simple?

Note that the brushes they use are not the same, and this is a relatively easy place to overlook.

Finally look at my tangled long dotted line operation, here really put me in a good while, look at the code first:

    
      (Canvas Canvas) {
         LineCount =;
         (i =; i < linecount; i++) {
            Path.moveto (mwidth/, mheight/);
            Path.lineto (Radius1, RADIUS4);
            Patheffect effects =  Dashpatheffect ([] {
                    () (Mwidth *), () (Mwidth *),
                    () (Mwidth *), () (Mwidth *)}, );
            Mlinepaint.setpatheffect (effects);
            Canvas.drawpath (path, mlinepaint);
            Canvas.rotate (, Mwidth/, Mheight/);
        }

    

Logically speaking, draw a dashed line, is the essence of drawing lines, but I started with the Canvas.drawline method, but no effect, the Internet to find information, only to know that it may be a version of the problem, so I changed the path.

By this time, the whole effect has come out, so in order to let her move, we still need to add some logic, my idea is this:

Define a thread and then animate it by changing the start angle of the pie.

The code is as follows:

    {@Override run () {() {(
                 running) {
                    systemclock.sleep ());
                    Handler.sendemptymessage ();

      }}} running =;

     Handler Handler =  Handler () {
          handlemessage (android.os.Message msg) {
            synchronized () {
                 ( StartAngle <) {
                    startangle =;
                }  {
                    startangle--;
                    Invalidate ();}}};