Android练习之自定义一个loading界面

我们先看看效果：

我在http://blog.csdn.net/wingichoy/article/details/50482271这里看到大大的效果，就想自己模仿练练手：

先分析，我们首先需要一个外圆，圆里面是一个箭头
而无论怎么，圆都是存在的
所以在onDraw中：

@Override
    protected void onDraw(Canvas canvas) {
        mCriclePaint.setColor(Color.parseColor("#2ea4f2"));
        mCriclePaint.setStyle(Paint.Style.STROKE);//style为轮廓
        mCriclePaint.setStrokeWidth(8);//笔的宽度
        mCriclePaint.setAntiAlias(true);//抗锯齿，就是让边缘更加华润

        canvas.drawCircle(mwidth/2,mheight/2,mheight/2,mCriclePaint);
        mRectF.set(mwidth/2-mheight/2,0,mwidth/2+mheight/2,mheight);//这个是弧所在的矩形

 ... .....

如果是一开始，那么先画圆和箭头：

 if(mDrawStart){
            mLinePaith.setColor(Color.WHITE);
            mLinePaith.setStrokeWidth(8);
            mLinePaith.setStyle(Paint.Style.STROKE);
            canvas.drawLine(mwidth/2,mheight/4,mwidth/2,mheight*0.7f,mLinePaith);//画直线

            mPath.moveTo(mwidth/2-mheight/2+10,mheight/2);
            mPath.lineTo(mwidth/2,mheight*0.75f);
            mPath.lineTo(mwidth/2+mheight/2-10,mheight/2);
            //画折线

            canvas.drawPath(mPath,mLinePaith);

            mDrawStart = false;
            mLoadingStart = true;

这个就得到上面图二的效果

然后就开始了加载，我的加载效果是通过箭头那根直线来反应的，感觉这样有点丑，但是我没有审美，就先这样吧
在加载过程中，那根直线一直在不断的伸长，缩短

else if (mLoadingStart){
            if(mLinePercent <95){
                mLinePercent+=5;
                mPath.reset();//一定要reset，要不然会乱
                mLinePaith.setColor(Color.WHITE);
                mLinePaith.setStrokeWidth(8);
                mLinePaith.setStyle(Paint.Style.STROKE);
                float temp = (mheight/4)*mLinePercent/100;//四分之一mheight的比例
                canvas.drawLine(mwidth/2,mheight/4+temp,mwidth/2,mheight*0.75f-temp,mLinePaith);

                mPath.moveTo(mwidth/2-mheight/2+10,mheight/2);
                mPath.lineTo(mwidth/2,mheight*0.75f);
                mPath.lineTo(mwidth/2+mheight/2-10,mheight/2);
                canvas.drawPath(mPath,mLinePaith);

            }else {
                mLinePercent = 0;
            }

在加载过程中，不断的变换位置，直到我的加载完毕，于是我加了个方法，来设置加载完毕了：

 public void  setLoadingFinish(){
        mLoadingStart = false;
        mDrawingFinish = true;
        mPathToLine = true;
        mLinePercent = 0;

        postInvalidateDelayed(10);
    }

加载完毕后，首先是勾变成线：

else if (mDrawingFinish){

 if(mPathToLine){
     mPath.reset();
      mLinePaith.setColor(Color.WHITE);
        mLinePaith.setStrokeWidth(8);
        mLinePaith.setStyle(Paint.Style.STROKE);
          if(mPathPercent<100){
          mLinePaith.setStyle(Paint.Style.STROKE);
        mPathPercent+=5;
         mPath.reset();
        mPath.moveTo(mwidth/2-mheight/2+10,mheight/2);
       mPath.lineTo(mwidth/2,mheight*0.75f- mPathPercent/100f*0.25f*mheight); 
 mPath.lineTo(mwidth/2+mheight/2-10,mheight/2);

canvas.drawPath(mPath,mLinePaith);
                   canvas.drawCircle(mwidth/2,mheight/2,2.5f,mLinePaith);
//勾边线的过程中，点一直存在

如果变成线了，接下来就是点上移

else {

if(mRisePercent < 100){
   mRisePercent+=5;
 mLinePaith.setColor(Color.WHITE);
mLinePaith.setStrokeWidth(8);
mLinePaith.setStyle(Paint.Style.STROKE);
 canvas.drawLine(mwidth/2-mheight/2+10,mheight/2,mwidth/2+mheight/2-10,mheight/2,mLinePaith);//点上升过程中，线一直存在
 canvas.drawCircle(mwidth/2,mheight/2-mheight/2*mRisePercent/100,2.5f,mLinePaith);//画点
 mRisePercent +=5;

点上升完了之后，就是让线慢慢变成对勾，然后弧形进度的改变：

else {
 if(mLinePercent < 100){
  mLinePaith.setColor(Color.WHITE);
 mLinePaith.setStrokeWidth(8);
mLinePaith.setStyle(Paint.Style.STROKE);
mLinePercent+=5;
   mPath.reset();
 mPath.moveTo(mwidth/2-mheight/2+5,mheight/2);
      mPath.lineTo(mwidth/2,mheight/2+mLinePercent/100f*mheight*0.3f);
 mPath.lineTo(mwidth/2+mheight/2-5,mheight/2-mLinePercent/100f*mheight*0.3f);
canvas.drawPath(mPath,mLinePaith);
//画对勾
if(mCriclePercent < 100){
   canvas.drawArc(mRectF,270,-mCriclePercent/100f*360,false,mLinePaith);
//画弧
 mCriclePercent+=5;
                            }

然后是最后的展示，就是第一个图：

else{
   mLinePaith.setColor(Color.WHITE);
  mLinePaith.setStrokeWidth(8);
mLinePaith.setStyle(Paint.Style.STROKE);
mPath.reset();
 mPath.moveTo(mwidth/2-mheight/2+10,mheight/2);
mPath.lineTo(mwidth/2,mheight*0.75f);
 mPath.lineTo(mwidth/2+mheight/2-10,mheight*0.3f);
canvas.drawPath(mPath,mLinePaith);
                           canvas.drawArc(mRectF,270,-360,true,mLinePaith);
                        }

最后：

postInvalidateDelayed(10);//不断重画
super.onDraw(canvas);

然后就完成了

项目地址：
https://github.com/vivianluomin/PracticeEveryDay/tree/master/TestWebView