Android之加載圖片時自定義進度條

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

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

1. /**
2. * 圓形加載進度條
3. *
4. * @author way
5. *
6. */
7. publicclass LoadingCircleView extends View {
9. privatefinal Paint paint;
10. privatefinal Context context;
11. private Resources res;
12. privateint max = 100;
13. privateint progress = 0;
14. privateint ringWidth;
15. // 圓環的顏色
16. privateint ringColor;
17. // 進度條顏色
18. privateint progressColor;
19. // 字體顏色
20. privateint textColor;
21. // 字的大小
22. privateint textSize;
24. private String textProgress;
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. }
39. public LoadingCircleView(Context context, AttributeSet attrs) {
40. this(context, attrs, 0);
41. }
43. public LoadingCircleView(Context context) {
44. this(context, null);
45. }
47. /**
48. * 設置進度條最大值
49. *
50. * @param max
51. */
52. publicsynchronizedvoid setMax(int max) {
53. if (max < 0)
54. max = 0;
55. if (progress > max)
56. progress = max;
57. this.max = max;
58. }
60. /**
61. * 獲取進度條最大值
62. *
63. * @return
64. */
65. publicsynchronizedint getMax() {
66. return max;
67. }
69. /**
70. * 設置加載進度，取值范圍在0~之間
71. *
72. * @param progress
73. */
74. publicsynchronizedvoid setProgress(int progress) {
75. if (progress >= 0 && progress <= max) {
76. this.progress = progress;
77. invalidate();
78. }
79. }
81. /**
82. * 獲取當前進度值
83. *
84. * @return
85. */
86. publicsynchronizedint getProgress() {
87. return progress;
88. }
90. /**
91. * 設置圓環背景色
92. *
93. * @param ringColor
94. */
95. publicvoid setRingColor(int ringColor) {
96. this.ringColor = res.getColor(ringColor);
97. }
99. /**
100. * 設置進度條顏色
101. *
102. * @param progressColor
103. */
104. publicvoid setProgressColor(int progressColor) {
105. this.progressColor = res.getColor(progressColor);
106. }
108. /**
109. * 設置字體顏色
110. *
111. * @param textColor
112. */
113. publicvoid setTextColor(int textColor) {
114. this.textColor = res.getColor(textColor);
115. }
117. /**
118. * 設置字體大小
119. *
120. * @param textSize
121. */
122. publicvoid setTextSize(int textSize) {
123. this.textSize = textSize;
124. }
126. /**
127. * 設置圓環半徑
128. *
129. * @param ringWidth
130. */
131. publicvoid setRingWidthDip(int ringWidth) {
132. this.ringWidth = dip2px(context, ringWidth);
133. }
135. /**
136. * 通過不斷畫弧的方式更新界面，實現進度增加
137. */
138. @Override
139. protectedvoid onDraw(Canvas canvas) {
140. int center = getWidth() / 2;
141. int radios = center - ringWidth / 2;
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);
162. super.onDraw(canvas);
163. }
165. /**
166. * 根據手機的分辨率從 dp 的單位 轉成為 px(像素)
167. */
168. publicstaticint dip2px(Context context, float dpValue) {
169. finalfloat scale = context.getResources().getDisplayMetrics().density;
170. return (int) (dpValue * scale + 0.5f);
171. }
173. }

其他的，我就不多說了，跟正常ProgressBar用法類似了，有需要的可以下載源碼試試效果：

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2013年資料/5月/14日/Android之加載圖片時自定義進度條

更多Android相關信息見Android 專題頁面 http://www.linuxidc.com/topicnews.aspx?tid=11