最近項目有個需求，做帶進度從下到上的圓形進度條。
網上查了一下資料，發現這篇博客寫得不錯http://blog.csdn.net/xiaanming/article/details/10298163
由於項目不能用XML文件，修改了一下，覺得還可以，先看一下效果吧。
我們可以自定義圓環的顏色，圓環進度的顏色，是否顯示進度的百分比，進度百分比的顏色，以及進度是實心還是空心等等。
下面是自定義的view代碼：
package com.circle.progress; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Typeface; import android.util.AttributeSet; import android.util.Log; import android.view.View; public class RoundProgressBar extends View { /** * 畫筆對象的引用 */ private Paint paint; /** * 圓環的顏色 */ private int roundColor; /** * 圓環進度的顏色 */ private int roundProgressColor; /** * 中間進度百分比的字符串的顏色 */ private int textColor; /** * 中間進度百分比的字符串的字體 */ private float textSize; /** * 圓環的寬度 */ private float roundWidth; /** * 最大進度 */ private int max; /** * 當前進度 */ private int progress; /** * 是否顯示中間的進度 */ private boolean textIsDisplayable; /** * 進度的風格，實心或者空心 */ private int style; public static final int STROKE = 0; public static final int FILL = 1; /** * 進度的風格，實心從下到上 */ public static final int FILL_UP = 2; public RoundProgressBar(Context context) { this(context, null); } public RoundProgressBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } private void init() { paint = new Paint(); roundColor = 0xfffdba14; roundProgressColor = 0xfffc8b0d; textColor = 0xff00ff00; textSize = 15; roundWidth = 5; max = 100; textIsDisplayable = true; style = 0; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /** * 畫最外層的大圓環 */ int centre = getWidth() / 2; // 獲取圓心的x坐標 int radius = (int) (centre - roundWidth / 2); // 圓環的半徑 paint.setColor(roundColor); // 設置圓環的顏色 if (style == FILL_UP) { paint.setStyle(Paint.Style.FILL_AND_STROKE); } else { paint.setStyle(Paint.Style.STROKE); // 設置空心 } paint.setStrokeWidth(roundWidth); // 設置圓環的寬度 paint.setAntiAlias(true); // 消除鋸齒 canvas.drawCircle(centre, centre, radius, paint); // 畫出圓環 Log.e("log", centre + ""); /** * 畫圓弧 ，畫圓環的進度 */ // 設置進度是實心還是空心 paint.setStrokeWidth(roundWidth); // 設置圓環的寬度 paint.setColor(roundProgressColor); // 設置進度的顏色 RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用於定義的圓弧的形狀和大小的界限 switch (style) { case STROKE: paint.setStyle(Paint.Style.STROKE); canvas.drawArc(oval, 0, 360 * progress / max, false, paint); // 根據進度畫圓弧 break; case FILL: paint.setStyle(Paint.Style.FILL_AND_STROKE); if (progress != 0) { canvas.drawArc(oval, 0, 360 * progress / max, true, paint); // 根據進度畫圓弧 } break; case FILL_UP: paint.setStyle(Paint.Style.FILL_AND_STROKE); if (progress != 0) { int angle = 360 * progress / max; if (angle / 2 < 90) { angle = Math.abs(90 - angle / 2); } else { angle = 360 - Math.abs(90 - angle / 2); } canvas.drawArc(oval, angle, 360 * progress / max, false, paint); } break; } /** * 畫進度百分比 */ paint.setStrokeWidth(0); paint.setColor(textColor); paint.setTextSize(textSize); paint.setTypeface(Typeface.DEFAULT_BOLD); // 設置字體 int percent = (int) (((float) progress / (float) max) * 100); // 中間的進度百分比，先轉換成float在進行除法運算，不然都為0 float textWidth = paint.measureText(percent + "%"); // 測量字體寬度，我們需要根據字體的寬度設置在圓環中間 if (textIsDisplayable && percent != 0 ) { canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize / 2, paint); // 畫出進度百分比 } } public synchronized int getMax() { return max; } /** * 設置進度的最大值 * * @param max */ public synchronized void setMax(int max) { if (max < 0) { throw new IllegalArgumentException("max not less than 0"); } this.max = max; } /** * 獲取進度.需要同步 * * @return */ public synchronized int getProgress() { return progress; } /** * 設置進度，此為線程安全控件，由於考慮多線的問題，需要同步 刷新界面調用postInvalidate()能在非UI線程刷新 * * @param progress */ public synchronized void setProgress(int progress) { if (progress < 0) { throw new IllegalArgumentException("progress not less than 0"); } if (progress > max) { progress = max; } if (progress <= max) { this.progress = progress; postInvalidate(); } } public int getCircleColor() { return roundColor; } /** * 設置圓環的顏色 */ public void setCircleColor(int circleColor) { this.roundColor = circleColor; } public int getCircleProgressColor() { return roundProgressColor; } /** * 設置圓環進度的顏色 */ public void setCircleProgressColor(int circleProgressColor) { this.roundProgressColor = circleProgressColor; } public int getTextColor() { return textColor; } /** * 設置中間進度百分比的字符串的顏色 */ public void setTextColor(int textColor) { this.textColor = textColor; } public float getTextSize() { return textSize; } /** * 設置中間進度百分比的字符串的字體大小 */ public void setTextSize(float textSize) { this.textSize = textSize; } public float getRoundWidth() { return roundWidth; } /** * 設置圓環的寬度 */ public void setRoundWidth(float roundWidth) { this.roundWidth = roundWidth; } /** * 設置是否顯示數字百分比 * * @param flag */ public void setTextIsDisplayable(boolean flag) { textIsDisplayable = flag; } /** * 設置進度風格 * 0空心，1實心，2實心從下到上 * @param style */ public void setStyle(int style) { this.style = style; } }
下面是調用view的代碼：
package com.circle.progress; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.LinearLayout; public class CircleProgressTestActivity extends Activity { private RoundProgressBar roundProgressBar; private RoundProgressBar roundProgressBar2; private RoundProgressBar roundProgressBar3; private RoundProgressBar roundProgressBar4; private RoundProgressBar roundProgressBar5; private RoundProgressBar roundProgressBar6; private RoundProgressBar roundProgressBar7; private int progress = 0; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); LinearLayout parent = new LinearLayout(this); parent.setOrientation(LinearLayout.VERTICAL); parent.setBackgroundColor(0xffffffff); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(-2, -2); Button button = new Button(this); button.setText("開始圓形進度"); parent.addView(button, lp); LinearLayout roundLayout = new LinearLayout(this); roundLayout.setOrientation(LinearLayout.HORIZONTAL); lp = new LinearLayout.LayoutParams(-2, -2); parent.addView(roundLayout, lp); roundProgressBar = new RoundProgressBar(this); roundProgressBar.setStyle(RoundProgressBar.FILL_UP);//設置進度風格 0空心，1實心，2實心從下到上 roundProgressBar.setTextColor(0xffffffff);//設置中間進度百分比的字符串的顏色 lp = new LinearLayout.LayoutParams(80, 80); lp.setMargins(5, 5, 5, 5); roundLayout.addView(roundProgressBar, lp); roundProgressBar2 = new RoundProgressBar(this); lp = new LinearLayout.LayoutParams(80, 80); lp.setMargins(5, 5, 5, 5); roundLayout.addView(roundProgressBar2, lp); roundProgressBar3 = new RoundProgressBar(this); roundProgressBar3.setCircleColor(0xffD1D1D1);//設置圓環的顏色 roundProgressBar3.setCircleProgressColor(0xff000000);//設置圓環進度的顏色 roundProgressBar3.setTextColor(0xff9A32CD);//設置中間進度百分比的字符串的顏色 roundProgressBar3.setRoundWidth(10);//設置圓環的寬度 roundProgressBar3.setTextSize(18);//設置中間進度百分比的字符串的字體大小 lp = new LinearLayout.LayoutParams(80, 80); lp.setMargins(5, 5, 5, 5); roundLayout.addView(roundProgressBar3, lp); LinearLayout roundLayout2 = new LinearLayout(this); roundLayout2.setOrientation(LinearLayout.HORIZONTAL); lp = new LinearLayout.LayoutParams(-2, -2); parent.addView(roundLayout2, lp); roundProgressBar4 = new RoundProgressBar(this); roundProgressBar4.setCircleColor(0xffC6E2FF); roundProgressBar4.setCircleProgressColor(0xffCD3333); roundProgressBar4.setRoundWidth(10); roundProgressBar4.setTextIsDisplayable(false);//設置是否顯示數字百分比 lp = new LinearLayout.LayoutParams(80, 80); lp.setMargins(5, 5, 5, 5); roundLayout2.addView(roundProgressBar4, lp); roundProgressBar5 = new RoundProgressBar(this); roundProgressBar5.setStyle(RoundProgressBar.FILL); roundProgressBar5.setCircleProgressColor(0xffC2C2C2); roundProgressBar5.setRoundWidth(1); roundProgressBar5.setCircleColor(0xffff0000); roundProgressBar5.setTextIsDisplayable(false); lp = new LinearLayout.LayoutParams(80, 80); lp.setMargins(5, 5, 5, 5); roundLayout2.addView(roundProgressBar5, lp); roundProgressBar6 = new RoundProgressBar(this); roundProgressBar6.setStyle(RoundProgressBar.FILL); roundProgressBar6.setCircleProgressColor(0xffC2C2C2); roundProgressBar6.setRoundWidth(1); roundProgressBar6.setCircleColor(0xffff0000); lp = new LinearLayout.LayoutParams(80, 80); lp.setMargins(5, 5, 5, 5); roundLayout2.addView(roundProgressBar6, lp); roundProgressBar7 = new RoundProgressBar(this); lp = new LinearLayout.LayoutParams(50, 50); lp.setMargins(5, 5, 5, 5); roundLayout2.addView(roundProgressBar7, lp); lp = new LinearLayout.LayoutParams(-1, -1); setContentView(parent, lp); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { new Thread(new Runnable() { @Override public void run() { while(progress <= 100){ progress += 3; System.out.println(progress); roundProgressBar.setProgress(progress); roundProgressBar2.setProgress(progress); roundProgressBar3.setProgress(progress); roundProgressBar4.setProgress(progress); roundProgressBar5.setProgress(progress); roundProgressBar6.setProgress(progress); roundProgressBar7.setProgress(progress); try { Thread.sleep(100); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } }); } }