Android开发怎么自定义绘制如下图中这种进度条？急需！在线等！

Posted 2023-05-16

绿色的进度是有动画的，大神们应该一看就很清晰了，各位大神帮帮忙，我在线等，先谢谢了！

参考技术A 一）变换前背景

先来看看progressbar的属性：
1. <ProgressBar
2. android:id="@+id/progressBar"
3. style="?android:attr/progressBarStyleHorizontal"
4. android:layout_width="match_parent"
5. android:layout_height="wrap_content"
6. android:layout_margin="5dip"
7. android:layout_toRightOf="@+id/progressBarV"
8. android:indeterminate="false"
9. android:padding="2dip"
10. android:progress="50" />
根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml
1. <style name="Widget.ProgressBar.Horizontal">
2. <item name="android:indeterminateOnly">false</item>
3. <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
4. <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
5. <item name="android:minHeight">20dip</item>
6. <item name="android:maxHeight">20dip</item>
7. </style>
看到
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角了：
1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
2.
3. <item android:id="@android:id/background">
4. <shape>
5. <corners android:radius="5dip" />
6. <gradient
7. android:startColor="#ff9d9e9d"
8. android:centerColor="#ff5a5d5a"
9. android:centerY="0.75"
10. android:endColor="#ff747674"
11. android:angle="270"
12. />
13. </shape>
14. </item>
15.
16. <item android:id="@android:id/secondaryProgress">
17. <clip>
18. <shape>
19. <corners android:radius="5dip" />
20. <gradient
21. android:startColor="#80ffd300"
22. android:centerColor="#80ffb600"
23. android:centerY="0.75"
24. android:endColor="#a0ffcb00"
25. android:angle="270"
26. />
27. </shape>
28. </clip>
29. </item>
30.
31. <item android:id="@android:id/progress">
32. <clip>
33. <shape>
34. <corners android:radius="5dip" />
35. <gradient
36. android:startColor="#ffffd300"
37. android:centerColor="#ffffb600"
38. android:centerY="0.75"
39. android:endColor="#ffffcb00"
40. android:angle="270"
41. />
42. </shape>
43. </clip>
44. </item>
45.
46. </layer-list>
看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有
把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等
那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：
1. <?xml version="1.0" encoding="utf-8"?>
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3.
4. <item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
5.
6. </layer-list>
在android:drawable中指定你处理好的图片
然后回到布局中
1. <ProgressBar
2. android:id="@+id/progressBar1"
3. android:layout_width="match_parent"
4. android:layout_height="wrap_content"
5. android:layout_below="@+id/progressBar"
6. android:layout_margin="5dip"
7. android:layout_toRightOf="@+id/progressBarV"
8. android:background="@drawable/progress_bg"
9. android:indeterminate="false"
10. android:indeterminateOnly="false"
11. android:maxHeight="20dip"
12. android:minHeight="20dip"
13. android:padding="2dip"
14. android:progress="50"
15. android:progressDrawable="@drawable/progress_horizontal1" />
android:background="@drawable/progress_bg"指定背景
android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1

要是还不行

你来我们群里说吧

这里是开发者互相学习交流的 有大神

让他们给你解释你的疑问 号 码look at my n a m e.....追问

这个我知道，也不过只能改变ProgressBar的样式而已，上面的是有圆圈和水平进度组合的进度条呢，其实这个问题我已经处理我好了，用了一个比较笨的方法，那就是进度条还是长方形的，然后画一个.9的图片盖在上面，图片中圆形的直径就是底下长方形进度条的高度，这样也能达到这种效果

追答

这里解释太麻烦...

你来

我们群里说吧

开发者互相学习交流的

有大神 让他们给你解释你的问题 号 码 look at my n a m e

本回答被提问者和网友采纳 参考技术B 你想问的是什么问题呢？怎么做还是？追问

你不看题目的吗？

追答

怎么自定义，是想问思路还是问代码，我是这个意思。
这个没有看到过现成的代码。但是大致思路都是差不多的，这种自定义进度条的设计思路都比较相似。
这种肯定是需要你自己画出来的。可能你觉得我是废话，但是关键这个由你自己的需求在里面，如何定义它的进度，定义相关的方法，最好是安全的也就是上锁的，否则容易出错。另外，对于1,2,3的达到需要进行额外的控制，简单地说就是你鲜花出来，然后根据状态postInvalidate这个view控件，就可以大致达到这个效果。

Android自定义控件篇 圆形进度条

一、效果图

二、代码逻辑

/**
 * funcation:圆形进度条控件
 */

public class CircleProgressView extends View 

    private Paint mBackPaint, mProgPaint;   // 绘制画笔
    private RectF mRectF;       // 绘制区域
    private int[] mColorArray;  // 圆环渐变色
    private int mProgress;      // 圆环进度(0-100)

    public CircleProgressView(Context context) 
        this(context, null);
    

    public CircleProgressView(Context context, @Nullable AttributeSet attrs) 
        this(context, attrs, 0);
    

    public CircleProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) 
        super(context, attrs, defStyleAttr);
        @SuppressLint("Recycle")
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircularProgressView);

        // 初始化背景圆环画笔
        mBackPaint = new Paint();
        mBackPaint.setStyle(Paint.Style.STROKE);    // 只描边，不填充
        mBackPaint.setStrokeCap(Paint.Cap.ROUND);   // 设置圆角
        mBackPaint.setAntiAlias(true);              // 设置抗锯齿
        mBackPaint.setDither(true);                 // 设置抖动
        mBackPaint.setStrokeWidth(typedArray.getDimension(R.styleable.CircularProgressView_backWidth, 5));
        mBackPaint.setColor(typedArray.getColor(R.styleable.CircularProgressView_backColor, Color.LTGRAY));

        // 初始化进度圆环画笔
        mProgPaint = new Paint();
        mProgPaint.setStyle(Paint.Style.STROKE);    // 只描边，不填充
        mProgPaint.setStrokeCap(Paint.Cap.ROUND);   // 设置圆角
        mProgPaint.setAntiAlias(true);              // 设置抗锯齿
        mProgPaint.setDither(true);                 // 设置抖动
        mProgPaint.setStrokeWidth(typedArray.getDimension(R.styleable.CircularProgressView_progWidth, 10));
        mProgPaint.setColor(typedArray.getColor(R.styleable.CircularProgressView_progColor, Color.BLUE));

        // 初始化进度圆环渐变色
        int startColor = typedArray.getColor(R.styleable.CircularProgressView_progStartColor, -1);
        int firstColor = typedArray.getColor(R.styleable.CircularProgressView_progFirstColor, -1);
        if (startColor != -1 && firstColor != -1) mColorArray = new int[]startColor, firstColor;
        else mColorArray = null;

        // 初始化进度
        mProgress = typedArray.getInteger(R.styleable.CircularProgressView_progress, 0);
        typedArray.recycle();
    

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int viewWide = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
        int viewHigh = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();
        int mRectLength = (int) ((viewWide > viewHigh ? viewHigh : viewWide) - (mBackPaint.getStrokeWidth() > mProgPaint.getStrokeWidth() ? mBackPaint.getStrokeWidth() : mProgPaint.getStrokeWidth()));
        int mRectL = getPaddingLeft() + (viewWide - mRectLength) / 2;
        int mRectT = getPaddingTop() + (viewHigh - mRectLength) / 2;
        mRectF = new RectF(mRectL, mRectT, mRectL + mRectLength, mRectT + mRectLength);

        // 设置进度圆环渐变色
        if (mColorArray != null && mColorArray.length > 1)
            mProgPaint.setShader(new LinearGradient(0, 0, 0, getMeasuredWidth(), mColorArray, null, Shader.TileMode.MIRROR));
    

    @Override
    protected void onDraw(Canvas canvas) 
        super.onDraw(canvas);
        canvas.drawArc(mRectF, 0, 360, false, mBackPaint);
        canvas.drawArc(mRectF, 275, 360 * mProgress / 100, false, mProgPaint);
    

    // ---------------------------------------------------------------------------------------------

    /**
     * 获取当前进度
     *
     * @return 当前进度（0-100）
     */
    public int getProgress() 
        return mProgress;
    

    /**
     * 设置当前进度
     *
     * @param progress 当前进度（0-100）
     */
    public void setProgress(int progress) 
        this.mProgress = progress;
        invalidate();
    

    /**
     * 设置当前进度，并展示进度动画。如果动画时间小于等于0，则不展示动画
     *
     * @param progress 当前进度（0-100）
     * @param animTime 动画时间（毫秒）
     */
    public void setProgress(int progress, long animTime) 
        if (animTime <= 0) setProgress(progress);
        else 
            ValueAnimator animator = ValueAnimator.ofInt(mProgress, progress);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
                @Override
                public void onAnimationUpdate(ValueAnimator animation) 
                    mProgress = (int) animation.getAnimatedValue();
                    invalidate();
                
            );
            animator.setInterpolator(new OvershootInterpolator());
            animator.setDuration(animTime);
            animator.start();
        
    

    /**
     * 设置背景圆环宽度
     *
     * @param width 背景圆环宽度
     */
    public void setBackWidth(int width) 
        mBackPaint.setStrokeWidth(width);
        invalidate();
    

    /**
     * 设置背景圆环颜色
     *
     * @param color 背景圆环颜色
     */
    public void setBackColor(@ColorRes int color) 
        mBackPaint.setColor(ContextCompat.getColor(getContext(), color));
        invalidate();
    

    /**
     * 设置进度圆环宽度
     *
     * @param width 进度圆环宽度
     */
    public void setProgWidth(int width) 
        mProgPaint.setStrokeWidth(width);
        invalidate();
    

    /**
     * 设置进度圆环颜色
     *
     * @param color 景圆环颜色
     */
    public void setProgColor(@ColorRes int color) 
        mProgPaint.setColor(ContextCompat.getColor(getContext(), color));
        mProgPaint.setShader(null);
        invalidate();
    

    /**
     * 设置进度圆环颜色(支持渐变色)
     *
     * @param startColor 进度圆环开始颜色
     * @param firstColor 进度圆环结束颜色
     */
    public void setProgColor(@ColorRes int startColor, @ColorRes int firstColor) 
        mColorArray = new int[]ContextCompat.getColor(getContext(), startColor), ContextCompat.getColor(getContext(), firstColor);
        mProgPaint.setShader(new LinearGradient(0, 0, 0, getMeasuredWidth(), mColorArray, null, Shader.TileMode.MIRROR));
        invalidate();
    

    /**
     * 设置进度圆环颜色(支持渐变色)
     *
     * @param colorArray 渐变色集合
     */
    public void setProgColor(@ColorRes int[] colorArray) 
        if (colorArray == null || colorArray.length < 2) return;
        mColorArray = new int[colorArray.length];
        for (int index = 0; index < colorArray.length; index++)
            mColorArray[index] = ContextCompat.getColor(getContext(), colorArray[index]);
        mProgPaint.setShader(new LinearGradient(0, 0, 0, getMeasuredWidth(), mColorArray, null, Shader.TileMode.MIRROR));
        invalidate();
    

三、attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--    圆形进度条-->
    <declare-styleable name="CircularProgressView">
        <attr name="backWidth" format="dimension" />    <!--背景圆环宽度-->
        <attr name="progWidth" format="dimension" />    <!--进度圆环宽度-->
        <attr name="backColor" format="color" />        <!--背景圆环颜色-->
        <attr name="progColor" format="color" />        <!--进度圆环颜色-->
        <attr name="progStartColor" format="color" />   <!--进度圆环开始颜色-->
        <attr name="progFirstColor" format="color" />   <!--进度圆环结束颜色-->
        <attr name="progress" format="integer" />       <!--圆环进度-->
    </declare-styleable>
</resources>

四、xml

 <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <com.example.demo.view.CircleProgressView
                android:layout_width="85dp"
                android:layout_height="85dp"
                app:backWidth="20dp"内边框宽度
                app:progColor="#20AEFF"进度条颜色
                app:backColor="#E6DBDBDB"默认颜色
                app:progWidth="20dp"进度宽度
                app:progress="85" />进度值

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:text="85%"
                android:textColor="#ff4d4d4d"
                android:textSize="13sp" />
        </RelativeLayout>

参考：https://blog.csdn.net/weixin_43117800/article/details/112189384