Android之加载图片时自定义进度条

也许我们有这样一个需求，在请求网络图片时，如果在图片还未完全显示完全时，显示一个比较漂亮简洁的进度条，是不是会显得很人性化呢？比如像下图所示：



下面我们就来实现一下这样一个进度条：主要代码先贴上，LoadingCircleView

[java] view
plaincopy

/**

* 圆形加载进度条

*

* @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);

}



/**

* 通过不断画弧的方式更新界面，实现进度增加

*/

@Override

protected 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