Android之載入圖片時自訂進度條

也許我們有這樣一個需求，在請求網狀圖片時，如果在圖片還未完全顯示完全時，顯示一個比較漂亮簡潔的進度條，是不是會顯得很人性化呢？比如像所示：

下面我們就來實現一下這樣一個進度條：主要代碼先貼上，LoadingCircleView

/** * 圓形載入進度條 *  * @author way *  */public class LoadingCircleView extends View {private final Paint paint;private final Context context;private Resources res;private int max = 100;private int progress = 0;private int ringWidth;// 圓環的顏色private int ringColor;// 進度條顏色private int progressColor;// 字型顏色private int textColor;// 字的大小private int textSize;private String textProgress;public LoadingCircleView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.context = context;this.paint = new Paint();this.res = context.getResources();this.paint.setAntiAlias(true); // 消除鋸齒this.ringWidth = dip2px(context, 3); // 設定圓環寬度this.ringColor = Color.BLACK;// 黑色進度條背景this.progressColor = Color.WHITE;// 白色進度條this.textColor = Color.BLACK;// 黑色數字顯示進度;this.textSize = 15;// 預設字型大小}public LoadingCircleView(Context context, AttributeSet attrs) {this(context, attrs, 0);}public LoadingCircleView(Context context) {this(context, null);}/** * 設定進度條最大值 *  * @param max */public synchronized void setMax(int max) {if (max < 0)max = 0;if (progress > max)progress = max;this.max = max;}/** * 擷取進度條最大值 *  * @return */public synchronized int getMax() {return max;}/** * 設定載入進度，取值範圍在0~之間 *  * @param progress */public synchronized void setProgress(int progress) {if (progress >= 0 && progress <= max) {this.progress = progress;invalidate();}}/** * 擷取當前進度值 *  * @return */public synchronized int getProgress() {return progress;}/** * 設定圓環背景色 *  * @param ringColor */public void setRingColor(int ringColor) {this.ringColor = res.getColor(ringColor);}/** * 設定進度條顏色 *  * @param progressColor */public void setProgressColor(int progressColor) {this.progressColor = res.getColor(progressColor);}/** * 設定字型顏色 *  * @param textColor */public void setTextColor(int textColor) {this.textColor = res.getColor(textColor);}/** * 設定字型大小 *  * @param textSize */public void setTextSize(int textSize) {this.textSize = textSize;}/** * 設定圓環半徑 *  * @param ringWidth */public void setRingWidthDip(int ringWidth) {this.ringWidth = dip2px(context, ringWidth);}/** * 通過不斷畫弧的方式更新介面，實現進度增加 */@Overrideprotected void onDraw(Canvas canvas) {int center = getWidth() / 2;int radios = center - ringWidth / 2;// 繪製圓環this.paint.setStyle(Paint.Style.STROKE); // 繪製空心圓this.paint.setColor(ringColor);this.paint.setStrokeWidth(ringWidth);canvas.drawCircle(center, center, radios, this.paint);RectF oval = new RectF(center - radios, center - radios, center+ radios, center + radios);this.paint.setColor(progressColor);canvas.drawArc(oval, 90, 360 * progress / max, false, paint);this.paint.setStyle(Paint.Style.FILL);this.paint.setColor(textColor);this.paint.setStrokeWidth(0);this.paint.setTextSize(textSize);this.paint.setTypeface(Typeface.DEFAULT_BOLD);textProgress = (int) (1000 * (progress / (10.0 * max))) + "%";float textWidth = paint.measureText(textProgress);canvas.drawText(textProgress, center - textWidth / 2, center + textSize/ 2, paint);super.onDraw(canvas);}/** * 根據手機的解析度從 dp 的單位 轉成為 px(像素) */public static int dip2px(Context context, float dpValue) {final float scale = context.getResources().getDisplayMetrics().density;return (int) (dpValue * scale + 0.5f);}}

其他的，我就不多說了，跟正常ProgressBar用法類似了，有需要的可以下載源碼試試效果：http://download.csdn.net/detail/weidi1989/5342532