查看: 617|回复: 0

[手机开发] Android带圆形数字进度的自定义进度条示例

发表于 2017-8-1 08:00:04

开发

设计搞了一个带圆形进度的进度条,在GitHub上逛了一圈,发现没有,自己撸吧。

先看界面效果:

主要思路是写一个继承ProgressBar的自定义View,不废话,直接上代码:

  1. package com.fun.progressbarwithnumber;
  2. import android.content.Context;
  3. import android.content.res.TypedArray;
  4. import android.graphics.Canvas;
  5. import android.graphics.Paint;
  6. import android.graphics.RectF;
  7. import android.util.AttributeSet;
  8. import android.util.TypedValue;
  9. import android.widget.ProgressBar;
  10. public class HorizontalProgressBarWithNumber extends ProgressBar {
  11. private static final int DEFAULT_TEXT_SIZE = 10;
  12. private static final int DEFAULT_TEXT_COLOR = 0XFFFC00D1;
  13. private static final int DEFAULT_COLOR_UNREACHED_COLOR = 0xFFd3d6da;
  14. private static final int DEFAULT_HEIGHT_REACHED_PROGRESS_BAR = 2;
  15. private static final int DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR = 2;
  16. private static final int DEFAULT_CIRCLE_COLOR = 0XFF3F51B5;
  17. protected Paint mPaint = new Paint();
  18. // 字体颜色
  19. protected int mTextColor = DEFAULT_TEXT_COLOR;
  20. // 字体大小
  21. protected int mTextSize = sp2px(DEFAULT_TEXT_SIZE);
  22. // 覆盖进度高度
  23. protected int mReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_REACHED_PROGRESS_BAR);
  24. // 覆盖进度颜色
  25. protected int mReachedBarColor = DEFAULT_TEXT_COLOR;
  26. // 未覆盖进度高度
  27. protected int mUnReachedProgressBarHeight = dp2px(DEFAULT_HEIGHT_UNREACHED_PROGRESS_BAR);
  28. // 未覆盖进度颜色
  29. protected int mUnReachedBarColor = DEFAULT_COLOR_UNREACHED_COLOR;
  30. // 圆的颜色
  31. protected int mCircleColor = DEFAULT_CIRCLE_COLOR;
  32. protected int mRealWidth;
  33. protected boolean mIfDrawText = true;
  34. protected boolean mIfDrawCircle = true;
  35. protected static final int VISIBLE = 0;
  36. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs) {
  37. this(context, attrs, 0);
  38. }
  39. public HorizontalProgressBarWithNumber(Context context, AttributeSet attrs, int defStyle) {
  40. super(context, attrs, defStyle);
  41. obtainStyledAttributes(attrs);
  42. mPaint.setTextSize(mTextSize);
  43. mPaint.setColor(mTextColor);
  44. mPaint.setAntiAlias(true);
  45. }
  46. private void obtainStyledAttributes(AttributeSet attrs) {
  47. // 获取自定义属性
  48. final TypedArray attributes = getContext().obtainStyledAttributes(attrs, R.styleable.HorizontalProgressBarWithNumber);
  49. mTextColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_text_color, DEFAULT_TEXT_COLOR);
  50. mTextSize = (int) attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_text_size, mTextSize);
  51. mCircleColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_circle_color, DEFAULT_CIRCLE_COLOR);
  52. mReachedBarColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_reached_color, mTextColor);
  53. mUnReachedBarColor = attributes.getColor(R.styleable.HorizontalProgressBarWithNumber_progress_unreached_color, DEFAULT_COLOR_UNREACHED_COLOR);
  54. mReachedProgressBarHeight = (int) attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_reached_bar_height, mReachedProgressBarHeight);
  55. mUnReachedProgressBarHeight = (int) attributes.getDimension(R.styleable.HorizontalProgressBarWithNumber_progress_unreached_bar_height, mUnReachedProgressBarHeight);
  56. int textVisible = attributes.getInt(R.styleable.HorizontalProgressBarWithNumber_progress_text_visibility, VISIBLE);
  57. if (textVisible != VISIBLE) {
  58. mIfDrawText = false;
  59. }
  60. attributes.recycle();
  61. int left = (int) (mReachedProgressBarHeight * 0.8), right = (int) (mReachedProgressBarHeight * 0.8);
  62. int top = (int) (mReachedProgressBarHeight * 0.3 + dp2px(1)), bottom = (int) (mReachedProgressBarHeight * 0.3 + dp2px(1));
  63. setPadding(left, top, right, bottom);
  64. }
  65. @Override
  66. protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  67. int width = MeasureSpec.getSize(widthMeasureSpec);
  68. int height = measureHeight(heightMeasureSpec);
  69. setMeasuredDimension(width, height);
  70. mRealWidth = getMeasuredWidth() - getPaddingRight() - getPaddingLeft();
  71. }
  72. private int measureHeight(int measureSpec) {
  73. int result;
  74. int specMode = MeasureSpec.getMode(measureSpec);
  75. int specSize = MeasureSpec.getSize(measureSpec);
  76. if (specMode == MeasureSpec.EXACTLY) {
  77. result = specSize;
  78. } else {
  79. float textHeight = (mPaint.descent() - mPaint.ascent());
  80. result = (int) (getPaddingTop() + getPaddingBottom() + Math.max(
  81. Math.max(mReachedProgressBarHeight, mUnReachedProgressBarHeight), Math.abs(textHeight)));
  82. if (specMode == MeasureSpec.AT_MOST) {
  83. result = Math.min(result, specSize);
  84. }
  85. }
  86. return result;
  87. }
  88. @Override
  89. protected synchronized void onDraw(Canvas canvas) {
  90. canvas.save();
  91. canvas.translate(getPaddingLeft(), getHeight() / 2);
  92. boolean noNeedBg = false;
  93. float radio = getProgress() * 1.0f / getMax();
  94. float progressPosX = (int) (mRealWidth * radio);
  95. String text = getProgress() + "%";
  96. float textWidth = mPaint.measureText(text);
  97. float textHeight = (mPaint.descent() + mPaint.ascent()) / 2;
  98. float radius = (mReachedProgressBarHeight + getPaddingBottom() + getPaddingTop()) / 2;
  99. // 覆盖的进度
  100. float endX = progressPosX;
  101. if (endX > -1) {
  102. mPaint.setColor(mReachedBarColor);
  103. RectF rectF = new RectF(0, 0 - getPaddingTop() - getPaddingBottom(),
  104. endX, mReachedProgressBarHeight - getPaddingBottom());
  105. canvas.drawRoundRect(rectF, 25, 25, mPaint);
  106. }
  107. // 未覆盖的进度
  108. if (!noNeedBg) {
  109. float start = progressPosX;
  110. mPaint.setColor(mUnReachedBarColor);
  111. RectF rectF = new RectF(start, 0 - getPaddingTop() - getPaddingBottom(),
  112. mRealWidth + getPaddingRight() - radius, mReachedProgressBarHeight - getPaddingBottom());
  113. canvas.drawRoundRect(rectF, 25, 25, mPaint);
  114. }
  115. // 圆
  116. if (mIfDrawCircle) {
  117. mPaint.setColor(mCircleColor);
  118. canvas.drawCircle(progressPosX, 0, radius, mPaint);
  119. }
  120. // 文本
  121. if (mIfDrawText) {
  122. mPaint.setColor(mTextColor);
  123. canvas.drawText(text, progressPosX - textWidth / 2, -textHeight, mPaint);
  124. }
  125. canvas.restore();
  126. }
  127. /**
  128. * dp 2 px
  129. */
  130. protected int dp2px(int dpVal) {
  131. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, getResources().getDisplayMetrics());
  132. }
  133. /**
  134. * sp 2 px
  135. */
  136. protected int sp2px(int spVal) {
  137. return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics());
  138. }
  139. }
复制代码

使用

在布局文件中加入:

  1. <com.fun.progressbarwithnumber.HorizontalProgressBarWithNumber
  2. android:id="@+id/hpbwn"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:layout_margin="10dp"
  6. fun:progress_circle_color="#ff000000"
  7. fun:progress_reached_bar_height="20dp"
  8. fun:progress_reached_color="#FFFF4081"
  9. fun:progress_text_color="#ffffffff"
  10. fun:progress_text_size="14sp"
  11. fun:progress_unreached_bar_height="20dp"
  12. fun:progress_unreached_color="#ffBCB4E8" />
复制代码
  • progress_reached_bar_height:当前进度的高度
  • progress_unreached_bar_height:剩余进度的高度
  • progress_text_size:圆圈内文字的大小

注意:

当前进度和剩余进度的高度要一致,圆圈大小和圆圈内文字的大小要配合java代码调整。

项目源码:ProgressBarWithNumber_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报