AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Android 自定义View 之 圆环进度条

2023-12-29 125
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Android 自定义View 之 圆环进度条

前言


  很多时候我们会使用进度条，而Android默认的进度条是长条的，从左至右。而在日常开发中，有时候UI为了让页面更美观，就需要用到圆环进度条，那么本文就是通过自定义写一个圆环进度条，首先看一下效果图：

4eedbc2e11884d1fbb0d7f7811baad48.gif


正文


  关于自定义View的基础知识就不再做过多的讲解了，我们直接进入正题，这一次我们不需要再去创建项目了，就用我之前创建的EasyView。


一、XML样式


  根据上面的效果图，我们首先来确定XML中的属性样式，修改attrs.xml的代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--文字颜色-->
    <attr name="textColor" format="color|reference" />
    <!--文字大小-->
    <attr name="textSize" format="dimension" />
    <!--蓝牙地址输入控件-->
    <declare-styleable name="MacAddressEditText">
        <!-- 方框大小，宽高一致 -->
        <attr name="boxWidth" format="dimension" />
        <!-- 方框背景颜色 -->
        <attr name="boxBackgroundColor" format="color|reference" />
        <!-- 方框描边颜色 -->
        <attr name="boxStrokeColor" format="color|reference" />
        <!-- 方框描边宽度 -->
        <attr name="boxStrokeWidth" format="dimension" />
        <!--文字颜色-->
        <attr name="textColor" />
        <!--文字大小-->
        <attr name="textSize" />
        <!--分隔符，: 、- -->
        <attr name="separator" format="string|reference" />
    </declare-styleable>
    <!--圆形进度条控件-->
    <declare-styleable name="CircularProgressBar">
        <!--半径-->
        <attr name="radius" format="dimension" />
        <!--进度条宽度-->
        <attr name="strokeWidth" format="dimension" />
        <!--进度条背景颜色-->
        <attr name="progressbarBackgroundColor" format="color|reference" />
        <!--进度条进度颜色-->
        <attr name="progressbarColor" format="color|reference" />
        <!--最大进度-->
        <attr name="maxProgress" format="integer" />
        <!--当前进度-->
        <attr name="progress" format="integer" />
        <!--文字-->
        <attr name="text" format="string" />
        <!--文字颜色-->
        <attr name="textColor" />
        <!--文字大小-->
        <attr name="textSize" />
    </declare-styleable>
</resources>


  这里你会发现一个改变，那就是文字颜色和文字大小的属性从之前的declare-styleable中抽出来了，因为我们可能多个自定义控件会用到同样的属性，那么根据属性不可重名的原则，我们需要抽离出来，然后在declare-styleable引用。

395ab68904ae4177952cf24bc14ba0c8.png


二、构造方法


  现在属性样式已经有了，下一步就是写自定义View的构造方法了，在com.llw.easyview包下新建一个CircularProgressBar类，里面的代码如下所示：

public class CircularProgressBar extends View {
    /**
     * 半径
     */
    private int mRadius;
    /**
     * 进度条宽度
     */
    private int mStrokeWidth;
    /**
     * 进度条背景颜色
     */
    private int mProgressbarBgColor;
    /**
     * 进度条进度颜色
     */
    private int mProgressColor;
    /**
     * 开始角度
     */
    private int mStartAngle = 0;
    /**
     * 当前角度
     */
    private float mCurrentAngle = 0;
    /**
     * 结束角度
     */
    private int mEndAngle = 360;
    /**
     * 最大进度
     */
    private float mMaxProgress;
    /**
     * 当前进度
     */
    private float mCurrentProgress;
    /**
     * 文字
     */
    private String mText;
    /**
     * 文字颜色
     */
    private int mTextColor;
    /**
     * 文字大小
     */
    private float mTextSize;
    /**
     * 动画的执行时长
     */
    private long mDuration = 1000;
    /**
     * 是否执行动画
     */
    private boolean isAnimation = false;
    public CircularProgressBar(Context context) {
        this(context, null);
    }
    public CircularProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public CircularProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CircularProgressBar);
        mRadius = array.getDimensionPixelSize(R.styleable.CircularProgressBar_radius, 80);
        mStrokeWidth = array.getDimensionPixelSize(R.styleable.CircularProgressBar_strokeWidth, 8);
        mProgressbarBgColor = array.getColor(R.styleable.CircularProgressBar_progressbarBackgroundColor, ContextCompat.getColor(context, R.color.teal_700));
        mProgressColor = array.getColor(R.styleable.CircularProgressBar_progressbarColor, ContextCompat.getColor(context, R.color.teal_200));
        mMaxProgress = array.getInt(R.styleable.CircularProgressBar_maxProgress, 100);
        mCurrentProgress = array.getInt(R.styleable.CircularProgressBar_progress, 0);
        String text = array.getString(R.styleable.CircularProgressBar_text);
        mText = text == null ? "" : text;
        mTextColor = array.getColor(R.styleable.CircularProgressBar_textColor, ContextCompat.getColor(context, R.color.black));
        mTextSize = array.getDimensionPixelSize(R.styleable.CircularProgressBar_textSize, (int) TypedValue
                .applyDimension(TypedValue.COMPLEX_UNIT_SP, 14, getResources().getDisplayMetrics()));
        array.recycle();
    }
}


  这里声明了一些变量，然后写了3个构造方法，在第三个构造方法中进行属性的赋值。


三、测量


  这里测量就比较简单了，当然这是相对于之前的那个Mac地址输入框来说的，代码如下所示：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = 0;
        switch (MeasureSpec.getMode(widthMeasureSpec)) {
            case MeasureSpec.UNSPECIFIED:
            case MeasureSpec.AT_MOST:   //wrap_content
                width = mRadius * 2;
                break;
            case MeasureSpec.EXACTLY:   //match_parent
                width = MeasureSpec.getSize(widthMeasureSpec);
                break;
        }
        //Set the measured width and height
        setMeasuredDimension(width, width);
    }


  因为不需要进行子控件处理，所以我们只要一个圆环就可以了，文字在圆环中间绘制，下面再看绘制的方法。


四、绘制


  绘制这里稍微代码量多一些，因为需要绘制的内容有进度条背景、进度条、中间文字三个，绘制的代码如下所示：

    @Override
    protected void onDraw(Canvas canvas) {
        int centerX = getWidth() / 2;
        RectF rectF = new RectF();
        rectF.left = mStrokeWidth;
        rectF.top = mStrokeWidth;
        rectF.right = centerX * 2 - mStrokeWidth;
        rectF.bottom = centerX * 2 - mStrokeWidth;
        //绘制进度条背景
        drawProgressbarBg(canvas, rectF);
        //绘制进度
        drawProgress(canvas, rectF);
        //绘制中心文本
        drawCenterText(canvas, centerX);
    }


  在绘制之前首先要确定中心点，因为我们是一个圆环，实际上也是一个圆，圆的宽高一样，所以中心点的x、y轴的位置就是一样的，然后是确定一个矩形的左上和右下两个位置的坐标点，通过这两个点就能绘制一个矩形，接下来就是绘制进度条背景。


① 绘制进度条背景

    /**
     * 绘制进度条背景
     */
    private void drawProgressbarBg(Canvas canvas, RectF rectF) {
        Paint mPaint = new Paint();
        //画笔的填充样式，Paint.Style.STROKE 描边
        mPaint.setStyle(Paint.Style.STROKE);
        //圆弧的宽度
        mPaint.setStrokeWidth(mStrokeWidth);
        //抗锯齿
        mPaint.setAntiAlias(true);
        //画笔的颜色
        mPaint.setColor(mProgressbarBgColor);
        //画笔的样式 Paint.Cap.Round 圆形
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        //开始画圆弧
        canvas.drawArc(rectF, mStartAngle, mEndAngle, false, mPaint);
    }


  因为背景是一个圆环，所以这里的画笔设置就比较注意一些，看一下就会了，这里最重要的是drawArc，用于绘制圆弧，像下图这样，画了4/1的背景。

07e6f70f72d2415aace43c9586fe7bb5.png

下面绘制进度

② 绘制进度

    /**
     * 绘制进度
     */
    private void drawProgress(Canvas canvas, RectF rectF) {
        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(mStrokeWidth);
        paint.setColor(mProgressColor);
        paint.setAntiAlias(true);
        paint.setStrokeCap(Paint.Cap.ROUND);
        if (!isAnimation) {
            mCurrentAngle = 360 * (mCurrentProgress / mMaxProgress);
        }
        canvas.drawArc(rectF, mStartAngle, mCurrentAngle, false, paint);
    }


  这里的进度值就要根据当前的参数进行处理了，这里有一个变量进行判断处理，主要作用就是是否进行动画绘制。


③ 绘制文字

    /**
     * 绘制中心文字
     */
    private void drawCenterText(Canvas canvas, int centerX) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setColor(mTextColor);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setTextSize(mTextSize);
        Rect textBounds = new Rect();
        paint.getTextBounds(mText, 0, mText.length(), textBounds);
        canvas.drawText(mText, centerX, textBounds.height() / 2 + getHeight() / 2, paint);
    }


绘制文字的规则还是和之前一样。


五、API方法

  还需要提供一些方法在代码中调用，下面是这些方法的代码：

    /**
     * 设置当前进度
     */
    public void setProgress(float progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("Progress value can not be less than 0");
        }
        if (progress > mMaxProgress) {
            progress = mMaxProgress;
        }
        mCurrentProgress = progress;
        mCurrentAngle = 360 * (mCurrentProgress / mMaxProgress);
        setAnimator(0, mCurrentAngle);
    }
    /**
     * 设置文本
     */
    public void setText(String text) {
        mText = text;
    }
    /**
     * 设置文本的颜色
     */
    public void setTextColor(int color) {
        if (color <= 0) {
            throw new IllegalArgumentException("Color value can not be less than 0");
        }
        mTextColor = color;
    }
    /**
     * 设置文本的大小
     */
    public void setTextSize(float textSize) {
        if (textSize <= 0) {
            throw new IllegalArgumentException("textSize can not be less than 0");
        }
        mTextSize = textSize;
    }
    /**
     * 设置动画
     *
     * @param start  开始位置
     * @param target 结束位置
     */
    private void setAnimator(float start, float target) {
        isAnimation = true;
        ValueAnimator animator = ValueAnimator.ofFloat(start, target);
        animator.setDuration(mDuration);
        animator.setTarget(mCurrentAngle);
        //动画更新监听
        animator.addUpdateListener(valueAnimator -> {
            mCurrentAngle = (float) valueAnimator.getAnimatedValue();
            invalidate();
        });
        animator.start();
    }


  那么到此为止这个自定义View就完成了，下面我们可以在MainActivity中使用了。


六、使用


  先修改activity_main.xml的代码，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">
    <com.easy.view.MacAddressEditText
        android:id="@+id/mac_et"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:boxBackgroundColor="@color/white"
        app:boxStrokeColor="@color/black"
        app:boxStrokeWidth="2dp"
        app:boxWidth="48dp"
        app:separator=":"
        app:textColor="@color/black"
        app:textSize="16sp" />
    <Button
        android:id="@+id/btn_mac"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="获取地址" />
    <com.easy.view.CircularProgressBar
        android:id="@+id/cpb_test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        app:maxProgress="100"
        app:progress="10"
        app:progressbarBackgroundColor="@color/purple_500"
        app:progressbarColor="@color/purple_200"
        app:radius="80dp"
        app:strokeWidth="16dp"
        app:text="10%"
        app:textColor="@color/teal_200"
        app:textSize="28sp" />
    <Button
        android:id="@+id/btn_set_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="随机设置进度" />
</LinearLayout>


首先要注意看是否能够预览，我这里是可以预览的，如下图所示：

b5e6e36e990547fc95adbf1983819464.png

在MainActivity中使用，修改onCreate()方法中的代码，如下所示：

        //圆形进度条操作
        CircularProgressBar cpbTest = findViewById(R.id.cpb_test);
        Button btnSetProgress = findViewById(R.id.btn_set_progress);
        btnSetProgress.setOnClickListener(v -> {
            int progress = Math.abs(new Random().nextInt() % 100);
            Toast.makeText(this, "" + progress, Toast.LENGTH_SHORT).show();
            cpbTest.setText(progress + "%");
            cpbTest.setProgress(progress);
        });


运行效果如下图所示：

4eedbc2e11884d1fbb0d7f7811baad48.gif


七、源码


  顺便说一下，我打算把这个项目做成一个开源仓库，提交到mavenCentral()中，后面使用的话就可以通过这个引入依赖的方式进行调用，会很方便，后面会单独出一篇文章讲述这个仓库。

如果对你有所帮助的话，不妨 Star 或 Fork，山高水长，后会有期~

源码地址：EasyView

文章标签：
Android开发
数据格式
XML
API
关键词：
Android自定义
Android View
Android自定义View
Android进度条
Android自定义进度条
初学者-Study
目录
相关文章
shuj
|
29天前
|
缓存 前端开发 Android开发
安卓开发中的自定义视图：从零到英雄
【10月更文挑战第42天】 在安卓的世界里，自定义视图是一块画布，让开发者能够绘制出独一无二的界面体验。本文将带你走进自定义视图的大门，通过深入浅出的方式，让你从零基础到能够独立设计并实现复杂的自定义组件。我们将探索自定义视图的核心概念、实现步骤，以及如何优化你的视图以提高性能和兼容性。准备好了吗？让我们开始这段创造性的旅程吧！
shuj
26 1
蓝易云
|
29天前
|
XML 前端开发 Android开发
Android：UI：Drawable：View/ImageView与Drawable
通过本文的介绍，我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示，提供了丰富的子类和自定义能力，使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
蓝易云
40 2
天下无贼001
|
1月前
|
搜索推荐 前端开发 Android开发
安卓应用开发中的自定义视图实现
【10月更文挑战第30天】在安卓开发的海洋中，自定义视图是那抹不可或缺的亮色，它为应用界面的个性化和交互体验的提升提供了无限可能。本文将深入探讨如何在安卓平台创建自定义视图，并展示如何通过代码实现这一过程。我们将从基础出发，逐步引导你理解自定义视图的核心概念，然后通过一个实际的代码示例，详细讲解如何将理论应用于实践，最终实现一个美观且具有良好用户体验的自定义控件。无论你是想提高自己的开发技能，还是仅仅出于对安卓开发的兴趣，这篇文章都将为你提供价值。
天下无贼001
41 4
shuj
|
1月前
|
Android开发 开发者 UED
安卓开发中自定义View的实现与性能优化
【10月更文挑战第28天】在安卓开发领域，自定义View是提升应用界面独特性和用户体验的重要手段。本文将深入探讨如何高效地创建和管理自定义View，以及如何通过代码和性能调优来确保流畅的交互体验。我们将一起学习自定义View的生命周期、绘图基础和事件处理，进而探索内存和布局优化技巧，最终实现既美观又高效的安卓界面。
shuj
37 5
大树营养快线
|
2月前
|
缓存 数据处理 Android开发
在 Android 中使用 RxJava 更新 View
【10月更文挑战第20天】使用 RxJava 来更新 View 可以提供更优雅、更高效的解决方案。通过合理地运用操作符和订阅机制，我们能够轻松地处理异步数据并在主线程中进行 View 的更新。在实际应用中，需要根据具体情况进行灵活运用，并注意相关的注意事项和性能优化，以确保应用的稳定性和流畅性。可以通过不断的实践和探索，进一步掌握在 Android 中使用 RxJava 更新 View 的技巧和方法，为开发高质量的 Android 应用提供有力支持。
大树营养快线
18 2
mao29955
|
2月前
|
缓存 调度 Android开发
Android 在子线程更新 View
【10月更文挑战第21天】在 Android 开发中，虽然不能直接在子线程更新 View，但通过使用 Handler、AsyncTask 或 RxJava 等方法，可以实现子线程操作并在主线程更新 View 的目的。在实际应用中，需要根据具体情况选择合适的方法，并注意相关的注意事项和性能优化，以确保应用的稳定性和流畅性。可以通过不断的实践和探索，进一步掌握在子线程更新 View 的技巧和方法，为开发高质量的 Android 应用提供支持。
mao29955
38 2
浩码农
|
Android开发
自定义android 4.0以上的对话框风格
做个笔记，这里是Dialog的风格，如果是用AlertDialog创建的，不能直接用。在styles.xml的写法： 22sp @color/font_green 1 true @st...
浩码农
709 0
请看我回答~
|
27天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上，安卓和iOS两大阵营各据一方。随着技术的演进，跨平台开发框架成为开发者的新宠，旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战，并分享实用的开发技巧，帮助开发者在安卓和iOS的世界中游刃有余。
请看我回答~
41 1
mrq4nk6ni2neg
|
14天前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图：打造个性化用户界面
在安卓应用开发的广阔天地中，自定义视图是一块神奇的画布，让开发者能够突破标准控件的限制，绘制出独一无二的用户界面。本文将带你走进自定义视图的世界，从基础概念到实战技巧，逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者，这篇文章都将为你打开新的视野，让你的应用在众多同质化产品中脱颖而出。
mrq4nk6ni2neg
40 19
请看我回答~
|
14天前
|
JSON Java API
探索安卓开发：打造你的首个天气应用
在这篇技术指南中，我们将一起潜入安卓开发的海洋，学习如何从零开始构建一个简单的天气应用。通过这个实践项目，你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者，这篇文章都将为你提供一个清晰的路线图和实用的代码示例，帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程，打造属于你自己的第一个安卓应用吧！
请看我回答~
41 14