首页 > 其他分享 >Android 自定义View 之 饼状进度条

Android 自定义View 之 饼状进度条

时间:2023-06-03 12:07:52浏览次数:51  
标签:饼状 PieProgressBar angle 自定义 int private progress Android 绘制



饼状进度条

  • 前言
  • 正文
  • 一、XML样式
  • 二、构造方法
  • 三、测量
  • 四、绘制
  • ① 绘制描边
  • ① 绘制进度
  • 五、API方法
  • 六、使用
  • 七、源码


前言

  前面写了圆环进度条,这次我们来写一个饼状进度条,首先看一下效果图:

Android 自定义View 之 饼状进度条_Android进度条

正文

  效果图感觉怎么样呢?下面我们来实现这个自定义View,依然是写在EasyView这个项目中,这是一个自定义View库,我会把自己写的自定义View都放在里面,文中如果代码不是很全的话,你可以找到文章最后的源码去查看,话不多说,我们开始吧。

一、XML样式

  根据上面的效果图,我们首先来确定XML中的属性样式,在attrs.xml中添加如下代码:

<!--饼状进度条-->
    <declare-styleable name="PieProgressBar">
        <!--半径-->
        <attr name="radius" />
        <!--最大进度-->
        <attr name="maxProgress" />
        <!--当前进度-->
        <attr name="progress" />
        <!--进度条进度颜色-->
        <attr name="progressbarColor" />
        <!--进度条描边宽度-->
        <attr name="strokeWidth"/>
        <!--进度是否渐变-->
        <attr name="gradient" />
        <!--渐变颜色数组-->
        <attr name="gradientColorArray" />
        <!--自定义开始角度 0 ,90,180,270-->
        <attr name="customAngle">
            <enum name="right" value="0" />
            <enum name="bottom" value="90" />
            <enum name="left" value="180" />
            <enum name="top" value="270" />
        </attr>
    </declare-styleable>

  这里的公共属性我就抽离了出来,因为之前写过圆环进度条,有一些属性是可以通用的,并且我在饼状进度条中增加了开始的角度,之前是默认是从0°开始,现在可以根据属性设置开始的角度,并且我增加了渐变颜色。

二、构造方法

  现在属性样式已经有了,下一步就是写自定义View的构造方法了,在com.easy.view包下新建一个PieProgressBar 类,里面的代码如下所示:

public class PieProgressBar extends View {

    /**
     * 半径
     */
    private int mRadius;
    /**
     * 进度条宽度
     */
    private int mStrokeWidth;
    /**
     * 进度条进度颜色
     */
    private int mProgressColor;
    /**
     * 开始角度
     */
    private int mStartAngle = 0;

    /**
     * 当前角度
     */
    private float mCurrentAngle = 0;
    /**
     * 结束角度
     */
    private int mEndAngle = 360;
    /**
     * 最大进度
     */
    private float mMaxProgress;
    /**
     * 当前进度
     */
    private float mCurrentProgress;
    /**
     * 是否渐变
     */
    private boolean isGradient;
    /**
     * 渐变颜色数组
     */
    private int[] colorArray;
    /**
     * 动画的执行时长
     */
    private long mDuration = 1000;
    /**
     * 是否执行动画
     */
    private boolean isAnimation = false;

    public PieProgressBar(Context context) {
        this(context, null);
    }

    public PieProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PieProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.PieProgressBar);
        mRadius = array.getDimensionPixelSize(R.styleable.PieProgressBar_radius, 80);
        mStrokeWidth = array.getDimensionPixelSize(R.styleable.PieProgressBar_strokeWidth, 8);
        mProgressColor = array.getColor(R.styleable.PieProgressBar_progressbarColor, ContextCompat.getColor(context, R.color.tx_default_color));
        mMaxProgress = array.getInt(R.styleable.PieProgressBar_maxProgress, 100);
        mCurrentProgress = array.getInt(R.styleable.PieProgressBar_progress, 0);
        //是否渐变
        isGradient = array.getBoolean(R.styleable.PieProgressBar_gradient, false);
        //渐变颜色数组
        CharSequence[] textArray = array.getTextArray(R.styleable.PieProgressBar_gradientColorArray);
        if (textArray != null) {
            colorArray = new int[textArray.length];
            for (int i = 0; i < textArray.length; i++) {
                colorArray[i] = Color.parseColor((String) textArray[i]);
            }
        }
        mStartAngle = array.getInt(R.styleable.PieProgressBar_customAngle, 0);
        array.recycle();
    }
}

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

三、测量

  这里测量就比较简单了,和之前的圆环进度条差不多,代码如下所示:

@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;
        @SuppressLint("DrawAllocation")
        RectF rectF = new RectF(0,0,centerX * 2,centerX * 2);
        //绘制描边
        drawStroke(canvas, centerX);
        //绘制进度
        drawProgress(canvas, rectF);
    }

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

① 绘制描边

/**
     * 绘制描边
     *
     * @param canvas 画布
     * @param centerX 中心点
     */
    private void drawStroke(Canvas canvas, int centerX) {
        Paint paint = new Paint();
        paint.setColor(mProgressColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(mStrokeWidth);
        paint.setAntiAlias(true);
        canvas.drawCircle(centerX, centerX, mRadius - (mStrokeWidth / 2), paint);
    }

这里的要点就是我们需要设置画笔的类型为描边,然后设置描边宽度,这样我们就可以画一个空心圆,就成了描边,然后我们绘制进度。

① 绘制进度

/**
     * 绘制进度条背景
     */
    private void drawProgress(Canvas canvas, RectF rectF) {
        Paint paint = new Paint();
        //画笔的填充样式,Paint.Style.STROKE 描边
        paint.setStyle(Paint.Style.FILL);
        //抗锯齿
        paint.setAntiAlias(true);
        //画笔的颜色
        paint.setColor(mProgressColor);
        //是否设置渐变
        if (isGradient && colorArray != null) {
            paint.setShader(new RadialGradient(rectF.centerX(), rectF.centerY(), mRadius, colorArray, null, Shader.TileMode.MIRROR));
        }
        if (!isAnimation) {
            mCurrentAngle = 360 * (mCurrentProgress / mMaxProgress);
        }
        //开始画圆弧
        canvas.drawArc(rectF, mStartAngle, mCurrentAngle, true, paint);
    }

  因为背景是一个圆环,所以这里的画笔设置就比较注意一些,看一下就会了,这里最重要的是drawArc,用于绘制及角度圆,像下图这样,画了4/1的进度,同时增加是否渐变的设置,这里的开始角度是动态的。

Android 自定义View 之 饼状进度条_进度条_02

五、API方法

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

/**
     * 设置角度
     * @param angle 角度
     */
    public void setCustomAngle(int angle) {
        if (angle >= 0 && angle < 90) {
            mStartAngle = 0;
        } else if (angle >= 90 && angle < 180) {
            mStartAngle = 90;
        } else if (angle >= 180 && angle < 270) {
            mStartAngle = 180;
        } else if (angle >= 270 && angle < 360) {
            mStartAngle = 270;
        } else if (angle >= 360) {
            mStartAngle = 0;
        }
        invalidate();
    }

    /**
     * 设置是否渐变
     */
    public void setGradient(boolean gradient) {
        isGradient = gradient;
        invalidate();
    }

    /**
     * 设置渐变的颜色
     */
    public void setColorArray(int[] colorArr) {
        if (colorArr == null) return;
        colorArray = colorArr;
    }

    /**
     * 设置当前进度
     */
    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(mStartAngle, mCurrentAngle);
    }

    /**
     * 设置动画
     *
     * @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就完成了,下面我们可以在PieProgressBarActivity中使用了。

六、使用

   关于使用,我在写这个文章的时候这个自定义View已经加入到仓库中了,可以通过引入依赖的方式,例如在app模块中使用,则打开app模块下的build.gradle,在dependencies{}闭包下添加即可,之后记得要Sync Now

dependencies {
    implementation 'io.github.lilongweidev:easyview:1.0.4'
}

   或者你在自己的项目中完成了刚才上述的所有步骤,那么你就不用引入依赖了,直接调用就好了,不过要注意更改对应的包名,否则会爆红的。

  先修改activity_pie_progress_bar.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"
    tools:context=".used.PieProgressBarActivity">

    <com.easy.view.PieProgressBar
        android:id="@+id/progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:customAngle="right"
        app:gradient="false"
        app:gradientColorArray="@array/color"
        app:maxProgress="100"
        app:progress="5"
        app:progressbarColor="@color/green"
        app:radius="80dp" />

    <CheckBox
        android:id="@+id/cb_gradient"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="是否渐变" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="开始角度:"
            android:textColor="@color/black" />

        <RadioGroup
            android:id="@+id/rg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="0%" />

            <RadioButton
                android:id="@+id/rb_90"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="90%" />

            <RadioButton
                android:id="@+id/rb_180"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="180%" />

            <RadioButton
                android:id="@+id/rb_270"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="270%" />
        </RadioGroup>
    </LinearLayout>


    <Button
        android:id="@+id/btn_set_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="随机设置进度" />

    <Button
        android:id="@+id/btn_set_progress_0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="设置0%进度" />

    <Button
        android:id="@+id/btn_set_progress_100"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="设置100%进度" />
</LinearLayout>

在strings.xml中增加渐变色,代码如下:

<string-array name="color">
        <item>#00FFF7</item>
        <item>#FFDD00</item>
        <item>#FF0000</item>
    </string-array>

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

Android 自定义View 之 饼状进度条_Android进度条_03

PieProgressBarActivity中使用,如下所示:

public class PieProgressBarActivity extends EasyActivity<ActivityPieProgressBarBinding> {

    @SuppressLint("NonConstantResourceId")
    @Override
    protected void onCreate() {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //是否渐变
        binding.cbGradient.setOnCheckedChangeListener((buttonView, isChecked) -> {
            binding.cbGradient.setText(isChecked ? "渐变" : "不渐变");
            binding.progress.setGradient(isChecked);
        });
        //开始角度
        binding.rg.setOnCheckedChangeListener((group, checkedId) -> {
            int angle = 0;
            switch (checkedId) {
                case R.id.rb_0:
                    angle = 0;
                    break;
                case R.id.rb_90:
                    angle = 90;
                    break;
                case R.id.rb_180:
                    angle = 180;
                    break;
                case R.id.rb_270:
                    angle = 270;
                    break;
            }
            binding.progress.setCustomAngle(angle);
        });
        //设置随机进度值
        binding.btnSetProgress.setOnClickListener(v -> {
            int progress = Math.abs(new Random().nextInt() % 100);
            Toast.makeText(this, "" + progress, Toast.LENGTH_SHORT).show();
            binding.progress.setProgress(progress);
        });
        //设置0%进度值
        binding.btnSetProgress0.setOnClickListener(v -> binding.progress.setProgress(0));
        //设置100%进度值
        binding.btnSetProgress100.setOnClickListener(v -> binding.progress.setProgress(100));
    }
}

运行效果如下图所示:

Android 自定义View 之 饼状进度条_Android进度条

七、源码

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

源码地址:EasyView


标签:饼状,PieProgressBar,angle,自定义,int,private,progress,Android,绘制
From: https://blog.51cto.com/u_15117645/6407658

相关文章

  • LangChain教程 – 如何构建自定义知识聊天机器人
    您可能已经了解到过去几个月发布的大量AI应用程序。您甚至可能已经开始使用其中的一些。ChatPDF和CustomGPTAI等AI工具已经对人们变得非常有用——这是有充分理由的。您需要滚动浏览50页文档才能找到简单答案的日子已经一去不复返了。相反,您可以依靠AI来完成繁重的工作......
  • odoo14 使用ir.actions.client 自定义弹窗内容
    ir.actions.client介绍ir.actions.client是odooactions事件的一种,触发一个在客户端实现(即js文件中定义的函数,通过core.action_registry.add(tag,函数名)注册到odoo中)动作tag--action在客户端的标识符,一般是一个专用的字符串,在js文件中注册该动作时指定。params(可......
  • 处理 Ionic 5 中的重大变化:删除了Events,如何在ionic 5+版本中实现自定义Events用于旧
    您是否将您的Ionic应用程序升级到v5,而您的应用程序正在使用Events,它不再工作?如果上述情况属实,那么您来对地方了。先讲个小故事——几天前,我看到一条来自离子团队的推文,Ionic5已发布,在看到该推文10分钟后,我仅使用两个命令将我们的一个中型生产应用程序升级到Ionic5和A......
  • port exosip to android
     Portexosiptoandroidplatformisn'tadifficulttaskbecauseexosipdoesn'trelyonanyspecialsystemcallsthataren'tavailableonandroid.Itonlyrequiresosiptocompile,whichcanalsobeeasilyported.Asanexample,Icreatedt......
  • [原]Android上GTalk以及Push机制的XMPP数据选择使用protobuf格式而非XML格式
    [url]http://code.google.com/p/protobuf/[/url][b]先介绍下什么是protobuf以及有什么好处.[/b][i]ProtocolBuffersareawayofencodingstructureddatainanefficientyetextensibleformat.GoogleusesProtocolBuffersforalmostallofit......
  • Android上试用Linphone(Free SIP VOIP Client)
    1.下载Linphoneapk并且安装到两个Android手机上[url]http://www.linphone.org/eng/download/packages/android.html[/url]2.申请两个免费的SIP帐号进行测试[url]https://www.ekiga.net/[/url]3.在每个Android手机上分别配置Linphone应用程序点......
  • [原创]通过代码及流程图说明Google在Android上的Push机制的实现
    [color=red][b]声明:如果您要转载,请事先征得本人的同意后方可并且请您附上原文链接.本人保留一切权利.多谢![/b][/color]Google从FroYo版本后引入了C2DM(CloudtoDeviceMessaging)框架:[url]http://code.google.com/android/c2dm/index.html[/url......
  • android-夜间模式
    资源1AndroidMaterialDesign系列之夜间模式阐述了夜间模式的资源文件,告知建立了values-night文件夹对于夜间模式的颜色和主题配置,我们需要建立一个res下建立一个values-night文件夹,里面放着夜间主题样式的color等资源。colors.xml配置如下:<?xmlversion="1.0"encoding="utf-8"......
  • 移动开发之设计模式-组合模式(IOS&Android)
    组合模式组合模式(CompositePattern),又叫部分整体模式,是用于把一组相似的对象当作一个单一的对象。组合模式依据树形结构来组合对象,用来表示部分以及整体层次。这种类型的设计模式属于结构型模式,它创建了对象组的树形结构。这种模式创建了一个包含自己对象组的类。该类提供了修改相......
  • Fragment原理解析androidx版本&ViewPager与Fragment
    资料Fragment生命周期为什么要通过Fragment.setArguments(Bundle)传递参数单独问题:动态方式,静态方式添加随Activity启动动态添加回退栈onSaveInstance静态方式添加FragmentmHost是这个finalFragmentControllermFragments=FragmentController.createController(newHostCallb......