Canvas绘制水波进度加载

效果：

用到图片下载：

自定义View：

 package com.czm.mysinkingview;

 import android.content.Context;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.Canvas;
 import android.graphics.Color;
 import android.graphics.Paint;
 import android.graphics.Paint.Style;
 import android.graphics.Path;
 import android.graphics.Path.Direction;
 import android.graphics.Region.Op;
 import android.util.AttributeSet;
 import android.widget.FrameLayout;
 /**
  * 水波浪球形进度View
  * @author caizhiming
  *
  */
 public class SinkingView extends FrameLayout {
     private static final int DEFAULT_TEXTCOLOT = 0xFFFF0000;

     private static final int DEFAULT_TEXTSIZE =40;

     private float mPercent;

     private Paint mPaint = new Paint();

     private Bitmap mBitmap;

     private Bitmap mScaledBitmap;

     private float mLeft;

     private int mSpeed = 15;

     private int mRepeatCount = 0;

     private Status mFlag = Status.NONE;

     private int mTextColor = DEFAULT_TEXTCOLOT;

     private int mTextSize = DEFAULT_TEXTSIZE;

     public SinkingView(Context context, AttributeSet attrs) {
         super(context, attrs);
     }

     public void setTextColor(int color) {
         mTextColor = color;
     }

     public void setTextSize(int size) {
         mTextSize = size;
     }

     public void setPercent(float percent) {
         mFlag = Status.RUNNING;
         mPercent = percent;
         postInvalidate();

     }

     public void setStatus(Status status) {
         mFlag = status;
     }

     public void clear() {
         mFlag = Status.NONE;
         if (mScaledBitmap != null) {
             mScaledBitmap.recycle();
             mScaledBitmap = null;
         }

         if (mBitmap != null) {
             mBitmap.recycle();
             mBitmap = null;
         }
     }

     @Override
     protected void dispatchDraw(Canvas canvas) {
         super.dispatchDraw(canvas);
         int width = getWidth();
         int height = getHeight();

         //裁剪成圆区域
         Path path = new Path();
         canvas.save();
         path.reset();
         canvas.clipPath(path);
         path.addCircle(width / 2, height / 2, width / 2, Direction.CCW);
         canvas.clipPath(path, Op.REPLACE);

         if (mFlag == Status.RUNNING) {
             if (mScaledBitmap == null) {
                 mBitmap = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.wave2);
                 mScaledBitmap = Bitmap.createScaledBitmap(mBitmap, mBitmap.getWidth(), getHeight(), false);
                 mBitmap.recycle();
                 mBitmap = null;
                 mRepeatCount = (int) Math.ceil(getWidth() / mScaledBitmap.getWidth() + 0.5) + 1;
             }
             for (int idx = 0; idx < mRepeatCount; idx++) {
                 canvas.drawBitmap(mScaledBitmap, mLeft + (idx - 1) * mScaledBitmap.getWidth(), (1-mPercent) * getHeight(), null);
             }
             String str = (int) (mPercent * 100) + "%";
             mPaint.setColor(mTextColor);
             mPaint.setTextSize(mTextSize);
             mPaint.setStyle(Style.FILL);
             canvas.drawText(str, (getWidth() - mPaint.measureText(str)) / 2, getHeight() / 2 + mTextSize / 2, mPaint);

             mLeft += mSpeed;
             if (mLeft >= mScaledBitmap.getWidth())
                 mLeft = 0;
             // 绘制外圆环
             mPaint.setStyle(Paint.Style.STROKE);
             mPaint.setStrokeWidth(4);
             mPaint.setAntiAlias(true);
             mPaint.setColor(Color.rgb(33, 211, 39));
             canvas.drawCircle(width / 2, height / 2, width / 2 - 2, mPaint);

             postInvalidateDelayed(20);
         }
         canvas.restore();

     }

     public enum Status {
         RUNNING, NONE
     }

 }

调用:

 package com.czm.mysinkingview;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.view.View.OnClickListener;

 /**
  * 测试用例页
  *
  * @author caizhiming
  */
 public class MainActivity extends Activity {
     private SinkingView mSinkingView;

     private float percent = 0;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         mSinkingView = (SinkingView) findViewById(R.id.sinking);

         findViewById(R.id.btn_test).setOnClickListener(new OnClickListener() {

             @Override
             public void onClick(View v) {
                 // TODO Auto-generated method stub
                 updateProgress();
             }
         });

         percent = 0.3f;
         mSinkingView.setPercent(percent);
     }

     private void updateProgress() {
         Thread thread = new Thread(new Runnable() {

             @Override
             public void run() {

                 percent = 0;
                 while (percent <= 1) {
                     mSinkingView.setPercent(percent);
                     percent += 0.01f;
                     try {
                         Thread.sleep(40);
                     } catch (InterruptedException e) {
                         e.printStackTrace();
                     }
                 }
                 percent = 0.78f;
                 if(percent>0.7&&percent<1){
                     mSinkingView.setTextColor(0xFFFFFFFF);
                 }
                 mSinkingView.setPercent(percent);
 //                 mSinkingView.clear();
             }
         });
         thread.start();
     }

 }

调用布局：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"

     tools:context=".MainActivity" >

     <com.czm.mysinkingview.SinkingView
         android:id="@+id/sinking"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_centerInParent="true" >

         <ImageView
             android:id="@+id/image"
             android:layout_width="120dp"
             android:layout_height="120dp"
             android:src="@drawable/charming2" />
     </com.czm.mysinkingview.SinkingView>

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_centerHorizontal="true"
         android:orientation="horizontal" >

         <Button
             android:id="@+id/btn_test"
             android:textColor="#ffffff"
             android:background="#0000ff"
             android:textSize="18sp"
             android:layout_width="match_parent"
             android:layout_height="50dp"
             android:layout_margin="10dp"
             android:text="更新" />

     </LinearLayout>

 </RelativeLayout>

清单文件配置：

  <activity
             android:name="com.czm.mysinkingview.MainActivity"
             android:label="@string/app_name"
             android:hardwareAccelerated="false"
              >
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>