Android 渐变圆环,圆形进度条效果实现

举报
再见孙悟空_ 发表于 2022/01/12 23:25:01 2022/01/12
【摘要】  最近做了一个功能,里面涉及到了渐变圆形的需求。就是一个颜色可以渐变的圆环,最后实现的效果如下图:   左图是带渐变效果,右图是不带渐变效果。原理还是绘图,Canvas可以绘制的对象有:弧线(arcs)、填充颜色(argb和color)、 Bitmap、圆(circle和oval)、点(point)、线...

 最近做了一个功能,里面涉及到了渐变圆形的需求。就是一个颜色可以渐变的圆环,最后实现的效果如下图:

 

左图是带渐变效果,右图是不带渐变效果。原理还是绘图,Canvas可以绘制的对象有:弧线(arcs)、填充颜色(argb和color)、

Bitmap、圆(circle和oval)、点(point)、线(line)、矩形(Rect)、图片(Picture)、圆角矩形 (RoundRect)、文本(text)、

顶点(Vertices)、路径(path)。通过组合这些对象我们可以画出一些简单有趣的界面出来,但是光有这些功能还是不够的,

如果我要画一个仪表盘(数字围绕显示在一个圆圈中)呢? 幸好Android还提供了一些对Canvas位置转换的方法:rorate、scale、

translate、skew(扭曲)等,而且它允许你通过获得它的转换矩阵对象(getMatrix方法,不知道什么是转换矩阵?)

直接操作它。这些操作就像是虽然你的笔还是原来的地方画,但是画纸旋转或者移动了,所以你画的东西的方位就产生变化。

为了方便一些转换操作,Canvas 还提供了保存和回滚属性的方法(save和restore),比如你可以先保存目前画纸的位置(save),

然后旋转90度,向下移动100像素后画一些图形,画完后调用restore方法返回到刚才保存的位置。

话不多说,上代码

核心类:

自定义控件 CircleProgressBar


  
  1. package com.jky.mobile_xmxt.view;
  2. import android.content.Context;
  3. import android.graphics.Canvas;
  4. import android.graphics.Color;
  5. import android.graphics.Paint;
  6. import android.graphics.RectF;
  7. import android.graphics.SweepGradient;
  8. import android.util.AttributeSet;
  9. import android.view.View;
  10. import android.view.animation.Animation;
  11. import android.view.animation.Transformation;
  12. import com.jky.mobile_xmxt.R;
  13. import java.text.DecimalFormat;
  14. /**
  15. * 圆盘计步图表
  16. */
  17. public class CircleProgressBar extends View {
  18. private RectF mWheelRect = new RectF();
  19. private Paint mDefaultWheelPaint;
  20. private Paint mFinishWheelPaint;
  21. private Paint mCenterWheelPaint;
  22. private Paint mTitlePaint, mStepPaint, mTargetPaint;
  23. private float mCircleStrokeWidth;
  24. private float mSweepAnglePer;
  25. private float mPercent;
  26. private int mStepNum, mCurrStepNum;
  27. private float pressExtraStrokeWidth;
  28. private BarAnimation mAnim;
  29. private int mMaxStepNum;// 默认最大步数
  30. private float mTitleY, mStepY, mTargetY;
  31. private DecimalFormat mDecimalFormat = new DecimalFormat("#.0");// 格式为保留小数点后一位
  32. public static String GOAL_STEP;
  33. public static String PERCENT;
  34. public CircleProgressBar(Context context) {
  35. super(context);
  36. init(null, 0);
  37. }
  38. public CircleProgressBar(Context context, AttributeSet attrs) {
  39. super(context, attrs);
  40. init(attrs, 0);
  41. }
  42. public CircleProgressBar(Context context, AttributeSet attrs, int defStyle) {
  43. super(context, attrs, defStyle);
  44. init(attrs, defStyle);
  45. }
  46. private void init(AttributeSet attrs, int defStyle) {
  47. mFinishWheelPaint = new Paint();
  48. mFinishWheelPaint.setColor(Color.rgb(100, 113, 205));
  49. mFinishWheelPaint.setStyle(Paint.Style.STROKE);// 空心
  50. mFinishWheelPaint.setStrokeCap(Paint.Cap.ROUND);// 圆角画笔
  51. mFinishWheelPaint.setAntiAlias(true);// 去锯齿
  52. mCenterWheelPaint = new Paint();
  53. mCenterWheelPaint.setColor(Color.rgb(243, 243, 243));
  54. mCenterWheelPaint.setStyle(Paint.Style.STROKE);
  55. mCenterWheelPaint.setStrokeCap(Paint.Cap.ROUND);
  56. mCenterWheelPaint.setAntiAlias(true);
  57. mDefaultWheelPaint = new Paint();
  58. mDefaultWheelPaint.setColor(Color.rgb(127, 127, 127));
  59. mDefaultWheelPaint.setStyle(Paint.Style.STROKE);
  60. mDefaultWheelPaint.setStrokeCap(Paint.Cap.ROUND);
  61. mDefaultWheelPaint.setAntiAlias(true);
  62. mTitlePaint = new Paint();
  63. mTitlePaint.setAntiAlias(true);
  64. mTitlePaint.setColor(Color.WHITE);
  65. mStepPaint = new Paint();
  66. mStepPaint.setAntiAlias(true);
  67. mStepPaint.setColor(Color.WHITE);
  68. mTargetPaint = new Paint();
  69. mTargetPaint.setAntiAlias(true);
  70. mTargetPaint.setColor(Color.WHITE);
  71. mAnim = new BarAnimation();
  72. }
  73. @Override
  74. protected void onDraw(Canvas canvas) {
  75. canvas.drawArc(mWheelRect, 0, 359, false, mDefaultWheelPaint);
  76. canvas.drawArc(mWheelRect, 0, 359, false, mCenterWheelPaint);
  77. canvas.drawArc(mWheelRect, 90, mSweepAnglePer, false, mFinishWheelPaint);
  78. // canvas.drawText("步数", mWheelRect.centerX() - (mTitlePaint.measureText("步数") / 2), mTitleY,
  79. // mTitlePaint);
  80. canvas.drawText(mCurrStepNum + "",
  81. mWheelRect.centerX() - (mStepPaint.measureText(String.valueOf(mCurrStepNum)) / 2), mStepY,
  82. mStepPaint);
  83. String description = "";
  84. float percent = getPercent();
  85. if(percent > 0.5){
  86. description ="严重污染";
  87. }else if(percent<0.5){
  88. description ="中等污染";
  89. }else{
  90. description ="普通污染";
  91. }
  92. canvas.drawText(description , mWheelRect.centerX() -
  93. (mTargetPaint.measureText(description) / 2), mTargetY, mTargetPaint);
  94. SweepGradient sweepGradient = new SweepGradient(mWheelRect.centerX(), mWheelRect.centerY(),
  95. new int[]{getResources().getColor(R.color.color_environment_severe), getResources().getColor(R.color.color_environment_serious),
  96. getResources().getColor(R.color.color_environment_excellent),
  97. getResources().getColor(R.color.color_environment_good), getResources().getColor(R.color.color_environment_mild),
  98. getResources().getColor(R.color.color_environment_moderate)}, null);
  99. mFinishWheelPaint.setShader(sweepGradient);
  100. }
  101. @Override
  102. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  103. int height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
  104. int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
  105. int min = Math.min(width, height);// 获取View最短边的长度
  106. setMeasuredDimension(min, min);// 强制改View为以最短边为长度的正方形
  107. mCircleStrokeWidth = getTextScale(15, min);// 圆弧的宽度
  108. pressExtraStrokeWidth = getTextScale(10, min);// 圆弧离矩形的距离
  109. mWheelRect.set(mCircleStrokeWidth + pressExtraStrokeWidth, mCircleStrokeWidth + pressExtraStrokeWidth,
  110. min - mCircleStrokeWidth - pressExtraStrokeWidth, min - mCircleStrokeWidth - pressExtraStrokeWidth);// 设置矩形
  111. mTitlePaint.setTextSize(getTextScale(60, min));
  112. mStepPaint.setTextSize(getTextScale(120, min));
  113. mTargetPaint.setTextSize(getTextScale(40, min));
  114. mTitleY = getTextScale(170, min);
  115. mStepY = getTextScale(300, min);
  116. mTargetY = getTextScale(380, min);
  117. mFinishWheelPaint.setStrokeWidth(mCircleStrokeWidth);
  118. mCenterWheelPaint.setStrokeWidth(mCircleStrokeWidth);
  119. mDefaultWheelPaint.setStrokeWidth(mCircleStrokeWidth - getTextScale(2, min));
  120. mDefaultWheelPaint.setShadowLayer(getTextScale(10, min), 0, 0, Color.rgb(127, 127, 127));// 设置阴影
  121. }
  122. /**
  123. * 进度条动画
  124. *
  125. * @author Administrator
  126. */
  127. public class BarAnimation extends Animation {
  128. /**
  129. * 每次系统调用这个方法时, 改变mSweepAnglePer,mPercent,stepnumbernow的值,
  130. * 然后调用postInvalidate()不停的绘制view。
  131. */
  132. @Override
  133. protected void applyTransformation(float interpolatedTime, Transformation t) {
  134. // if (interpolatedTime < 1.0f) {
  135. // mPercent = Float.parseFloat(mDecimalFormat.format(interpolatedTime * mStepNum * 100f / mMaxStepNum));// 将浮点值四舍五入保留一位小数
  136. // mSweepAnglePer = interpolatedTime * mStepNum * 360 / mMaxStepNum;
  137. // mCurrStepNum = (int) (interpolatedTime * mStepNum);
  138. // } else {
  139. mPercent = Float.parseFloat(mDecimalFormat.format(mStepNum * 100f / mMaxStepNum));// 将浮点值四舍五入保留一位小数
  140. if (mPercent > 100.0f) {
  141. mPercent = 100.0f;
  142. }
  143. PERCENT = String.valueOf(mPercent);
  144. mSweepAnglePer = mStepNum * 360 / mMaxStepNum;
  145. mCurrStepNum = mStepNum;
  146. // }
  147. requestLayout();
  148. }
  149. }
  150. public float getPercent() {
  151. return mPercent;
  152. }
  153. /**
  154. * 根据控件的大小改变绝对位置的比例
  155. *
  156. * @param n
  157. * @param m
  158. * @return
  159. */
  160. public float getTextScale(float n, float m) {
  161. return n / 500 * m;
  162. }
  163. /**
  164. * 更新步数和设置一圈动画时间
  165. *
  166. * @param stepCount
  167. * @param time
  168. */
  169. public void update(int stepCount, int time) {
  170. this.mStepNum = stepCount;
  171. mAnim.setDuration(time);
  172. // setAnimationTime(time);
  173. this.startAnimation(mAnim);
  174. }
  175. /**
  176. * @param stepNum
  177. */
  178. public void setMaxStepNum(int stepNum) {
  179. mMaxStepNum = stepNum;
  180. GOAL_STEP = String.valueOf(mMaxStepNum);
  181. }
  182. public void setColor(int color) {
  183. mFinishWheelPaint.setColor(color);
  184. mStepPaint.setColor(color);
  185. }
  186. /**
  187. * 设置动画时间
  188. *
  189. * @param time
  190. */
  191. public void setAnimationTime(int time) {
  192. mAnim.setDuration(time * mStepNum / mMaxStepNum);// 按照比例设置动画执行时间
  193. }
  194. }

xml引用


  
  1. <com.jky.mobile_xmxt.view.CircleProgressBar
  2. android:id="@+id/color_progress_view"
  3. android:layout_width="match_parent"
  4. android:layout_height="0dp"
  5. android:layout_weight="6"
  6. />

Activity调用方法


  
  1. color_progress_view = (CircleProgressBar)view.findViewById(R.id.color_progress_view);
  2. color_progress_view.setMaxStepNum(500);
  3. color_progress_view.update(470,1000);

由于和调用其他控件方法类似,姑且省去了很多其他业务逻辑代码,代码不是特别复杂,修改起来也很方便(修改颜色,总量及比例等),所以只粘贴核心相关的代码,希望可以帮助到大家。

如果大家还有其他问题,也欢迎大家加入我的qq群交流讨论:

开发一群:454430053开发二群:537532956

文章来源: wukong.blog.csdn.net,作者:再见孙悟空_,版权归原作者所有,如需转载,请联系作者。

原文链接:wukong.blog.csdn.net/article/details/79286218

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200