Android自定义View仿QQ等级天数进度

最近一直都在看自定义view这一块。差不多一个星期了吧。这个星期坚持每天更新博客，感觉自己的技术也有点突破，对自定义view的计算也有了更深的认识。

今天看到手机一个成长天数进度的控件，觉得挺有意思的，于是想自己也写一个。效果如下：

由图可以知道，这里面有很多个元素，首先是背景的矩形区域，其次就是两个环形，然后三个text文本。其实不复杂，我们一点一点的去实现。

首先呢，画矩形背景。这里用到一个rectf的类，这个类包含一个矩形的四个单精度浮点坐标。矩形通过上下左右4个边的坐标来表示一个矩形。这些坐标值属性可以被直接访问，用width（）和 height（）方法可以获取矩形的宽和高，同时他还有构造方法：

rectf一共有四个构造方法：

rectf（）构造一个无参的矩形

rectf（float left,float top,float right,float bottom）构造一个指定了4个参数的矩形

rectf(rect f r)根据指定的rectf对象来构造一个rectf对象(对象的左边坐标不变)

rectf(rect r)根据给定的rect对象来构造一个rectf对象

那么，这里使用第二个构造方法，代码如下：

  @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));

  }

现在是矩形的背景有了，那么，还有环形跟文字又怎么去处理呢，别着急，我们先看看这个环形，我这里之所以定义两个环形，是因为，一个用作进度去显示，一个当做背景去实现，好了，分别绘制两个环形。代码如下：

  canvas.drawarc(mrectf, 90, 360, false, mbuttompaint);
  canvas.drawarc(mrectf, 15, 180, false, mtoppaint);

两个环形也有了，接下来就是文字了，绘制文字我们使用canvas.drawtext方法，去绘制，具体代码如下：

canvas.drawtext("5.0", (mwidth-(mtextwidth+mtextsmail))/2, (float)(mheight/2), mtextpaint);

canvas.drawtext("天", (mwidth-(mtextwidth+mtextsmail))/2+mtextwidth, (float)(mheight/2), msmailtextpaint);

canvas.drawtext("升级年费超级会员立即升至", (mwidth-mtextsmailbuttom)/2, (float)(mheight/2+30), msmailtextpaint);

这下全部的效果也出来了，最后，我贴上所有的代码：

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 context, attributeset attrs, int defstyleattr) {
    super(context, attrs, defstyleattr);

    initview();

  }
  public myprogress(context context, attributeset attrs) {
    super(context, attrs);
    initview();
  }

  public myprogress(context context) {
    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, 90, 360, false, mbuttompaint);

    canvas.drawarc(mrectf, 15, 180, false, mtoppaint);

    float mtextwidth=mtextpaint.measuretext("5.0");

    float mtextsmail=msmailtextpaint.measuretext("天");

    float mtextsmailbuttom=msmailtextpaint.measuretext("升级年费超级会员立即升至");

    canvas.drawtext("5.0", (mwidth-(mtextwidth+mtextsmail))/2, (float)(mheight/2), mtextpaint);

    canvas.drawtext("天", (mwidth-(mtextwidth+mtextsmail))/2+mtextwidth, (float)(mheight/2), msmailtextpaint);

    canvas.drawtext("升级年费超级会员立即升至", (mwidth-mtextsmailbuttom)/2, (float)(mheight/2+30), msmailtextpaint);

  }


}

谢谢阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。