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.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2013年资料/5月/14日/Android之加载图片时自定义进度条

 

 

相关内容