Android Custom View implementation of the wealth management app 7th profit line chart effect

This time the custom view learning, learned to draw a bar chart, draw a line chart, draw progress control, then we come to talk about another custom view, this is our common 7th-year profit line chart effect. First look what looks like.

This is the effect diagram, the element is relatively still more, here wired, histogram, text, line, point and so on. Looks like it's complicated. However, as long as the implementation of step-by-step, it can still achieve this effect, before we said, custom view, like in the photo shop inside the drawing, what to draw, we can have a lot of brush tools, there can be many layers.

Let's take a look at what variables we use this time.

     Paint Mtextpaint, Mlinepaint,mpathpaint,mpointpaint;
    
      Mpaintrectwidth;
    
     Path MPath;
    
      Mwidth, Mheight;
    
       Mcount =;
    
       offsets=;

      Mrectheight;
    
     List<float> xline= arraylist<float> ();
    
     List<float> yline= arraylist<float> ();

    
      []x={f,f,f,f,f,f,f};
    
     String [] day={,,,,,,};

Note that the tag is detailed enough, for everyone to understand, but also in order to improve the quality of the blog, we note that there is text, there are quantities, basically covers all the variables we need here.

The initialization operation begins below.

      () {
        
        mtextpaint =  Paint ();
        Mtextpaint.setantialias ();
        Mtextpaint.setcolor (Color.parsecolor ());
        Mtextpaint.settextsize ();
        Mtextpaint.setstrokewidth ();

        
        mpointpaint=  Paint ();
        Mpointpaint.setantialias ();
        Mpointpaint.setcolor (Color.parsecolor ());
        Mpointpaint.settextsize ();
        Mpointpaint.setstrokewidth ();

        
        Mlinepaint =  Paint ();
        Mlinepaint.setantialias ();

        
        mpathpaint=  Paint ();
        Mpathpaint.setantialias ();
        Mpathpaint.setcolor (Color.parsecolor ());
        Mpathpaint.setstyle (Style.stroke);

        
        Mpath= Path ();

    }

This is mainly to the brush initialization, you can see that each brush color, width is not the same, the value of note is that the inside of the brush does not set the hollowing style.

Next we'll see how to assign the value, the old rules, we still choose to Onsizechange () inside the assignment, the code is as follows:

    
      (W,  H,  oldw,  oldh) {
        . onsizechanged (W, H, OLDW, OLDH);
        Mwidth= () (GetWidth ()-getwidth () *);
        Mheight= () (GetHeight ()-getheight () *);
        Mrectheight= () (GetHeight ()-getheight () *);
        Mpaintrectwidth= () (mwidth*/mcount);
        Mlinepaint.setstrokewidth (mpaintrectwidth);
    }

Unlike before, we used to use the width and height, directly using the method, but now we do not do so, for example: (float) (GetWidth ()-getwidth () *0.1); we did some processing to improve the comfort of the page, Improve the user experience.

Well, the preparation is done, next look at the OnDraw method inside the operation, the code is as follows:

    
      (Canvas Canvas) {
        . OnDraw (canvas);
        Ondrawrect (canvas);     
        Ondrawline (canvas);
        Canvaspath (canvas);
    }

Yo, why so simple, just three things? Yes, it is so simple and rough, from the name can also be seen, the first is to draw a rectangle, the second draw line, the third is to draw a polyline. is not very soon, the following look at the specific implementation of the way.

First method:

    
      (Canvas Canvas) {
         (i =; I < i++) {
             (i%==) {
                mlinepaint.setcolor (Color.parsecolor ());
            } {
                Mlinepaint.setcolor (Color.parsecolor ());
            }   
             Left  = () (Mwidth *  /  + mpaintrectwidth * i + offsets);
             Right= () (Mwidth *  /  + mpaintrectwidth* (i +));

            Canvas.drawrect (left, () (mrectheight*), right, mheight, mlinepaint);
        }

    

The second one:

    
    private void Ondrawline (Canvas) {. DrawLine (mpaintrectwidth-mpaintrectwidth/, () (Mrectheight),
        
         GetWidth (), () (mrectheight), mtextpaint);
        
         Height (i =; I < i++)
            {(i==) {height=i;
                 } {height=mrectheighti/);
                
                =mtextpaint.measuretext (x[() i]+);
                
                . DrawLine (mpaintrectwidth+mpaintrectwidth/, Height, getwidth (), height, mtextpaint);
            . DrawText (x[() i]+, () (Mpaintrectwidth-mpaintrectwidth), height+/, mtextpaint); }. DrawLine (() (mpaintrectwidth-mpaintrectwidth/),, () (mpaintrectwidth-mpaintrectwidth/), MH
         eight, mtextpaint); (i =; I < i++) {. DrawLine (() (Mwidth */+ mpaintrectwidth * i),, () (Mwidth */+ mpaintrectwidth * i), M
            
            Height, Mtextpaint); . DrawText (day[()I], () (Mwidth */+ mpaintrectwidth * i), () (mheight+mheight), mtextpaint);
        Xline.add (() (Mwidth */+ mpaintrectwidth * i));



    } Xline.add (() (mpaintrectwidth-mpaintrectwidth/)); }