自定义圆形进度条，支持设置初始进度,更改进度条颜色 背景色 进度条中间可以设置图片。

于 2022-11-02 17:35:09 发布
阅读量464 收藏
点赞数
文章标签： java android 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39852372/article/details/127651136
版权

自定义圆形进度条，支持设置初始进度,更改进度条颜色 背景色 进度条中间可以设置图片。

先上效果图

效果图

在这里插入图片描述

废话不多说直接上代码

public class ProgressBarView extends View {


    private Paint mPaintBack;
    private Paint mPaint;
    private Paint mPaintTextCurrentProgressTextColor;
    private Paint mPaintTextAggregateSchedulingTextColor;
    private int strokeWidth;//进度条宽度
    private int textSize;//文字大小
    private int drawBack;//进度背景颜色
    private int ProgressColor;//进度颜色
    private int currentProgressTextColor;//当前进度文字颜色
    private int aggregateSchedulingTextColor;//总进度文字颜色
    private int ImageTop;
    private int ImageLeft;
    private int centreImage;//中间图片
    private OnProgressChangedListener mListener;
    private ValueAnimator mValueAnimator;
    // 当前进度
    private float mProgress;
    private float mDefaultProgress;//默认进度
    private int mGoldAmount;//金币总数
    // 总进度
    private int mTotalProgress = 100;
    private Bitmap mBitmap;
 


    public ProgressBarView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
        init();
    }

    @SuppressLint("ResourceAsColor")
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ProgressBarView);
        textSize = (int) typedArray.getDimension(R.styleable.ProgressBarView_textSize, 15);
        strokeWidth = (int) typedArray.getDimension(R.styleable.ProgressBarView_strokeWidth, 8);
        centreImage = typedArray.getResourceId(R.styleable.ProgressBarView_centreImage, R.mipmap.progress_bar_view_image);
        drawBack = typedArray.getColor(R.styleable.ProgressBarView_drawBack, R.color.color_f1f1f1);
        ProgressColor = typedArray.getColor(R.styleable.ProgressBarView_ProgressColor, R.color.color_d19ef4);
        currentProgressTextColor = typedArray.getColor(R.styleable.ProgressBarView_currentProgressTextColor, R.color.color_d19ef4);
        aggregateSchedulingTextColor = typedArray.getColor(R.styleable.ProgressBarView_aggregateSchedulingTextColor, R.color.color_706A6A);
        ImageTop = (int) typedArray.getDimension(R.styleable.ProgressBarView_ImageTop, 25);
        typedArray.recycle();
    }

    private void init() {
        mBitmap = BitmapFactory.decodeResource(this.getContext().getResources(), centreImage);


        mPaintBack = new Paint();
        mPaintBack.setColor(drawBack);
        mPaintBack.setStyle(Paint.Style.STROKE);
        mPaintBack.setAntiAlias(true);
        mPaintBack.setStrokeCap(Paint.Cap.ROUND);
        mPaintBack.setStrokeWidth(strokeWidth);

        mPaint = new Paint();
        mPaint.setColor(ProgressColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeWidth(strokeWidth);

        mPaintTextCurrentProgressTextColor = new Paint();
        mPaintTextCurrentProgressTextColor.setAntiAlias(true);
        mPaintTextCurrentProgressTextColor.setStyle(Paint.Style.FILL);
        mPaintTextCurrentProgressTextColor.setColor(currentProgressTextColor);
        mPaintTextCurrentProgressTextColor.setTextSize(sp2px(textSize));

        mPaintTextAggregateSchedulingTextColor = new Paint();
        mPaintTextAggregateSchedulingTextColor.setAntiAlias(true);
        mPaintTextAggregateSchedulingTextColor.setStyle(Paint.Style.FILL);
        mPaintTextAggregateSchedulingTextColor.setColor(aggregateSchedulingTextColor);
        mPaintTextAggregateSchedulingTextColor.setTextSize(sp2px(textSize));

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制背景矩形
        drawBack(canvas);
        //绘制进度
        drawProgress(canvas);//动画进度


        drawProgressDefault(canvas);//默认进度


        //绘制文字
        drawText(canvas);

        drawImage(canvas);
    }


    //背景矩形
    private void drawBack(Canvas canvas) {
        //创建圆环矩形
        RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
        //画出灰色进度条作为背景
        canvas.drawArc(rectF, 0, 360, false, mPaintBack);
    }

    //创建圆环矩形
    private void drawProgress(Canvas canvas) {
        RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
        canvas.drawArc(rectF, -90, ((float) mProgress / mTotalProgress) * 360, false, mPaint);
    }

    //创建圆环矩形
    private void drawProgressDefault(Canvas canvas) {
        RectF rectF = new RectF(strokeWidth, strokeWidth, getWidth() - strokeWidth, getHeight() - strokeWidth);
        canvas.drawArc(rectF, -90, ((float) mDefaultProgress / mTotalProgress) * 360, false, mPaint);

    }

    private void drawImage(Canvas canvas) {
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.FILL);
        ImageLeft = getWidth() / 2 - mBitmap.getWidth() / 2;
        // 画出原图像
        canvas.drawBitmap(mBitmap, ImageLeft, ImageTop, paint);
    }

    //绘制文字
    private void drawText(Canvas canvas) {

        int mProgressInt = (int) mProgress;
        int mProgressIntDefault = (int) mDefaultProgress;
        int mPaintTextCurrentProgressTextWidth;
        int mPaintTextAggregateSchedulingTextWidth = (int) mPaintTextCurrentProgressTextColor.measureText("/", 0, "/".length());

        int mTxtHeight = getTextHeight();
        int x = getWidth() / 2 - mPaintTextAggregateSchedulingTextWidth / 2;
        int y = getHeight() / 2 + mBitmap.getHeight() / 2 + mTxtHeight / 2;
        canvas.drawText("/", x, y, mPaintTextCurrentProgressTextColor);

        if (mProgressInt > mProgressIntDefault) {
            mPaintTextCurrentProgressTextWidth = (int) mPaintTextAggregateSchedulingTextColor.measureText(String.valueOf(mProgressInt), 0, String.valueOf(mProgressInt).length());

            canvas.drawText(mProgressInt + "", x - mPaintTextCurrentProgressTextWidth, y, mPaintTextAggregateSchedulingTextColor);

        } else {
            mPaintTextCurrentProgressTextWidth = (int) mPaintTextAggregateSchedulingTextColor.measureText(String.valueOf(mProgressIntDefault), 0, String.valueOf(mProgressIntDefault).length());

            canvas.drawText(mProgressIntDefault + "", x - mPaintTextCurrentProgressTextWidth, y, mPaintTextAggregateSchedulingTextColor);

        }
        canvas.drawText("100", x + mPaintTextAggregateSchedulingTextWidth, y, mPaintTextCurrentProgressTextColor);
    }


    private int getTextHeight() {
        Paint.FontMetrics fm = mPaintTextCurrentProgressTextColor.getFontMetrics();
        return (int) Math.ceil(fm.descent - fm.ascent);
    }


    private int sp2px(int sp) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp,
                getResources().getDisplayMetrics());
    }

    public void setProgress(int progress) {
        if (mValueAnimator != null) {
            mValueAnimator.cancel();
        }
        mValueAnimator = ValueAnimator.ofFloat(progress);
        mValueAnimator.setDuration(870);
        mValueAnimator.setInterpolator(new LinearInterpolator());
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mProgress = (float) animation.getAnimatedValue();
                Log.i("TAG", "onAnimationUpdate: " + mProgress);
                if (mListener != null) {
                    mListener.onProgressChanged(mProgress, mProgress * 100 / mTotalProgress);
                }
                invalidate();
            }
        });
        mValueAnimator.start();
    }


    public void setProgressNum(int progress) {
        mDefaultProgress = progress;
        mProgress = progress;
        invalidate();
    }

    /**
     * 设置进度监听
     */
    public void setOnProgressChangedListener(OnProgressChangedListener listener) {
        mListener = listener;
    }

    public interface OnProgressChangedListener {
        void onProgressChanged(float mProgress, float currentProgress);
    }
}

主要代码在这里

自定义属性

    <declare-styleable name="ProgressBarView">
        <attr name="textSize" format="dimension"></attr>
        <attr name="strokeWidth" format="dimension"></attr>
        <attr name="centreImage" format="reference"></attr>
        <attr name="drawBack" format="reference"></attr>
        <attr name="ProgressColor" format="reference"></attr>
        <attr name="currentProgressTextColor" format="reference"></attr>
        <attr name="aggregateSchedulingTextColor" format="reference"></attr>
        <attr name="ImageTop" format="dimension"></attr>
    </declare-styleable>

布局使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/execute"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/teal_700"
        android:gravity="center"
        android:text="开始" />


    <com.snd.progressdemo.ProgressBarView
        android:id="@+id/progress"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        app:ImageTop="45dp"
        app:ProgressColor="@color/color_d19ef4"
        app:aggregateSchedulingTextColor="@color/color_d19ef4"
        app:centreImage="@mipmap/progress_bar_view_image"
        app:currentProgressTextColor="@color/teal_200"
        app:drawBack="@color/color_f1f1f1"
        app:strokeWidth="8dp"
        app:textSize="5sp" />


</RelativeLayout>

基本使用

public class MainActivity extends AppCompatActivity {

    private static final String TAG = MainActivity.class.getName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ProgressBarView progress = findViewById(R.id.progress);
        TextView execute = findViewById(R.id.execute);
        progress.setProgressNum(40);
        progress.setOnProgressChangedListener(new ProgressBarView.OnProgressChangedListener() {
            @Override
            public void onProgressChanged(float mProgress, float currentProgress) {
                Log.i(TAG, "onProgressChanged: mProgress   " + mProgress + "   currentProgress：" + currentProgress);
            }
        });
        execute.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                progress.setProgress(80);
            }
        });
    }
}

散会

码农恩东
关注
android中Progress和SeekBar设置背景颜色和背景图片
09-28
android中设置水平进度条和seekbar的样式，自行写一个XML文件，
Android ProgressBar自定义图片进度，自定义渐变色进度条
weixin_34198762的博客
05-28 330
为什么80%的码农都做不了架构师？>>> ...
Android自己定义控件--圆形进度条（中间有图diao）
weixin_30955617的博客
08-13 133
智能家居越来越流行，在智能家居中我们常要表现一些数据的百分比 圆形度条中间加个图是一种很流行的自己定义View 1.第一步 你首先须要对类进行继承View public class CircleProgressImageView extends View 2.第二步 要实现三个构造方法 而且前面少參数的调用当前多參数的构造方法 public CircleProgress...
自定义ProgressBar（使用图片播放效果）
别了高山
11-04 1073
今天写到一个需要自定义  ProgressBar时在网上搜了一些样式，基本不是我想要的效果，找到一个我想要的效果的demo结果调试了半天都不出来效果，没办法放弃了，于是自己动手花了点时间写了一个。希望对大家有所帮助 1、首先一个layout布局      xmlns:android="http://schemas.android.com/apk/res/android"
Android的ProgressBar自定义样式放.9图片
sunbinkang的博客
10-09 2413
一、需求场景 今天看到UI设计有一个炫酷的进度条样式，那必须要做出来的效果，如下： 前面的这个LV6就别管了，这是我盖在上面的一个View。 二、需求实现 实现过程，首先我们使用ProgressBar，使用它的水平样式，并自定义progressDrawable（使用layout-list，progressbar有三层：@android:id/background、@android:id/secondaryProgress、@android:id/progress）第一层是进度条的底部背景（对..
Android实现自定义圆形进度条
09-02
通过以上步骤，你可以成功实现一个自定义的圆形进度条。这个例子展示了自定义视图的基本原理和流程，但实际应用中可能需要根据具体需求进行更复杂的定制，比如添加动画效果、支持横向或环形进度等。在Android开发中...
自定义圆形进度条
03-31
- 为了使组件更灵活，我们可以添加一些可配置的属性，如圆弧宽度、颜色、背景色、是否填充等。这些属性可以通过`attrs.xml`定义，然后在`init()`方法中解析并应用。 5. **测量与布局**： - 自定义组件需要重写`...
自定义圆形进度条中间加图
03-16
智能家居常见圆形进度条
漂亮的自定义圆形进度条.zip
最新发布
04-20
"漂亮的自定义圆形进度条.zip"这个资源包显然包含了关于如何在Android应用程序中创建一个自定义的、具有吸引力的圆形进度条的源码示例。下面将详细讲解这个知识点。 首先，自定义圆形进度条在Android中通常是通过...
Android进阶篇之RoundProgress（圆形进度条）使用两张图片叠加实现
01-28
Android进阶篇之RoundProgress（圆形进度条）使用两张图片叠加实现
Android之加载图片时自定义进度条
AndyLizh的专栏
06-03 6720
也许我们有这样一个需求，在请求网络图片时，如果在图片还未完全显示完全时，显示一个比较漂亮简洁的进度条，是不是会显得很人性化呢？比如像下图所示： 下面我们就来实现一下这样一个进度条：主要代码先贴上，LoadingCircleView [java] view plaincopy /**   * 圆形加载进度条   *
自定义 ProgressBar 进度条 自定义样式
frdde的专栏
11-06 1491
今天学习给ProgressBar换个样式，先看效果图： . n9 u9 |" a2 \/ i# Z 原理：在XML文件中分别定义进度条背景、第一进度颜色、第二进度颜色，然后在ProgressBar的android:progressDrawable属性应用即可。 先在drawable下建立progressbar_style.xml文件，内容如下： 8 n$ d"
android自定义进度条图片,Android零基础入门｜自定义酷炫进度条
weixin_39980711的博客
05-26 588
原标题：Android零基础入门｜自定义酷炫进度条Android系统默认的ProgressBar往往都不能满足实际开发需要，一般都会开发者自定义ProgressBar。在Android开发中，自定义ProgressBar一般有三种思路来完成。 一、在系统进度条基础上优化 首先来看一下style="@android:style/Widget.ProgressBar.Horizontal"的源码。鼠标...
Android 更改默认ProgressBar圆形控件的颜色
qq_58479738的博客
04-02 2411
在AndroiidManifest.xml中更改默认的colorAccent即可
WPF实现的圆形进度条
03-16
以上只是一个基础示例，实际的圆形进度条可能需要根据具体需求进行更多的定制，比如添加背景色、调整进度条颜色、支持自定义样式等。开发者还可以通过扩展此控件，增加更多高级特性，如支持指示方向（顺时针或逆时针...
自定义ProgressBar图片资源
06-24
自定义ProgressBar图片资源,最长见的“菊花”型加载进度条
android自定义progressbar 图片,自定义ProgressBar(自定义View和ClipDrawable)
weixin_29366307的博客
05-25 971
开发中经常需要自定义ProgressBar，这里用了自定义View和ClipDrawable实现简单的ProgressBar自定义View效果:public class CustomProgressBar extends View {private Paint mBgtPaint;//底部背景画笔private Paint mProgressPaint;//progress画笔private in...
Android ProgressBar 自定义圆形旋转图片
linvisf的博客
12-08 2285
目标：把ProgressBar默认的圆形图片更换成自己的图片并让其自动旋转 1、准备圆形图片 2、在drawable目录下新建一个动画文件 3、在布局文件中设置ProgressBar即可 4、最终效果
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值