正文
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>
