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

    }


}

谢谢阅读。更多技术，可以关注我的其他文章，谢谢支持。