devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Android 自定义带进度显示的半圆形进度条ArcTextProgressBar_progressbar 半圆角

作者：花生_TL007 | 2024-04-23 13:35:58

赞

踩

progressbar 半圆角

自定义ArcTextProgressBar

这个控件最终需要实现如下效果：

1、进度条采用半圆弧形式呈现；

2、圆弧上有已完成的进度提示；

见下面效果图：



其他一些诸于设置进度条宽度、颜色，进度文字圆大小等属性具体见代码中的定义，好废话不说，上代码：

首先是自定义的属性，这样便于在xml文件中设置属性：

  1. <declare-styleable name="ArcTextProgressBar">
  2.         <attr name="arc_text_progress_stroke_width" format="integer" />
  3.         <attr name="arc_text_progress_text_bg_circle_diameter" format="integer" />
  4.         <attr name="arc_text_progress_text_string_prefix" format="string" />
  5.         <attr name="arc_text_progress_text_string_suffix" format="string" />
  6.         <attr name="arc_text_progress_min_progress" format="integer" />
  7.         <attr name="arc_text_progress_current_progress" format="integer" />
  8.         <attr name="arc_text_progress_max_progress" format="integer" />
  9.         <attr name="arc_text_progress_total_arc_color" format="color" />
  10.         <attr name="arc_text_progress_current_arc_color" format="color" />
  11.         <attr name="arc_text_progress_circle_text_bg_color" format="color" />
  12.         <attr name="arc_text_progress_circle_text_color" format="color" />
  13.         <attr name="arc_text_progress_circle_text_size" format="integer" />
  14.  
  15.     </declare-styleable>


然后是ArcTextProgressBar.java文件，具体说明见注释，应该比较清楚： 

  1. public class ArcTextProgressBar extends View {
  2.     private int diameter = 600;                                                 // 圆弧直径
  3.  
  4.     private int mStokeWidth = 40;                                               // 进度条宽度
  5.     private int mTextBgCircleDiameter = 20;                                     // 进度条圆形背景上的致敬
  6.     private String mTextStringPrefix = "已完成";                                 // 进度提示文字前缀
  7.     private int mMinProgress = 0;
  8.     private int mCurrentProgress = 25;                                          // 进度条当前进度
  9.     private int mMaxProgress = 100;
  10.     private String mTextStringSuffix = "%";                                     // 进度提示文字后缀
  11.  
  12.     private int mTotalArcColor = Color.GRAY;
  13.     private int mCurrentArcColor = Color.CYAN;
  14.     private int mCircleTextBgColor = Color.CYAN;
  15.     private int mCircleTextColor = Color.WHITE;
  16.  
  17.     private int mCircleTextSize = dipToPx(8);
  18.  
  19.     private int mStartAngle = 180;                                              // 进度条开始绘制的弧度
  20.     private int mSweepAngle = 90;                                               // 进度条滑过的弧度
  21.     private int mTotalAngle = 180;                                              // 进度条总共的弧度
  22.  
  23.     private Point mPointTextBgCircleCenter = null;                              // 文字背景圆的圆心坐标
  24.     private RectF mRectBg = null;                                               // 背景矩形
  25.     private Paint mPaintAllArc = null;                                          //
  26.     private Paint mPaintCurrentArc = null;
  27.     private Paint mPaintCircleBg = null;
  28.     private StaticLayout mStaticLayout = null;
  29.     private TextPaint mPaintCircleText = null;
  30.  
  31.     public ArcTextProgressBar(Context context) {
  32.         super(context, null);
  33.         initView();
  34.     }
  35.  
  36.     public ArcTextProgressBar(Context context, AttributeSet attrs) {
  37.         super(context, attrs, 0);
  38.         initView();
  39.         initConfig(context, attrs);
  40.     }
  41.  
  42.     public ArcTextProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
  43.         super(context, attrs, defStyleAttr);
  44.         initView();
  45.         initConfig(context, attrs);
  46.     }
  47.  
  48.     private void initConfig(Context context, AttributeSet attrs) {
  49.  
  50.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ArcTextProgressBar);
  51.         mStokeWidth = typedArray.getInteger(R.styleable.ArcTextProgressBar_arc_text_progress_stroke_width, 40);
  52.         mTextBgCircleDiameter = typedArray.getInteger(R.styleable.ArcTextProgressBar_arc_text_progress_text_bg_circle_diameter, 20);
  53.         mTextStringPrefix = typedArray.getString(R.styleable.ArcTextProgressBar_arc_text_progress_text_string_prefix);
  54.         mTextStringSuffix = typedArray.getString(R.styleable.ArcTextProgressBar_arc_text_progress_text_string_suffix);
  55.         mMinProgress = typedArray.getInteger(R.styleable.ArcTextProgressBar_arc_text_progress_min_progress, 0);
  56.         mMaxProgress = typedArray.getInteger(R.styleable.ArcTextProgressBar_arc_text_progress_max_progress, 100);
  57.         mCurrentProgress = typedArray.getInteger(R.styleable.ArcTextProgressBar_arc_text_progress_current_progress, 25);
  58.         mTotalArcColor = typedArray.getColor(R.styleable.ArcTextProgressBar_arc_text_progress_total_arc_color, Color.GRAY);
  59.         mCurrentArcColor = typedArray.getColor(R.styleable.ArcTextProgressBar_arc_text_progress_current_arc_color, Color.CYAN);
  60.         mCircleTextBgColor = typedArray.getColor(R.styleable.ArcTextProgressBar_arc_text_progress_circle_text_bg_color, Color.CYAN);
  61.         mCircleTextColor = typedArray.getColor(R.styleable.ArcTextProgressBar_arc_text_progress_circle_text_color, Color.WHITE);
  62.         mCircleTextSize = typedArray.getInteger(R.styleable.ArcTextProgressBar_arc_text_progress_circle_text_size, dipToPx(8));
  63.  
  64.         // 进行初始化设置
  65.         if (null == mTextStringPrefix) {
  66.             mTextStringPrefix = "已完成";
  67.         }
  68.         if (null == mTextStringSuffix) {
  69.             mTextStringSuffix = "%";
  70.         }
  71.         setStokeWidth(mStokeWidth);
  72.         setTextBgCircleDiameter(mTextBgCircleDiameter);
  73.         setTextStringPrefix(mTextStringPrefix);
  74.         setTextStringSuffix(mTextStringSuffix);
  75.         setMinProgress(mMinProgress);
  76.         setMaxProgress(mMaxProgress);
  77.         setCurrentProgress(mCurrentProgress);
  78.         setTotalArcColor(mTotalArcColor);
  79.         setCurrentArcColor(mCurrentArcColor);
  80.         setCircleTextBgColor(mCircleTextBgColor);
  81.         setCircleTextColor(mCircleTextColor);
  82.         typedArray.recycle();
  83.     }
  84.  
  85.     @Override
  86.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  87.         int width = Math.max(mTextBgCircleDiameter, mStaticLayout.getWidth()) + 10 + diameter;
  88.         int height = Math.max(mTextBgCircleDiameter, mStaticLayout.getWidth()) + 10 + diameter / 2;
  89.         setMeasuredDimension(width, height);
  90.     }
  91.  
  92.  
  93.     private void initView() {
  94.         diameter = getScreenWidth() * 4 / 5 - getPaddingLeft() - getPaddingRight();
  95.         // 绘制文字
  96.         mPaintCircleText = new TextPaint();
  97.         mPaintCircleText.setColor(mCircleTextColor);
  98.         mPaintCircleText.setAntiAlias(true);
  99.         mPaintCircleText.setTextSize(mCircleTextSize);
  100.         float startChangeLinePos = mPaintCircleText.measureText(mTextStringPrefix);
  101.         mStaticLayout = new StaticLayout(mTextStringPrefix + mCurrentProgress + mTextStringSuffix,
  102.                 mPaintCircleText, (int) startChangeLinePos, Layout.Alignment.ALIGN_CENTER, 1.0f, 1.0f, true);
  103.  
  104.         int maxStroke = mStokeWidth + mTextBgCircleDiameter + mStaticLayout.getWidth();
  105.  
  106.         // 计算当前滑过的弧度
  107.         mSweepAngle = (int) (mCurrentProgress * 1.0 / 100 * mTotalAngle);
  108.         mRectBg = new RectF();
  109.         mRectBg.left = Math.max(mTextBgCircleDiameter, mStaticLayout.getWidth()) / 2 + 10;
  110.         mRectBg.top = Math.max(mTextBgCircleDiameter, mStaticLayout.getWidth()) / 2 + 10;
  111.         mRectBg.right = Math.max(mTextBgCircleDiameter, mStaticLayout.getWidth()) / 2 + 10 + diameter;
  112.         mRectBg.bottom = Math.max(mTextBgCircleDiameter, mStaticLayout.getWidth()) / 2 + 10 + diameter;
  113.  
  114.         // 绘制全部进度圆弧
  115.         mPaintAllArc = new Paint();
  116.         mPaintAllArc.setAntiAlias(true);
  117.         mPaintAllArc.setStyle(Paint.Style.STROKE);
  118.         mPaintAllArc.setStrokeWidth(mStokeWidth);
  119.         mPaintAllArc.setColor(mTotalArcColor);
  120.         mPaintAllArc.setStrokeCap(Paint.Cap.ROUND);
  121.  
  122.         // 当前进度的弧形
  123.         mPaintCurrentArc = new Paint();
  124.         mPaintCurrentArc.setAntiAlias(true);
  125.         mPaintCurrentArc.setStyle(Paint.Style.STROKE);
  126.         mPaintCurrentArc.setStrokeCap(Paint.Cap.ROUND);
  127.         mPaintCurrentArc.setStrokeWidth(mStokeWidth);
  128.         mPaintCurrentArc.setColor(mCurrentArcColor);
  129.  
  130.         // 绘制当前文字圆形背景
  131.         mPaintCircleBg = new Paint();
  132.         mPaintCircleBg.setAntiAlias(true);
  133.         mPaintCircleBg.setStyle(Paint.Style.FILL);
  134.         mPaintCircleBg.setColor(mCircleTextBgColor);
  135.     }
  136.  
  137.     @Override
  138.     protected void onDraw(Canvas canvas) {
  139.         super.onDraw(canvas);
  140.         // 控件背景
  141. //        canvas.drawRect(mRectBg, mPaintRectBg);
  142.         // 整个弧
  143.         canvas.drawArc(mRectBg, mStartAngle, mTotalAngle, false, mPaintAllArc);
  144.         // 当前进度
  145.         canvas.drawArc(mRectBg, mStartAngle, mSweepAngle, false, mPaintCurrentArc);
  146.         // 得到文字背景圆的圆心
  147.         mPointTextBgCircleCenter = calculateTextBgCircleCenter();
  148.  
  149.         if (mCurrentProgress == 0 || mCurrentProgress == 100) {
  150.             canvas.drawCircle(mPointTextBgCircleCenter.x, mPointTextBgCircleCenter.y - mStaticLayout.getWidth() / 2,
  151.                     ((Math.max(mStokeWidth, mTextBgCircleDiameter) + mStaticLayout.getWidth()) / 2), mPaintCircleBg);
  152.             //开始绘制文字的位置
  153.             canvas.translate(mPointTextBgCircleCenter.x - mStaticLayout.getWidth() / 2,
  154.                     mPointTextBgCircleCenter.y - mStaticLayout.getHeight());
  155.         } else {
  156.             canvas.drawCircle(mPointTextBgCircleCenter.x, mPointTextBgCircleCenter.y,
  157.                     ((Math.max(mStokeWidth, mTextBgCircleDiameter) + mStaticLayout.getWidth()) / 2), mPaintCircleBg);
  158.             //开始绘制文字的位置
  159.             canvas.translate(mPointTextBgCircleCenter.x - mStaticLayout.getWidth() / 2,
  160.                     mPointTextBgCircleCenter.y - mStaticLayout.getHeight() / 2);
  161.         }
  162.  
  163.         mStaticLayout.draw(canvas);
  164.     }
  165.  
  166.     /**
  167.      * 关键点：计算文字背景圆的圆心
  168.      *
  169.      * @return the textBgCircleCenter
  170.      */
  171.     private Point calculateTextBgCircleCenter() {
  172.         // 得到圆环中心圆对应的半径：  外半径 - 内半径 / 2
  173.         float arcRadius = mRectBg.width() / 2;
  174.         //圆心
  175.         Point point = new Point();
  176.         point.x = (int) (mRectBg.width() / 2 + mRectBg.left - arcRadius * Math.cos(mSweepAngle * 3.14 / 180));
  177.         point.y = (int) (mRectBg.height() / 2 + mRectBg.top - arcRadius * Math.sin(mSweepAngle * 3.14 / 180));
  178.  
  179.         return point;
  180.     }
  181.  
  182.     /**
  183.      * dip 转换成px
  184.      *
  185.      * @param dip
  186.      * @return
  187.      */
  188.     private int dipToPx(float dip) {
  189.         float density = getContext().getResources().getDisplayMetrics().density;
  190.         return (int) (dip * density + 0.5f * (dip >= 0 ? 1 : -1));
  191.     }
  192.  
  193.     /**
  194.      * 得到屏幕宽度
  195.      *
  196.      * @return
  197.      */
  198.     private int getScreenWidth() {
  199.         WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
  200.         DisplayMetrics displayMetrics = new DisplayMetrics();
  201.         windowManager.getDefaultDisplay().getMetrics(displayMetrics);
  202.         return displayMetrics.widthPixels;
  203.     }
  204.  
  205.     /**
  206.      * 设置progressBar宽度
  207.      *
  208.      * @param stokeWidth 宽度
  209.      */
  210.     public void setStokeWidth(int stokeWidth) {
  211.         this.mStokeWidth = stokeWidth;
  212.         mPaintAllArc.setStrokeWidth(mStokeWidth);
  213.         mPaintCurrentArc.setStrokeWidth(mStokeWidth);
  214.         invalidate();
  215.     }
  216.  
  217.     /**
  218.      * 设置progressBar进度提示圆形直径
  219.      *
  220.      * @param textBgCircleDiameter 直径
  221.      **/
  222.     public void setTextBgCircleDiameter(int textBgCircleDiameter) {
  223.         this.mTextBgCircleDiameter = textBgCircleDiameter;
  224.         // todo 根据直径大小来设置里面文字的大小
  225.         invalidate();
  226.     }
  227.  
  228.     public void setTextStringPrefix(String textStringPrefix) {
  229.         this.mTextStringPrefix = textStringPrefix;
  230.         invalidate();
  231.     }
  232.  
  233.     public void setMinProgress(int minProgress) {
  234.         this.mMinProgress = minProgress;
  235.     }
  236.  
  237.     public void setCurrentProgress(int currentProgress) {
  238.         if (currentProgress < mMinProgress) {
  239.             currentProgress = mCurrentProgress;
  240.         } else if (currentProgress > mMaxProgress) {
  241.             currentProgress = mMaxProgress;
  242.         }
  243.         this.mCurrentProgress = currentProgress;
  244.         mSweepAngle = (int) (mCurrentProgress * 1.0 / 100 * mTotalAngle);
  245.         float startChangeLinePos = mPaintCircleText.measureText(mTextStringPrefix);
  246.         mStaticLayout = new StaticLayout(mTextStringPrefix + mCurrentProgress + mTextStringSuffix,
  247.                 mPaintCircleText, (int) startChangeLinePos, Layout.Alignment.ALIGN_CENTER, 1.0f, 1.0f, true);
  248.         // todo 设置动画
  249.         invalidate();
  250.     }
  251.  
  252.     public void setMaxProgress(int maxProgress) {
  253.         this.mMaxProgress = maxProgress;
  254.     }
  255.  
  256.     public void setTextStringSuffix(String textStringSuffix) {
  257.         this.mTextStringSuffix = textStringSuffix;
  258.         invalidate();
  259.     }
  260.  
  261.     public void setTotalArcColor(int mTotalArcColor) {
  262.         this.mTotalArcColor = mTotalArcColor;
  263.         mPaintAllArc.setColor(mTotalArcColor);
  264.         invalidate();
  265.     }
  266.  
  267.     public void setCurrentArcColor(int currentArcColor) {
  268.         this.mCurrentArcColor = currentArcColor;
  269.         mPaintCurrentArc.setColor(mCurrentArcColor);
  270.         invalidate();
  271.     }
  272.  
  273.     public void setCircleTextBgColor(int circleTextBgColor) {
  274.         this.mCircleTextBgColor = circleTextBgColor;
  275.         mPaintCircleBg.setColor(mCircleTextBgColor);
  276.         invalidate();
  277.     }
  278.  
  279.     public void setCircleTextColor(int circleTextColor) {
  280.         this.mCircleTextColor = circleTextColor;
  281.         mPaintCircleText.setColor(mCircleTextColor);
  282.         invalidate();
  283.     }
  284.  
  285.     public void setCircleTextSize(int circleTextSize) {
  286.         this.mCircleTextSize = dipToPx(circleTextSize);
  287.         mPaintCircleText.setTextSize(mCircleTextSize);
  288.         invalidate();
  289.     }
  290. }

需要重点注意的问题：

1、进度圆圆心的确定；

2、onMeasure整个空间宽、高的计算；


需要完善的地方：

1、进度圆中的文字大小应该能自适应圆本身的大小；

2、添加进度圆动画效果；

将在之后进行更新。


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/474143
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号