Android零基础入门第52节：自定义酷炫进度条

程序员文章站 2022-05-26 19:55:33

...

Android系统默认的ProgressBar往往都不能满足实际开发需要，一般都会开发者自定义ProgressBar。

在Android开发中，自定义ProgressBar一般有三种思路来完成。

一、在系统进度条基础上优化

首先来看一下style="@android:style/Widget.ProgressBar.Horizontal"的源码。鼠标移动到style属性值上，按住Ctrl键，鼠标左键点击即可打开对应资源文件。

Android零基础入门第52节：自定义酷炫进度条

当然也可以直接找到源码文件直接打开进行查看，本地相对路径为sdk\platforms\android-25\data\res\values\styles.xml。打开后可以看到源码如下：

Android零基础入门第52节：自定义酷炫进度条

从上述代码可以看到，水平进度条的核心就是android:progressDrawable，接着继续去寻找progress_horizontal的源码（本地相对路径为sdk\platforms\android-25\data\res\drawable\progress_horizontal.xml），如下：

Android零基础入门第52节：自定义酷炫进度条

从上述代码可以发现，progress_horizontal一共包括3个item，分别为background、secondProgress、progress，看名字就能知道其大概作用，其中我们比较关心的应该是后两个。

其实把这个文件copy一份到自己的项目下，就可以随心所欲的修改shape属性的圆角、渐变等，实现我们想要的效果了。

由于此处我们还没有学习Drawable资源，所以这里先给大家介绍一下概念，关于具体如何操作可以等学了Drawable资源后，再回过头来自定义ProgressBar。欢迎关注微信公众分享达人秀ShareExpert获取第一手教程，也可添加小编微信jinwenyu2010，然后拽入Android零基础入门技术讨论微信群一同学习。

二、使用动画来代替进度条

使用动画来替代进度条，其实就是使用一套连续图片，形成一个帧动画，当需要进度图的时候，让动画可见，不需要的时候让动画不可见即可。

继续使用WidgetSample工程的advancedviewsample模块，首先在drawable目录下准备一组连续的图片，然后在res/drawable/目录下定义一个myprogressbar.xml的资源文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="false">
    <item android:drawable="@drawable/loading_01" android:duration="200" />
    <item android:drawable="@drawable/loading_02" android:duration="200" />
    <item android:drawable="@drawable/loading_03" android:duration="200" />
    <item android:drawable="@drawable/loading_04" android:duration="200" />
    <item android:drawable="@drawable/loading_05" android:duration="200" />
    <item android:drawable="@drawable/loading_06" android:duration="200" />
    <item android:drawable="@drawable/loading_07" android:duration="200" />
    <item android:drawable="@drawable/loading_08" android:duration="200" />
    <item android:drawable="@drawable/loading_09" android:duration="200" />
    <item android:drawable="@drawable/loading_10" android:duration="200" />
    <item android:drawable="@drawable/loading_11" android:duration="200" />
    <item android:drawable="@drawable/loading_12" android:duration="200" />
</animation-list>

关于上述代码的具体意义会在Android动画进行讲解，此处大家知道如何操作即可。

接着新建一个布局文件myprogressbar_layout.xml，里面仅仅有一个ImageView即可，用于显示进度条，把src设置为上述drawable资源即可，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
        android:id="@+id/mypg_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/myprogressbar"/>

</RelativeLayout>

新建MyProgressbarActivity.java文件，加载上面新建的布局文件，具体代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample;

import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

public class MyProgressbarActivity extends AppCompatActivity {
    private ImageView mProgressbarImg = null;
    private AnimationDrawable mProgressAnimation = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.myprogressbar_layout);

        mProgressbarImg = (ImageView) findViewById(R.id.mypg_img);
        mProgressAnimation = (AnimationDrawable) mProgressbarImg.getDrawable();

        // 启动动画
        mProgressbarImg.postDelayed(new Runnable() {
            @Override
            public void run() {
                // 启动动画
                mProgressAnimation.start();
            }
        }, 100);
    }
}

这里只是简单启动上述定义的动画，在开发中你可以根据需要显示和隐藏即可。

修改启动的Activity，运行可以看到如下图所示效果。

Android零基础入门第52节：自定义酷炫进度条

三、通过自定义View来实现进度条

使用动画来完成进度条实际上比较巧妙，但还是不能满足实际开发需要，那么最强大的自定义ProgressBar就是重写View来实现了，可以定义出任何需要的进度条。

如定义一个CircleProgressBar类，继承View，并重写其方法，示例代码如下：

package com.jinyu.cqkxzsxy.android.advancedviewsample.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class CircleProgressBar extends View {
    private Paint mBackPaint;
    private Paint mFrontPaint;
    private Paint mTextPaint;
    private float mStrokeWidth = 50;
    private float mHalfStrokeWidth = mStrokeWidth / 2;
    private float mRadius = 200;
    private RectF mRect;
    private int mProgress = 0;
    private int mTargetProgress = 90;
    private int mMax = 100;
    private int mWidth;
    private int mHeight;

    public CircleProgressBar(Context context) {
        super(context);
        init();
    }

    public CircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    // 完成相关参数初始化
    private void init() {
        mBackPaint = new Paint();
        mBackPaint.setColor(Color.WHITE);
        mBackPaint.setAntiAlias(true);
        mBackPaint.setStyle(Paint.Style.STROKE);
        mBackPaint.setStrokeWidth(mStrokeWidth);
        mFrontPaint = new Paint();
        mFrontPaint.setColor(Color.GREEN);
        mFrontPaint.setAntiAlias(true);
        mFrontPaint.setStyle(Paint.Style.STROKE);
        mFrontPaint.setStrokeWidth(mStrokeWidth);
        mTextPaint = new Paint();
        mTextPaint.setColor(Color.GREEN);
        mTextPaint.setAntiAlias(true);
        mTextPaint.setTextSize(80);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    // 重写测量大小的onMeasure方法和绘制View的核心方法onDraw()
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getRealSize(widthMeasureSpec);
        mHeight = getRealSize(heightMeasureSpec);
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        initRect();
        float angle = mProgress / (float) mMax * 360;
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mBackPaint);
        canvas.drawArc(mRect, -90, angle, false, mFrontPaint);
        canvas.drawText(mProgress + "%", mWidth / 2 + mHalfStrokeWidth,
                mHeight / 2 + mHalfStrokeWidth, mTextPaint);
        if (mProgress < mTargetProgress) {
            mProgress += 1;
            invalidate();
        }
    }

    public int getRealSize(int measureSpec) {
        int result = 1;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        if (mode == MeasureSpec.AT_MOST || mode == MeasureSpec.UNSPECIFIED) {
            //自己计算
            result = (int) (mRadius * 2 + mStrokeWidth);
        } else {
            result = size;
        }
        return result;
    }

    private void initRect() {
        if (mRect == null) {
            mRect = new RectF();
            int viewSize = (int) (mRadius * 2);
            int left = (mWidth - viewSize) / 2;
            int top = (mHeight - viewSize) / 2;
            int right = left + viewSize;
            int bottom = top + viewSize;
            mRect.set(left, top, right, bottom);
        }
    }
}

关于上述代码的具体含义，此处不理解没关系，可以等学了Android绘图后再回过头来进行学习。

然后新建一个布局文件circleprogressbar_layout.xml，使用上述的自定义进度条类，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <com.jinyu.cqkxzsxy.android.advancedviewsample.view.CircleProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>

修改MainActivity.java里面加载的布局文件，运行后其效果如下图所示。

Android零基础入门第52节：自定义酷炫进度条