• Android自定义圆弧进度条（半圆进度条） 圆弧渐变色进度条带指示 圆弧宽高可自由修改

    首先我们来看下效果图

    圆弧高度可以自定义，说明，只有高度设置为宽度的二分之一时，才是半圆，否则就是半圆的一部分，即圆弧。

    不只是圆弧是自定的，图中的文字“2”的控件也是自定义的， 下面也会给出源码。

    不多说，直接上源码：

    圆弧进度条控件：

    1. /**
    2.  * Created by yfx on 2022/10/11 17:32
    3.  * 
    4.  */
    5. public class CircleBarView extends View {
    6.     private Paint rPaint;//绘制矩形的画笔
    7.     private Paint progressPaint;//绘制圆弧的画笔
    8.     private Paint anchorPaint,anchorBgPaint;//锚点
    9.     private float anchorRadius,anchorBgRadius;
    10.     private int anchorColor,anchorBgColor;
    11.     private CircleBarAnim anim;
    12.     private Paint bgPaint;//绘制背景圆弧的画笔
    13.     private float progress;//可以更新的进度条数值
    14.     private float maxProgress;//进度条最大值
    15.     private float progressSweepAngle;//进度条圆弧扫过的角度
    16.     private int startAngle;//背景圆弧的起始角度
    17.     private float sweepAngle;//背景圆弧扫过的角度
    18.     private RectF mRectF;//绘制圆弧的矩形区域
    19.     private float barWidth;//圆弧进度条宽度
    20.     private int defaultSize;//自定义View默认的宽高
    21.     private int[] progressColors;//进度条圆弧颜色
    22.     private int bgColor;//背景圆弧颜色
    23.     private SweepGradient sweepGradient;//进度条颜色使用渐变色
    24.     private LinearGradient linearGradient;
    25.     private float circleWidth,circleHeight;
    26.     private float xDiff;
    27.     public CircleBarView(Context context, AttributeSet attrs) {
    28.         super(context, attrs);
    29.         init(context,attrs);
    30.     }
    31.     private void init(Context context,AttributeSet attrs) {
    32.         TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.CircleBarView);
    33.         int color1 = typedArray.getColor(R.styleable.CircleBarView_progress_color1,Color.RED);
    34.         int color2 = typedArray.getColor(R.styleable.CircleBarView_progress_color2,color1);
    35.         int color3 = typedArray.getColor(R.styleable.CircleBarView_progress_color3,color2);//写法巧妙
    36.         progressColors=new int[]{color1,color1,color2,color3};//必须得4个，
    37.         bgColor = typedArray.getColor(R.styleable.CircleBarView_bg_color,Color.GRAY);//默认为灰色
    38.         circleWidth = typedArray.getDimension(R.styleable.CircleBarView_circle_width,dip2px(context,200));//默认为0
    39.         circleHeight = typedArray.getDimension(R.styleable.CircleBarView_circle_height,dip2px(context,80));//默认为360
    40.         barWidth = typedArray.getDimension(R.styleable.CircleBarView_bar_width,dip2px(context,10));//默认为10dp
    41.         anchorRadius = typedArray.getDimension(R.styleable.CircleBarView_anchor_radius,dip2px(context,5));
    42.         anchorBgRadius = typedArray.getDimension(R.styleable.CircleBarView_anchor_bg_radius,dip2px(context,8.5f));
    43.         anchorColor = typedArray.getColor(R.styleable.CircleBarView_anchor_color,Color.RED);
    44.         anchorBgColor = typedArray.getColor(R.styleable.CircleBarView_anchor_bg_color,Color.GREEN);
    45.         maxProgress = typedArray.getInt(R.styleable.CircleBarView_progress_max,100);
    46.         typedArray.recycle();//typedArray用完之后需要回收，防止内存泄漏
    47.  
    48.         rPaint=new Paint();
    49.         rPaint.setStyle(Paint.Style.STROKE);//只描边，不填充
    50.         rPaint.setColor(Color.RED);
    51.  
    52.         progressPaint=new Paint();
    53.         progressPaint.setStyle(Paint.Style.STROKE);//只描边，不填充
    54.  
    55.         progressPaint.setStrokeWidth(barWidth);
    56.         progressPaint.setAntiAlias(true);//设置抗锯齿
    57.         progressPaint.setStrokeCap(Paint.Cap.ROUND);
    58.  
    59.         //锚点
    60.         anchorPaint=new Paint();
    61.         anchorPaint.setAntiAlias(true);//设置抗锯齿
    62.         anchorPaint.setColor(anchorColor);
    63.         //锚点背景
    64.         anchorBgPaint=new Paint();
    65.         anchorBgPaint.setAntiAlias(true);//设置抗锯齿
    66.  
    67.         int a=Color.alpha(anchorBgColor);
    68.         int r=Color.red(anchorBgColor);
    69.         int g=Color.green(anchorBgColor);
    70.         int b=Color.blue(anchorBgColor);
    71.         LogSuperUtil.i("circle_bar","a="+a+",r="+r+",g="+g+",b="+b);
    72.         anchorBgPaint.setColor(Color.rgb(r,g,b));
    73.         anchorBgPaint.setAlpha(a);
    74.         /*raw
    75.         anchorBgPaint.setColor(anchorBgColor);
    76.         anchorBgPaint.setAlpha(185);*/
    77.  
    78.         anim=new CircleBarAnim();
    79.         bgPaint=new Paint();
    80.         bgPaint.setStyle(Paint.Style.STROKE);
    81.         bgPaint.setColor(bgColor);
    82.         bgPaint.setStrokeWidth(barWidth);
    83.         bgPaint.setAntiAlias(true);
    84.         bgPaint.setStrokeCap(Paint.Cap.ROUND);
    85.         mRectF=new RectF();
    86.  
    87.         //
    88.         defaultSize=dip2px(context,200);
    89.     }
    90.     @Override
    91.     protected void onDraw(Canvas canvas) {
    92.         super.onDraw(canvas);
    93.         //进度条的总轮廓
    94.         canvas.drawArc(mRectF,startAngle,sweepAngle,false,bgPaint);
    95.         float outCircleRadius=mRectF.width()/2;//带宽度的进度条的中线半径
    96.         
    97.         if(sweepGradient==null) {
    98.             float centerX=(mRectF.left+mRectF.right)/2;
    99.             float centerY=(mRectF.top+mRectF.bottom)/2;
    100.             //
    101.             int rotateDiff=30;//为了解决圆弧开头出的圆角颜色不正常的问题，30度够用了吧
    102.             int rotateDegree=startAngle-rotateDiff;
    103.             float sweepEndPosition=(rotateDiff+sweepAngle*progress/maxProgress*1.0f)/360;
    104.             LogSuperUtil.i("circle_bar","startAngle="+startAngle+",sweepEndPosition="+sweepEndPosition);
    105.             
    106.             float[] positions={0,rotateDiff*1.0f/360,sweepEndPosition,1};
    107.             sweepGradient = new SweepGradient(centerX,centerY,progressColors,positions);
    108.             Matrix rotateMatrix = new Matrix();
    109.             //设置渐变色
    110.             rotateMatrix.setRotate(rotateDegree, centerX, centerY);//180表示从左侧开始往上渐变
    111.             sweepGradient.setLocalMatrix(rotateMatrix);//sweepGradient默认是从0度方向开始渐变的，所以要逆转一下。
    112.             progressPaint.setShader(sweepGradient);
    113.         }
    114.         /*
    115.         if(linearGradient==null) {
    116.             linearGradient = new LinearGradient(0, 0, outCircleRadius*2, 0, progressColors,
    117.                     null, LinearGradient.TileMode.CLAMP);
    118.             progressPaint.setShader(linearGradient);
    119.         }*/
    120.         //进度条
    121.         canvas.drawArc(mRectF,startAngle,progressSweepAngle,false,progressPaint);
    122.         float anchorAngle=progressSweepAngle+(startAngle-180);
    123.  
    124.         float anchorCoordRedius=outCircleRadius-barWidth/2;
    125.         double cosValue=Math.cos(Math.toRadians(anchorAngle));
    126.         double sinValue=Math.sin(Math.toRadians(anchorAngle));
    127.  
    128.         float diffByAnchor=anchorBgRadius-barWidth/2;//x和y的偏移正好都是这个
    129.         //float cx=(float)(outCircleRadius-cosValue*anchorCoordRedius+diffByAnchor);
    130.         float cx=(float)(outCircleRadius-cosValue*outCircleRadius+anchorBgRadius);
    131.         //float cy=(float)(outCircleRadius-sinValue*anchorCoordRedius+diffByAnchor);
    132.         float cy=(float)(outCircleRadius-sinValue*outCircleRadius+anchorBgRadius);
    133.         canvas.drawCircle(cx-xDiff,cy,anchorRadius,anchorPaint);//锚点小圆
    134.         canvas.drawCircle(cx-xDiff,cy,anchorBgRadius,anchorBgPaint);//锚点背景大圆
    135.     }
    136.     @Override
    137.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    138.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    139.         //int height=measureSize(defaultSize,heightMeasureSpec);
    140.         //int width=measureSize(defaultSize,widthMeasureSpec);
    141.         //startAngle是计算出来的，因为弦的这种，没法通过观察直接得出圆弧的起始角度
    142.         //通过数学计算得知x
    143.         //x是圆心（圆弧所在的圆的圆心）到弦（也就是圆弧的底部）的垂直距离
    144.         float x=(circleWidth*circleWidth-4*circleHeight*circleHeight)/(8*circleHeight);
    145.         //画圆弧用到的圆的半径
    146.         float r=x+circleHeight;
    147.         //int r=(int)(circleWidth/2/Math.cos(Math.toRadians(startAngle-180)));
    148.         //弦长/2/半径=cos(startAngle-180)
    149.         //(startAngle-180)
    150.         double asin=Math.asin(circleWidth/2/r);
    151.         //LogSuperUtil.i("circle_bar","asin="+asin);
    152.         int a=(int)Math.toDegrees(asin);
    153.         //LogSuperUtil.i("circle_bar","a="+a);
    154.         startAngle=180+(90-a);
    155.         sweepAngle=2*a;
    156.         //int min=Math.max(width,height);//获取View最短边的长度
    157.         int width=(int)(Math.sqrt(Math.pow(r+anchorBgRadius,2)-Math.pow(x,2))*2+0.5f+anchorBgRadius);//圆弧的宽度
    158.         width=(int)(2*(circleWidth/2+anchorBgRadius)+0.5f);
    159.         int height=(int)(circleHeight+anchorBgRadius+0.5f+anchorBgRadius);
    160.         //height=width;
    161.         xDiff=r-circleWidth/2;//画布是从最左边开始画圆且显示的，不偏移的话，显示的效果不对。
    162.         LogSuperUtil.i("circle_bar","xDiff="+xDiff);
    163.         setMeasuredDimension(width,height);
    164.         if(Math.min(width,height)>=barWidth*2) {//这里简单限制了圆弧的最大宽度
    165.             //1.mRectF决定着圆画在哪个框框里面
    166.             //2.mRectF在当前View中，但不是完全占据当前View
    167.             //3.弧度的粗细画的时候是均分到圆半径线的两侧的
    168.             //4.之所以矩形设置的四个点有偏移，是因为有弧度宽度。
    169.             //因为锚点也有宽度，点再次做调整.
    170.             //mRectF.set(barWidth/2,barWidth/2,min-barWidth/2,min-barWidth/2);
    171.             float diffByAnchor=anchorBgRadius-barWidth/2;//受锚点影响需要修正的偏移
    172.             //是整个圆的矩形，不是弧形区域所在的矩形
    173.             mRectF.set(barWidth/2+diffByAnchor-xDiff,barWidth/2+diffByAnchor,barWidth/2+diffByAnchor+2*r-xDiff,barWidth/2+diffByAnchor+2*r);
    174.         }
    175.     }
    176.     private int measureSize(int defaultSize,int measureSpec) {
    177.         int result=defaultSize;
    178.         int specMode= MeasureSpec.getMode(measureSpec);
    179.         int specSize= MeasureSpec.getSize(measureSpec);
    180.         if(specMode== MeasureSpec.EXACTLY) {
    181.             LogSuperUtil.i("circle_bar","=EXACTLY");
    182.             result=specSize;
    183.         }else if(specMode== MeasureSpec.AT_MOST) {
    184.             LogSuperUtil.i("circle_bar","=AT_MOST");
    185.             result=Math.min(result,specSize);
    186.         }else {
    187.             LogSuperUtil.i("circle_bar","=defaultSize");
    188.         }
    189.         return result;
    190.     }
    191.     private TextView textView;
    192.     private OnAnimationListener onAnimationListener;
    193.     public class CircleBarAnim extends Animation {
    194.         public CircleBarAnim() {
    195.  
    196.         }
    197.  
    198.         @Override
    199.         protected void applyTransformation(float interpolatedTime, Transformation t) {
    200.             super.applyTransformation(interpolatedTime, t);
    201.             progressSweepAngle=interpolatedTime*sweepAngle*progress/maxProgress;//这里计算进度条的比例
    202.             postInvalidate();
    203.             if(textView!=null&&onAnimationListener!=null) {
    204.                 textView.setText(onAnimationListener.howToChangeText(interpolatedTime,progress,maxProgress));
    205.             }
    206.         }
    207.     }
    208.  
    209.     /**
    210.      * 设置显示文字的TextView
    211.      * @param textView
    212.      */
    213.     public void setTextView(TextView textView) {
    214.         this.textView=textView;
    215.     }
    216.     /*
    217.     * circleBarView.setOnAnimationListener(new CircleBarView.OnAnimationListener() {
    218. 	@Override
    219. 	public String howToChangeText(float interpolatedTime, float progressNum, float maxNum) {
    220. 		DecimalFormat decimalFormat=new DecimalFormat("0.00");
    221. 		String s = decimalFormat.format(interpolatedTime * progressNum / maxNum * 100) + "%";
    222. 		return s;
    223. 	}
    224. });*/
    225.  
    226.  
    227.     public interface OnAnimationListener {
    228.         /**
    229.          * 如何处理要显示的文字内容
    230.          * @param interpolatedTime 从0渐变成1，到1时结束动画
    231.          * @param progressNum 进度条数值
    232.          * @param maxNum 进度条最大值
    233.          * @return
    234.          */
    235.         String howToChangeText(float interpolatedTime, float progressNum, float maxNum);
    236.     }
    237.     //写个方法给外部调用，用来设置动画时间
    238.     public void setProgress(float progress,int time) {
    239.         anim.setDuration(time);
    240.         this.startAnimation(anim);
    241.         this.progress=progress;
    242.     }
    243.     public static int dip2px(Context context,float dpValue) {
    244.         float scale=context.getResources().getDisplayMetrics().density;
    245.         return (int)(dpValue*scale+0.5f);
    246.     }
    247.     public static int px2dip(Context context,float pxValue) {
    248.         float scale=context.getResources().getDisplayMetrics().density;
    249.         return (int)(pxValue/scale+0.5f);
    250.     }
    251.  
    252.     /**
    253.      * //extraDistance比较小时，TextView离圆弧很近，是正常，因为TextView是从其自身的左上角开始渲染。
    254.      * @param sweepAnglePercent
    255.      * @param extraDistance
    256.      * @return
    257.      */
    258.     public float getAngleX(float sweepAnglePercent,int extraDistance) {
    259.         float outCircleRadius=mRectF.width()/2+barWidth/2;//带宽度的进度条的外圆半径
    260.         float diffByAnchor=anchorBgRadius-barWidth/2;//x和y的偏移正好都是这个
    261.         float x=(float)(outCircleRadius+diffByAnchor-Math.cos(Math.toRadians(startAngle-180+sweepAnglePercent*sweepAngle))*(outCircleRadius+dip2px(getContext(),extraDistance))-xDiff);
    262.         return x;
    263.     }
    264.     private static final String TAG="circle_bar";
    265.     /**
    266.      * 在当前View中的y坐标
    267.      * （注意，TextView渲染的时候，这个坐标是作为TextView控件的左上角进行渲染。
    268.      * 所以，extraDistance小的话，显示的结果TextView可能还在当前View的内部呢，但TextView的左上角是在圆外部的。
    269.      * @param sweepAnglePercent
    270.      * @param extraDistance 从外圆算的往外扩展的距离，不是从锚点背景边缘往外扩展。
    271.      * @return
    272.      */
    273.     public float getAngleY(float sweepAnglePercent,int extraDistance) {
    274.         float outCircleRadius=mRectF.width()/2+barWidth/2;//带宽度的进度条的外圆半径
    275.         float diffByAnchor=anchorBgRadius-barWidth/2;//x和y的偏移正好都是这个
    276.         float coordA=startAngle-180+sweepAnglePercent*sweepAngle;
    277.         LogSuperUtil.i("circle_bar","coordA="+coordA);
    278.         float coordY=(float)Math.sin(Math.toRadians(coordA))*(outCircleRadius+dip2px(getContext(),extraDistance));
    279.         LogSuperUtil.i("circle_bar","coordY="+coordY);
    280.         float tempR=outCircleRadius+diffByAnchor;
    281.         LogSuperUtil.i("circle_bar","tempR="+tempR+",="+circleWidth);//CircleWidth是圆弧宽度
    282.         LogSuperUtil.i("circle_bar","mRectF.width()/2="+mRectF.width()/2);
    283.         float y=(float) (tempR-coordY);
    284.         return y;
    285.     }
    286. }

    然后，是那个背景是圆（圆有渐变色和内间距）的文字控件的源码：

    1. /**
    2.  * 表示用户等级的文字，可以设置背景色、圆环色、圆弧与背景的内间距
    3.  * Created by yfx on 2022/10/20 16:36
    4.  */
    5. public class CircleBarTextView extends AppCompatTextView {
    6.     private Paint mPaintBg;
    7.     private Paint mPaintRing;
    8.     private float mRadiusBg;
    9.     private float mRadiusRing;
    10.     private float mRingStrokeWidth;
    11.     private float mPaddingRing2Bg;
    12.     private boolean mIsBgShow;
    13.     private boolean mIsRingShow;
    14.     private int[] ringColors;//进度条圆弧颜色
    15.     private int[] bgColors;//
    16.     private LinearGradient linearGradientRing;
    17.     private LinearGradient linearGradientBg;
    18.     public CircleBarTextView(Context context, @Nullable AttributeSet attrs) {
    19.         super(context, attrs);
    20.         init(context,attrs);
    21.     }
    22.     private void init(Context context,AttributeSet attrs) {
    23.         TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.CircleTextView);
    24.         int ringColor1 = typedArray.getColor(R.styleable.CircleTextView_ringColor1,Color.RED);
    25.         int ringColor2 = typedArray.getColor(R.styleable.CircleTextView_ringColor2,ringColor1);
    26.         //int color3 = typedArray.getColor(R.styleable.CircleTextView_ringColor3,color2);//写法巧妙
    27.         ringColors=new int[]{ringColor1,ringColor2};
    28.         int bgColor1 = typedArray.getColor(R.styleable.CircleTextView_bgColor1,Color.RED);
    29.         int bgColor2 = typedArray.getColor(R.styleable.CircleTextView_bgColor2,bgColor1);
    30.         //int color3 = typedArray.getColor(R.styleable.CircleTextView_ringColor3,color2);//写法巧妙
    31.         bgColors=new int[]{bgColor1,bgColor2};
    32.         mPaddingRing2Bg = typedArray.getDimension(R.styleable.CircleTextView_paddingRing2Bg,0);//写法巧妙
    33.         mRingStrokeWidth = typedArray.getDimension(R.styleable.CircleTextView_ringStrokeWidth,0);//写法巧妙
    34.         //
    35.         mPaintBg=new Paint();
    36.         mPaintBg.setColor(bgColor1);
    37.         mPaintBg.setStyle(Paint.Style.FILL);
    38.         mPaintBg.setAntiAlias(true);
    39. //
    40.         mPaintRing=new Paint();
    41.         mPaintBg.setColor(ringColor1);
    42.         mPaintRing.setStyle(Paint.Style.STROKE);
    43.         mPaintRing.setStrokeWidth(mRingStrokeWidth);
    44.         mPaintRing.setAntiAlias(true);
    45.  
    46.  
    47.     }
    48.     @Override
    49.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    50.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    51.         /*
    52.         int width=mRadiusRing*2;
    53.         int height=mRadiusRing*2;
    54.         setMeasuredDimension(width,height);*/
    55.     }
    56.  
    57.     @Override
    58.     protected void onDraw(Canvas canvas) {
    59.         float cx=getWidth()/2;
    60.         float cy=getWidth()/2;
    61.         mRadiusRing=getWidth()/2-mRingStrokeWidth/2;
    62.         mRadiusBg=mRadiusRing-mPaddingRing2Bg-mRingStrokeWidth/2;
    63.         //渐变色设置
    64.         if(linearGradientRing==null) {
    65.             float r=mRadiusRing+mRingStrokeWidth/2;
    66.             float x0=(float)(r-r/Math.sqrt(2));
    67.             float y0=(float)(r+r/Math.sqrt(2));
    68.             float x1=(float)(r+r/Math.sqrt(2));
    69.             float y1=(float)(r-r/Math.sqrt(2));
    70.             linearGradientRing = new LinearGradient(x0, y0, x1, y1, ringColors,
    71.                     null, LinearGradient.TileMode.CLAMP);
    72.             mPaintRing.setShader(linearGradientRing);
    73.         }
    74.  
    75.         if(linearGradientBg==null) {
    76.             float r=mRadiusRing+mRingStrokeWidth/2;//还是根据最大圆来计算
    77.             float x0=r-mRingStrokeWidth-mPaddingRing2Bg;
    78.             float y0=r;
    79.             float x1=r+mRadiusBg;
    80.             float y1=r;
    81.             //左下到右上的线性渐变
    82.             linearGradientBg = new LinearGradient(x0, y0, x1, y1, bgColors,
    83.                     null, LinearGradient.TileMode.CLAMP);
    84.             mPaintBg.setShader(linearGradientBg);
    85.         }
    86.         if(mIsBgShow) {
    87.             canvas.drawCircle(cx,cy,mRadiusBg,mPaintBg);
    88.         }
    89.  
    90.         if(mIsRingShow) {
    91.             canvas.drawCircle(cx,cy,mRadiusRing,mPaintRing);
    92.         }
    93.         //canvas.drawtext
    94.         super.onDraw(canvas);
    95.     }
    96.     public static int dip2px(Context context,float dpValue) {
    97.         float scale=context.getResources().getDisplayMetrics().density;
    98.         return (int)(dpValue*scale+0.5f);
    99.     }
    100.     public void setBgShow(boolean isShow) {
    101.         mIsBgShow=isShow;
    102.         postInvalidate();
    103.     }
    104.     public void setRingShow(boolean isShow) {
    105.         mIsRingShow=isShow;
    106.         postInvalidate();
    107.     }
    108. }

    自定义属性：

    文字的位置需要处理，使用时有几个细节需要注意，我们下篇再具体介绍。

    紧急联系请家伟信ye1061424091

  • 相关阅读:
    单例模式 创建型模式之一
    JSX基本使用
    计算机网络——计算机网络体系结构（4/4）-计算机网络体系结构中的专用术语（实体、协议、服务，三次握手‘三报文握手’、数据包术语）
    【深入浅出 Yarn 架构与实现】5-3 Yarn 调度器资源抢占模型
    linux系统iptables的操作
    手把手带你申请软著！助你提高通过率！！！
    如何使用Scrapy提取和处理数据
    ASP.NET Core 项目部署
    nginx系列第三篇：nginx平台相关源码自动生成流程
    Mysql数据库
  • 原文地址：https://blog.csdn.net/yeziyfx/article/details/127553212