在之前一篇文章中我們講解了三種ProgressBar的做法,詳見—>《Android 自定義View——自定義ProgressBar 》。這一節中我們模仿360加速球製作一個動態ProgressBar。
當然製作之前,我們先來看看360加速球是什麼樣子的:
通過上面的動圖,我們瞭解到360加速球是什麼樣子的,現在我們開始來製作自己的ProgressBar。這裏用到了之前兩篇博客的知識。大家可以參考學習:
《Android 自定義View——Path的使用 》
《Android 自定義View——自定義ProgressBar 》
《Android PorterDuff.Mode圖形混合處理 》
不廢話了,接下來進入正題……
原理解析
首先我們定義有一個Bitmap,給這個Bitmap對象定義一個Canvas畫布,我們將內容繪製在這個Bitmap上,然後再將Bitmap添加到View的Canvas上。
Bitmap的Canvas上,我們要繪製一個圓形,這個圓形代表最大進度,然後繪製圓形內的“波動的水”。這個波動的水我們要通過處理圖形混合的PorterDuff.Mode來實現。“波動的水”的實現,是通過Path中定義貝塞爾曲線完成的。我們繪製一條貝塞爾曲線,通過moveTo()和lineTo()方法,將貝塞爾曲線閉合,然後通過Handler操縱貝塞爾曲線波動。通過PorterDuff.Mode的PorterDuff.Mode.SRC_IN模式上層只顯示圓圓形重合的部分,從而實現在貝塞爾曲線在圓形內波動。
代碼實現
我們看代碼,再通過代碼解析:
public class MyProgressAnimation extends View {
private int width;//設置高
private int height;//設置高
private Bitmap bitmap;//定義Bitmap
private Canvas bitmapCanvas;//定義Bitmap的畫布
private Path mPath; //定義路徑
private Paint mPathPaint;//定義路徑的畫筆
private Paint mPaintCircle;//定義圓形的畫筆
private Paint mPaintText; //定義繪製文字的畫筆
//設置進度
private int maxProgress = 100;
private int currentProgress = 0;
public int getMaxProgress() {
return maxProgress;
}
public void setMaxProgress(int maxProgress) {
this.maxProgress = maxProgress;
}
public int getCurrentProgress() {
return currentProgress;
}
public void setCurrentProgress(int currentProgress) {
this.currentProgress = currentProgress;
invalidate();//實時更新進度
}
private int count = 0;
private static final int NEED_INVALIDATE = 0X6666;
//操作UI主線程
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case NEED_INVALIDATE:
//更新時間
count += 5;
if (count > 80) {
count = 0;
}
invalidate();
sendEmptyMessageDelayed(NEED_INVALIDATE, 50);
break;
}
}
};
public MyProgressAnimation(Context context, AttributeSet attrs) {
super(context, attrs);
//初始化一個路徑
mPath = new Path();
//初始化繪製路徑的畫筆
mPathPaint = new Paint();
mPathPaint.setAntiAlias(true);
mPathPaint.setColor(Color.argb(0xff, 0xff, 0x69, 0x5a));
mPathPaint.setStyle(Paint.Style.FILL);//設置爲填充,默認爲填充,這裏我們還是定義下
mPathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
mPaintCircle = new Paint();
mPaintCircle.setAntiAlias(true);
mPaintCircle.setColor(Color.argb(0xff, 0xf8, 0x8e, 0x8b));
mPaintText = new Paint();
mPaintText.setAntiAlias(true);
mPaintText.setColor(Color.argb(0xff, 0xFF, 0xF3, 0xF7));
mPaintText.setTextAlign(Paint.Align.CENTER);
mPaintText.setTextSize(50);
handler.sendEmptyMessageDelayed(NEED_INVALIDATE, 50);
}
public MyProgressAnimation(Context context) {
super(context);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
setMeasuredDimension(width, height);//設置寬和高
bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
bitmapCanvas = new Canvas(bitmap);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//繪製Bitmap上的圓形
bitmapCanvas.drawCircle(width / 2, height / 2, 150, mPaintCircle);
//通過Path繪製貝塞爾曲線
mPath.reset();
mPath.moveTo(width, (height / 2 + 150) - (currentProgress * 300f / maxProgress));
mPath.lineTo(width, height / 2 + 200);
mPath.lineTo(count, height / 2 + 200);
mPath.lineTo(count, (height / 2 + 150) - (currentProgress * 300f / maxProgress));
for (int i = 0; i < 10; i++) {
mPath.rQuadTo(20, 5, 40, 0);
mPath.rQuadTo(20, -5, 40, 0);
}
mPath.close();
//將貝塞爾曲線繪製到Bitmap的Canvas上
bitmapCanvas.drawPath(mPath, mPathPaint);
//將Bitmap繪製到View的Canvas上
bitmapCanvas.drawText(currentProgress * 100f / maxProgress + "%", width / 2, height / 2, mPaintText);
canvas.drawBitmap(bitmap, 0, 0, null);
}
}
通過這張圖片我們可以更好的理解繪製原理。
繪製紅色區域的圓形:
//繪製Bitmap上的圓形
bitmapCanvas.drawCircle(width / 2, height / 2, 150, mPaintCircle);
繪製Path軌跡區域:
注意:這裏我們繪製路徑是最後使用貝塞爾曲線封閉的。然後Path封閉路徑的高度是變化的。
//通過Path繪製貝塞爾曲線
mPath.reset();
mPath.moveTo(width, (height / 2 + 150) - (currentProgress * 300f / maxProgress));//通過此處根據進度設置高度
mPath.lineTo(width, height / 2 + 200);
mPath.lineTo(count, height / 2 + 200);
mPath.lineTo(count, (height / 2 + 150) - (currentProgress * 300f / maxProgress));//通過此處根據進度設置高度
for (int i = 0; i < 10; i++) {
mPath.rQuadTo(20, 5, 40, 0);
mPath.rQuadTo(20, -5, 40, 0);
}
mPath.close();
通過效果,只保留上層的重疊部分:
//在初始化繪製路徑的畫筆上加入這個效果
mPathPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
控件使用
1. 在佈局中定義控件和按鈕,點擊按鈕,進度開始自動增加。
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.example.administrator.mywidgetdemo.activity.MyProgressAnimationActivity">
<Button
android:id="@+id/button_start_myprogressanomation"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.example.administrator.mywidgetdemo.widget.MyProgressAnimation
android:id="@+id/myprogressanomation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
2. Activity中點擊按鈕後增加進度。
public class MyProgressAnimationActivity extends Activity {
private Button mButton;
private MyProgressAnimation myprogressanomation;
private static final int PROGRESS= 0X0003;
//定義一個進度
private int progress;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case PROGRESS:
progress++;
if (progress <= 100) {
myprogressanomation.setCurrentProgress(progress);
sendEmptyMessageDelayed(PROGRESS, 100);
}
break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_progress_anomation);
mButton = (Button) findViewById(R.id.button_start_myprogressanomation);
myprogressanomation= (MyProgressAnimation) findViewById(R.id.myprogressanomation);
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
handler.sendEmptyMessageDelayed(PROGRESS, 1000);
}
});
}
}
3. 實現效果如下: