上周看到群里有同学谈到自定义进度条的的问题，自己就针对百分数进度条自定义了一个。源码已经传到github上啦，可以下载下来直接能够运行的，也可以直接在里面根据自己的需求进行修改代码!

针对上周有朋友提的建议：上效果图。

图1

图1这个就是自定义的百分数在进度条上的一个NumberProgressBar，而且在右上角设置了一个取消定时的按钮，便于我们跑一次程序可以多次验证进度条的效果。【不然可能程序运行一次，只能看到一次效果。我建议：大家在写demo的时候也最好采用这样的方式】。

我这里只是为了模拟下进度条的加载效果，所以在运行至100%时，默认的显示了本地中的一张图片。嗯嗯，效果不错，图片效果不错。

在这里，说一下主要的逻辑：细节的还是大家自己去github上下载源码研究下。

自定义进度条的属性：高度，长度，空白区域，百分数，进度条的颜色(已经加载/未加载)，最大值，文字颜色，文字大小，文本的宽度，开始绘制，结束绘制等等。

绘制控件：包括：画笔的初始化，已经加载的画笔，未加载的画笔，文本的画笔。

设置监听：进度条是自动加载的，所以要设置定时任务，然后设置进度条的监听，时刻进行进度条的刷新。

任务处理的执行。

设备旋转时会导致数据的丢失，我们继承了View，好在View给我们

onSaveInstanceState()和onRestoreInstanceState()。

我们就来看下这两个方法，首先这两个方法跟Acticity中的相似方法的主要区别在于Activity是用Bundle进行数据传递的，而View是通过Parcelable进行传递的。

如果使用Parcelable对象传递自定义数据就需要实现Parcelable接口和CTRATE静态常量，不但复杂而且代码量很大。但是我们这次是基于RectF作为基础数据，因为RectF是Android提供的并且已经实现了Parcelable接口和CTRATE静态常量，这就很方便啦。

在onSaveInstanceState()方法中，我们必须将父类保存的数据保存在Parcelable对象中，否则会发生崩溃。

所以我这样来操作，

bundle.putParcelable(INSTANCE_STATE,super.onSaveInstanceState());

父类保存数据和RectF自定义数据保存在里面，由于Bundle也是实现了

Parcelable接口和CREATE常量的，所以在View 中两个方法传递数据是OK的。

@Override protected Parcelable onSaveInstanceState(){

final Bundle bundle = new Bundle();

bundle.putParcelable(INSTANCE_STATE, super.onSaveInstanceState());

bundle.putInt(INSTANCE_TEXT_COLOR, getTextColor());

bundle.putFloat(INSTANCE_TEXT_SIZE, getProgressTextSize());

bundle.putFloat(INSTANCE_REACHED_BAR_HEIGHT, getReachedBarHeight());

bundle.putFloat(INSTANCE_UNREACHED_BAR_HEIGHT, getUnreachedBarHeight());

bundle.putInt(INSTANCE_REACHED_BAR_COLOR, getReachedBarColor());

bundle.putInt(INSTANCE_UNREACHED_BAR_COLOR, getUnreachedBarColor());

bundle.putInt(INSTANCE_MAX, getMax());

bundle.putInt(INSTANCE_PROGRESS, getProgress());

bundle.putString(INSTANCE_SUFFIX, getSuffix());

bundle.putString(INSTANCE_PREFIX, getPrefix());

bundle.putBoolean(INSTANCE_TEXT_VISIBILITY, getProgressTextVisibility());

return bundle;

}

在onRestoreInstanceState方法中，我们需要讲State强制转化成Bundle对象

@Override protected void onRestoreInstanceState(Parcelable state){

if (state instanceof Bundle) {

final Bundle bundle = (Bundle) state;

mTextColor = bundle.getInt(INSTANCE_TEXT_COLOR);

mTextSize = bundle.getFloat(INSTANCE_TEXT_SIZE);

mReachedBarHeight = bundle.getFloat(INSTANCE_REACHED_BAR_HEIGHT);

mUnreachedBarHeight = bundle.getFloat(INSTANCE_UNREACHED_BAR_HEIGHT);

mReachedBarColor = bundle.getInt(INSTANCE_REACHED_BAR_COLOR);

mUnreachedBarColor = bundle.getInt(INSTANCE_UNREACHED_BAR_COLOR);

initializePainters();

setMax(bundle.getInt(INSTANCE_MAX));

setProgress(bundle.getInt(INSTANCE_PROGRESS));

setPrefix(bundle.getString(INSTANCE_PREFIX));

setSuffix(bundle.getString(INSTANCE_SUFFIX));

setProgressTextVisibility(bundle.getBoolean(INSTANCE_TEXT_VISIBILITY) ? ProgressTextVisibility.Visible : ProgressTextVisibility.Invisible);

super.onRestoreInstanceState(bundle.getParcelable(INSTANCE_STATE));

return;

}

super.onRestoreInstanceState(state);

}

具体的细节，大家可以在留言区一起讨论，交流学习。

另外我当时为了和普通的百分数进度条对比，也做了个普通的进度条，效果如下：

实现细节：

也就是我们用一个横向的ProgressBar，百分数是一个textView然后下一个定时器，不断的更新textView的数值。

只是重点为了给大家分享自定义的百分数进度条的效果，所以我注视了这部分代码。相应的调整下代码，运行程序就可以看到这个效果。

步骤一：在布局中放开这段代码，注释掉相应的自定义的布局代码

步骤二：在MainActivity中放开这段代码，注释掉关于自定义的代码：

mPb_button = (ProgressBar) findViewById(R.id.pb_button);

mPb_textView = (TextView) findViewById(R.id.tvpb);

mPb_image = (ImageView) findViewById(R.id.pb_image);

new Thread(){

@Override        public void run(){

int i =0;

while (i<=100){

i++;

try {

Thread.sleep(50);

} catch (InterruptedException e) {

e.printStackTrace();

}

final int j =i;

mPb_button.setProgress(i);

runOnUiThread(new Runnable() {

@Override                    public void run(){

mPb_textView.setText(j+"%");

}

});

}

if (i>100) {

mHandler.sendEmptyMessage(0);

}

}

}.start();

操作完前两步之后，运行程序即可看到图2的效果。

项目源码：https://github.com/yangziling/NumberProgressBar.git

掘金：https://juejin.im/user/57db765367f3560056983807

本文内容转载自网络，本着传播与分享的原则，来源/作者信息已在文章顶部表明，版权归原作者所有，如有侵权请联系我们进行删除!