在之前一篇文章中我們講解了三種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;//定義Bitmapprivate 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() {@Overridepublic 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);}@Overrideprotected 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);}@Overrideprotected 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() {@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);switch (msg.what) {case PROGRESS:progress++;if (progress <= 100) {myprogressanomation.setCurrentProgress(progress);sendEmptyMessageDelayed(PROGRESS, 100);}break;}}};@Overrideprotected 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() {@Overridepublic void onClick(View v) {handler.sendEmptyMessageDelayed(PROGRESS, 1000);}});} }

3. 實現效果如下：

總結

以上是生活随笔為你收集整理的Android自定义View——动态ProgressBar之模仿360加速球的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。