android实现圆形进度条

在这里插入图片描述

/**
 * date:2021/1/4 0004
 * author:wsm (Administrator)
 * 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();
    }
}

res/vasues/attrs.xml

<?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>
 <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>
  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: Android Studio中可以使用ProgressBar控件来实现圆形进度条。具体实现方法如下: 1. 在布局文件中添加ProgressBar控件: ``` <ProgressBar android:id="@+id/progressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" style="@style/Widget.AppCompat.ProgressBar" android:indeterminate="true" android:indeterminateTint="@color/colorPrimary" android:indeterminateTintMode="src_in" /> ``` 2. 在代码中获取ProgressBar控件并设置样式: ``` ProgressBar progressBar = findViewById(R.id.progressBar); progressBar.setIndeterminate(true); progressBar.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.colorPrimary), PorterDuff.Mode.SRC_IN); ``` 其中,setIndeterminate(true)表示进度条为不确定模式,getIndeterminateDrawable()获取进度条的Drawable对象,setColorFilter()设置进度条颜色。 以上就是在Android Studio中实现圆形进度条的方法。 ### 回答2: Android Studio是一个非常流行的开发工具,它提供了很多组件和控件,可以帮助开发人员创建出美观、实用的 Android 应用。其中一个非常常见的组件就是圆形进度条圆形进度条可以向用户传达某个任务正在进行中,同时也可以让用户感受到一定的乐趣和兴趣。 在 Android Studio 中,要实现圆形进度条,首先需要在布局文件中添加一个 ProgressBar 组件,并将 style 属性设置为@style/Widget.AppCompat.ProgressBar.Horizontal。 然后,为了将进度条变成圆形,需要将 ProgressBar 组件的 style 属性修改为@style/Widget.AppCompat.ProgressBar.Large,并将该属性的另一个属性android:indeterminateDrawable设置为@drawable/progress_indeterminate_circle,以显示圆形进度条。 要设置进度条的颜色,可以在 styles.xml 文件中设置 theme 的 colorAccent 属性。这可以通过为主题设置自定义颜色,从而影响所有进度条的颜色。 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> 除了以上基础设置,还可以对圆形进度条进行进一步的自定义。例如,可以设置进度条的宽度、指定进度条显示的进度百分比等等。在代码中,设置 progressBar 的属性都可以实现这些效果。 综上所述,圆形进度条是一种非常常见、实用的组件,它可以用于多种任务中,比如显示文件上传的进度、显示软件下载的进度等等。同时,通过自定义属性,我们还可以创造出独具特色的圆形进度条,为用户带来更好的使用体验。 ### 回答3: Android Studio是目前最常用的Android应用开发工具,开发者可以通过Android Studio实现各种功能和效果的界面设计,包括圆形进度条圆形进度条是一种可以展示进度的控件,它可以让用户清晰地了解当前的任务进展情况。下面是关于如何在Android Studio中实现圆形进度条的详细介绍。 首先,在Android Studio中创建一个新的项目。然后,在布局文件中添加一个ProgressBar控件,并设置其样式为“?android:attr/progressBarStyleHorizontal”。 接下来,用以下代码获取ProgressBar控件: ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar); 接着,在代码中设置控件的最大值和当前进度值: progressBar.setMax(100); progressBar.setProgress(50); 以上代码将ProgressBar控件的最大值设置为100,当前进度值设置为50。 接着,在values文件夹下创建一个名为“progress_bar.xml”的文件。在这个文件中,设置ProgressBar控件的样式为“@style/CustomProgress”: <?xml version="1.0" encoding="utf-8"?> <resources> <style name="CustomProgress" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/progress_bar_drawable</item> <item name="android:minHeight">20dp</item> <item name="android:maxHeight">20dp</item> </style> </resources> 在上面代码中,indeterminateOnly属性设置为false,表示ProgressBar控件是一个有确定进度的控件。progressDrawable属性值设置为一个名为“progress_bar_drawable”的可绘制资源文件,这个文件将显示ProgressBar控件的进度条。通过设置minHeight和maxHeight属性,可以设置ProgressBar控件的最小高度和最大高度。 最后,在drawable文件夹下创建一个名为“progress_bar_drawable.xml”的文件。在这个文件中,使用以下代码绘制ProgressBar控件的进度条: <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="270" android:toDegrees="270"> <shape android:innerRadiusRatio="2.3" android:shape="ring" android:thickness="4dp" android:useLevel="true"> <gradient android:startColor="#B2FF59" android:centerColor="#FFFF00" android:endColor="#FF5252" android:centerY="0.5" android:type="sweep" android:useLevel="true" /> </shape> </rotate> 在上述代码中,使用了rotate标签旋转进度条,fromDegrees属性和toDegrees属性控制旋转的起点和终点,这里都设置为270度,表示从竖直上方开始旋转。shape标签设置进度条的形状为圆形。innerRadiusRatio属性设置内部圆的半径比例。thickness属性设置进度条的宽度。useLevel属性进行数值级别的限制,以保持与父控件相同的宽度和高度。gradient标签设置进度条的渐变颜色。startColor属性设置进度条的开始颜色,centerColor属性设置进度条的中间颜色,endColor属性设置进度条的结束颜色。centerY属性设置渐变的中心位置。type属性设置渐变类型为“sweep”,这是一种沿圆周的渐变颜色类型。 通过以上步骤,就可以在Android Studio中实现一个漂亮的圆形进度条了!
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值