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

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

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

[java]  view plain copy

1. /** 
2.  * 圆形加载进度条 
3.  *  
4.  * @author way 
5.  *  
6.  */  
7. public class LoadingCircleView extends View {  
8.   
9.     private final Paint paint;  
10.     private final Context context;  
11.     private Resources res;  
12.     private int max = 100;  
13.     private int progress = 0;  
14.     private int ringWidth;  
15.     // 圆环的颜色  
16.     private int ringColor;  
17.     // 进度条颜色  
18.     private int progressColor;  
19.     // 字体颜色  
20.     private int textColor;  
21.     // 字的大小  
22.     private int textSize;  
23.   
24.     private String textProgress;  
25.   
26.     public LoadingCircleView(Context context, AttributeSet attrs, int defStyle) {  
27.         super(context, attrs, defStyle);  
28.         this.context = context;  
29.         this.paint = new Paint();  
30.         this.res = context.getResources();  
31.         this.paint.setAntiAlias(true); // 消除锯齿  
32.         this.ringWidth = dip2px(context, 3); // 设置圆环宽度  
33.         this.ringColor = Color.BLACK;// 黑色进度条背景  
34.         this.progressColor = Color.WHITE;// 白色进度条  
35.         this.textColor = Color.BLACK;// 黑色数字显示进度;  
36.         this.textSize = 15;// 默认字体大小  
37.     }  
38.   
39.     public LoadingCircleView(Context context, AttributeSet attrs) {  
40.         this(context, attrs, 0);  
41.     }  
42.   
43.     public LoadingCircleView(Context context) {  
44.         this(context, null);  
45.     }  
46.   
47.     /** 
48.      * 设置进度条最大值 
49.      *  
50.      * @param max 
51.      */  
52.     public synchronized void setMax(int max) {  
53.         if (max < 0)  
54.             max = 0;  
55.         if (progress > max)  
56.             progress = max;  
57.         this.max = max;  
58.     }  
59.   
60.     /** 
61.      * 获取进度条最大值 
62.      *  
63.      * @return 
64.      */  
65.     public synchronized int getMax() {  
66.         return max;  
67.     }  
68.   
69.     /** 
70.      * 设置加载进度，取值范围在0~之间 
71.      *  
72.      * @param progress 
73.      */  
74.     public synchronized void setProgress(int progress) {  
75.         if (progress >= 0 && progress <= max) {  
76.             this.progress = progress;  
77.             invalidate();  
78.         }  
79.     }  
80.   
81.     /** 
82.      * 获取当前进度值 
83.      *  
84.      * @return 
85.      */  
86.     public synchronized int getProgress() {  
87.         return progress;  
88.     }  
89.   
90.     /** 
91.      * 设置圆环背景色 
92.      *  
93.      * @param ringColor 
94.      */  
95.     public void setRingColor(int ringColor) {  
96.         this.ringColor = res.getColor(ringColor);  
97.     }  
98.   
99.     /** 
100.      * 设置进度条颜色 
101.      *  
102.      * @param progressColor 
103.      */  
104.     public void setProgressColor(int progressColor) {  
105.         this.progressColor = res.getColor(progressColor);  
106.     }  
107.   
108.     /** 
109.      * 设置字体颜色 
110.      *  
111.      * @param textColor 
112.      */  
113.     public void setTextColor(int textColor) {  
114.         this.textColor = res.getColor(textColor);  
115.     }  
116.   
117.     /** 
118.      * 设置字体大小 
119.      *  
120.      * @param textSize 
121.      */  
122.     public void setTextSize(int textSize) {  
123.         this.textSize = textSize;  
124.     }  
125.   
126.     /** 
127.      * 设置圆环半径 
128.      *  
129.      * @param ringWidth 
130.      */  
131.     public void setRingWidthDip(int ringWidth) {  
132.         this.ringWidth = dip2px(context, ringWidth);  
133.     }  
134.   
135.     /** 
136.      * 通过不断画弧的方式更新界面，实现进度增加 
137.      */  
138.     @Override  
139.     protected void onDraw(Canvas canvas) {  
140.         int center = getWidth() / 2;  
141.         int radios = center - ringWidth / 2;  
142.   
143.         // 绘制圆环  
144.         this.paint.setStyle(Paint.Style.STROKE); // 绘制空心圆  
145.         this.paint.setColor(ringColor);  
146.         this.paint.setStrokeWidth(ringWidth);  
147.         canvas.drawCircle(center, center, radios, this.paint);  
148.         RectF oval = new RectF(center - radios, center - radios, center  
149.                 + radios, center + radios);  
150.         this.paint.setColor(progressColor);  
151.         canvas.drawArc(oval, 90, 360 * progress / max, false, paint);  
152.         this.paint.setStyle(Paint.Style.FILL);  
153.         this.paint.setColor(textColor);  
154.         this.paint.setStrokeWidth(0);  
155.         this.paint.setTextSize(textSize);  
156.         this.paint.setTypeface(Typeface.DEFAULT_BOLD);  
157.         textProgress = (int) (1000 * (progress / (10.0 * max))) + "%";  
158.         float textWidth = paint.measureText(textProgress);  
159.         canvas.drawText(textProgress, center - textWidth / 2, center + textSize  
160.                 / 2, paint);  
161.   
162.         super.onDraw(canvas);  
163.     }  
164.   
165.     /** 
166.      * 根据手机的分辨率从 dp 的单位 转成为 px(像素) 
167.      */  
168.     public static int dip2px(Context context, float dpValue) {  
169.         final float scale = context.getResources().getDisplayMetrics().density;  
170.         return (int) (dpValue * scale + 0.5f);  
171.     }  
172.   
173. }  

其他的，我就不多说了，跟正常ProgressBar用法类似了，有需要的可以下载源码试试效果：http://download.csdn.net/detail/weidi1989/5342532