我正在参加「掘金·启航计划」

前言

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

正文

  效果图感觉怎么样呢？下面我们来实现这个自定义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的进度，同时增加是否渐变的设置，这里的开始角度是动态的。

五、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>

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

在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));
    }
}

运行效果如下图所示：

七、源码

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

源码地址：EasyView