Android Custom View imitation QQ level days Progress _android

I've been looking at the custom view piece lately. It's been almost one weeks. This week, keep updating the blog every day, feel that their technology has a bit of breakthrough, the custom view of the calculation also has a deeper understanding.

Today I saw a mobile phone growth days progress control, it is very interesting, so I want to write a. The effect is as follows:

As you can see from the diagram, there are many elements in it, first the rectangular area of the background, followed by the two rings, and then the three text text. Actually not complicated, we 1.1 point to achieve.

First, draw a rectangular background. Here you use a RECTF class that contains four single-precision floating-point coordinates for a rectangle. The rectangle represents a rectangle by the coordinates of the top and bottom 4 sides. These coordinate value properties can be accessed directly, using the width () and height () methods to get the width and height of the rectangle, and he also has the construction method:

RECTF Altogether has four construction methods:

RECTF () constructs an argument-free rectangle

RECTF (float left,float top,float right,float bottom) constructs a rectangle that specifies 4 arguments

RECTF (Rect F R) constructs a RECTF object based on the specified RECTF object (the left coordinate of the object is unchanged)

RECTF (Rect R) constructs a RECTF object based on the given Rect object

So, here's the second construct, the code is as follows:

  @Override
  protected void onsizechanged (int w, int h, int oldw, int oldh) {
    super.onsizechanged (W, H, OLDW, OLDH); C3/>mwidth=getwidth ();
    Mheight=getheight ();
    Mrectf=new RECTF ((float) (mwidth*0.1), (float) (mheight*0.1), (float) (mwidth*0.9), (float) (mheight*0.9);

  }

Now the background of the rectangle is there, so, there are rings and words and how to deal with it, don't worry, we first look at this ring, I am here to define two rings, because, one is used as a progress to show, one as a background to achieve, well, draw two rings respectively. The code is as follows:

  Canvas.drawarc (MRECTF, 360, false, mbuttompaint);
  Canvas.drawarc (MRECTF, 180, false, Mtoppaint);

Two rings also have, Next is the text, draw the text we use canvas. DrawText method, to draw, the specific code is as follows:

Canvas.drawtext ("5.0", (mwidth-(Mtextwidth+mtextsmail))/2, (float) (MHEIGHT/2), mtextpaint);

Canvas.drawtext ("Days", (mwidth-(Mtextwidth+mtextsmail))/2+mtextwidth, (float) (MHEIGHT/2), msmailtextpaint);

Canvas.drawtext ("Upgrade annual fee Super member immediately rises to", (Mwidth-mtextsmailbuttom)/2, (float) (mheight/2+30), msmailtextpaint);

The whole effect comes out, and finally, I put all the code on it:

public class Myprogress extends View {private Paint mbuttompaint;

  Private Paint Mtoppaint;

  Private Paint Mtextpaint;

  Private Paint Msmailtextpaint;

  private float mwidth;

  private float mheight;


  Private RECTF MRECTF;

    Public myprogress (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr);

  Initview ();
    Public myprogress (context, AttributeSet attrs) {Super (context, attrs);
  Initview ();
    Public Myprogress {Super (context);
  Initview ();
    private void Initview () {mbuttompaint=new Paint ();
    Mbuttompaint.setcolor (Color.rgb (69, 142, 253));
    Mbuttompaint.setantialias (TRUE);
    Mbuttompaint.setstrokewidth (10);

    Mbuttompaint.setstyle (Style.stroke);
    Mtoppaint=new Paint ();
    Mtoppaint.setcolor (Color.parsecolor ("#ffffff"));
    Mtoppaint.setantialias (TRUE);
    Mtoppaint.setstrokewidth (10);

    Mtoppaint.setstyle (Style.stroke); Mtextpaint=new PAint ();
    Mtextpaint.setcolor (Color.White);
    Mtextpaint.setantialias (TRUE);
    Mtextpaint.setstrokewidth (5);

    Mtextpaint.settextsize (50);
    Msmailtextpaint=new Paint ();
    Msmailtextpaint.setstrokewidth (3);
    Msmailtextpaint.setcolor (Color.White);
    Msmailtextpaint.setantialias (TRUE);

  Msmailtextpaint.settextsize (15); @Override protected void onsizechanged (int w, int h, int oldw, int oldh) {super.onsizechanged (W, H, OLDW, OLDH
    );
    Mwidth=getwidth ();
    Mheight=getheight ();

  Mrectf=new RECTF (float) (mwidth*0.1), (float) (mheight*0.1), (float) (mwidth*0.9), (float) (mheight*0.9);

    } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);

    Canvas.drawarc (MRECTF, 360, false, Mbuttompaint);

    Canvas.drawarc (MRECTF, 180, false, Mtoppaint);

    Float Mtextwidth=mtextpaint.measuretext ("5.0");

    Float Mtextsmail=msmailtextpaint.measuretext ("Day"); Float Mtextsmailbuttom=msmailtextpaint.measuretext ("Upgrade annual fee Super member immediately riseTo ");

    Canvas.drawtext ("5.0", (mwidth-(Mtextwidth+mtextsmail))/2, (float) (MHEIGHT/2), mtextpaint);

    Canvas.drawtext ("Days", (mwidth-(Mtextwidth+mtextsmail))/2+mtextwidth, (float) (MHEIGHT/2), msmailtextpaint);

  Canvas.drawtext ("Upgrade annual fee Super member immediately rises to", (Mwidth-mtextsmailbuttom)/2, (float) (mheight/2+30), msmailtextpaint);

 }


}

Thanks for reading.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.