android 百分比loading,Android项目中Loading对话框的优化

1.ContentLoadingProgressBar介绍

最近在学习开源项目的时候偶然看到了ContentLoadingProgressBar这个控件，此前我没有接触过，就想着了解一下它的功能。从名称上看，ContentLoadingProgressBar应该和ProgressBar有着什么联系，项目中也是把它当做ProgressBar来使用的，点进源码一看，果然ContentLoadingProgressBar是继承自ProgressBar的。

public class ContentLoadingProgressBar extends ProgressBar {

// ...

}

既然是继承自ProgressBar，那么肯定是在ProgressBar的基础上添加了特殊的功能，先来看一下类的注释：

/**

* ContentLoadingProgressBar implements a ProgressBar that waits a minimum time to be

* dismissed before showing. Once visible, the progress bar will be visible for

* a minimum amount of time to avoid "flashes" in the UI when an event could take

* a largely variable time to complete (from none, to a user perceivable amount)

*/

从注释中可以看出，ContentLoadingProgressBar在ProgressBar的基础上添加了以下特性：

在显示之前会等待一段时间来被隐藏

一旦显示，ContentLoadingProgressBar会在一段时间内都保持可见

这两个特性的共同作用就是避免UI视图的“闪烁”现象，这是什么意思呢，相信大家在项目开发中都遇到过这样一种情况，在进行网络请求之前显示Loading对话框，请求完成之后再隐藏，如果网络请求耗时很短，那么就会导致对话框在短时间内显示和隐藏，造成“闪烁”现象，如下图所示：

结合上述场景，ContentLoadingProgressBar的这两个特性就很好理解了，首先在显示之前等待一段时间(当然这段时间很短，否则会产生卡顿现象)，如果在这段时间内被隐藏，那么就不会显示出ContentLoadingProgressBar。此外，一旦显示出了ContentLoadingProgressBar，还要保证其显示时间不能太短，否则同样会造成“闪烁”现象。在这两点的共同作用下就不会出现ContentLoadingProgressBar刚显示就被隐藏的问题了，从而避免了“闪烁”现象。

清楚了ContentLoadingProgressBar的特性和作用后我们来简单看一下它是如何实现的，完整代码如下：

public class ContentLoadingProgressBar extends ProgressBar {

private static final int MIN_SHOW_TIME = 500; // ms

private static final int MIN_DELAY = 500; // ms

long mStartTime = -1; // 开始显示时的时间

boolean mPostedHide = false;

boolean mPostedShow = false;

boolean mDismissed = false;

private final Runnable mDelayedHide = new Runnable() {

@Override

public void run() {

mPostedHide = false;

mStartTime = -1;

setVisibility(View.GONE);

}

};

private final Runnable mDelayedShow = new Runnable() {

@Override

public void run() {

mPostedShow = false;

if (!mDismissed) {

mStartTime = System.currentTimeMillis();

setVisibility(View.VISIBLE);

}

}

};

public ContentLoadingProgressBar(@NonNull Context context) {

this(context, null);

}

public ContentLoadingProgressBar(@NonNull Context context, @Nullable AttributeSet attrs) {

super(context, attrs, 0);

}

@Override

public void onAttachedToWindow() {

super.onAttachedToWindow();

removeCallbacks();

}

@Override

public void onDetachedFromWindow() {

super.onDetachedFromWindow();

removeCallbacks();

}

private void removeCallbacks() {

removeCallbacks(mDelayedHide);

removeCallbacks(mDelayedShow);

}

/**

* Hide the progress view if it is visible. The progress view will not be

* hidden until it has been shown for at least a minimum show time. If the

* progress view was not yet visible, cancels showing the progress view.

*/

public synchronized void hide() {

mDismissed = true;

removeCallbacks(mDelayedShow);

mPostedShow = false;

long diff = System.currentTimeMillis() - mStartTime;

if (diff >= MIN_SHOW_TIME || mStartTime == -1) {

// ContentLoadingProgressBar的显示时间已经超过了500ms或者还没有显示

setVisibility(View.GONE);

} else {

// ContentLoadingProgressBar的显示时间不足500ms

if (!mPostedHide) {

postDelayed(mDelayedHide, MIN_SHOW_TIME - diff);

mPostedHide = true;

}

}

}

/**

* Show the progress view after waiting for a minimum delay. If

* during that time, hide() is called, the view is never made visible.

*/

public synchronized void show() {

// Reset the start time.

mStartTime = -1;

mDismissed = false;

removeCallbacks(mDelayedHide);

mPostedHide = false;

if (!mPostedShow) {

postDelayed(mDelayedShow, MIN_DELAY);

mPostedShow = true;

}

}

}

ContentLoadingProgressBar中定义了两个int类型的常量MIN_SHOW_TIME和MIN_DELAY，分别表示显示的最短时间和延迟显示的时间，值都是500ms。mDelayedShow和mDelayedHide是两个Runable任务，分别对应延时显示和延时隐藏。在控制ContentLoadingProgressBar的显示和隐藏时不能使用setVisibility()方法，这样就和使用ProgressBar没有区别了，而是需要使用show()和hide()方法，我们来分别看一下这两个方法。

首先是show()方法，这里首先会做一些状态的恢复处理，将mStartTime恢复为-1，mStartTime记录了ContentLoadingProgressBar开始显示的时间，接着将延时隐藏任务mDelayedHide从任务队列中移除。方法最后会判断mPostedShow的值，如果为false就调用postDelayed()方法延迟MIN_DELAY(500ms)后执行mDelayedShow任务。mPostedShow用于标记mDelayedShow是否已添加到任务队列中，防止任务的重复执行。mDelayedShow任务的逻辑很简单，主要就是记录开始显示的时间并执行setVisibility(View.VISIBLE)将ContentLoadingProgressBar显示出来。

我们再来看hide()方法，和show()方法类似，首先将延时显示任务mDelayedShow从任务队列中移除，因此如果调用show()和hide()方法之间的间隔时间小于MIN_DELAY(500ms)，mDelayedShow就不会执行了，ContentLoadingProgressBar也就不会显示了。接下来会计算System.currentTimeMillis() - mStartTime的值，即此时ContentLoadingProgressBar的显示时间，如果此时mStartTime的值为-1(ContentLoadingProgressBar还没有显示)或者显示时间超过了MIN_SHOW_TIME(500ms)，直接执行setVisibility(View.GONE)隐藏ContentLoadingProgressBar；反之则说明ContentLoadingProgressBar的显示时间没有达到最短时间500ms，计算剩余的时间，延时执行隐藏任务，保证ContentLoadingProgressBar最短可以显示500ms。这里的mPostedHide作用同样是防止延时隐藏任务的重复执行。mDelayedHide任务的逻辑也比较简单，将mStartTime恢复为-1，执行setVisibility(View.GONE)隐藏ContentLoadingProgressBar。

ContentLoadingProgressBar实现的基本原理还是比较简单的，看到这里不知道大家是否和我一样受到了启发呢，我们是不是也可以仿照ContentLoadingProgressBar来定义一个Loading对话框，解决“闪烁”问题呢？

2.Loading对话框的优化

ContentLoadingProgressBar给了我们很好的思路，解决Loading对话框“闪烁”问题需要做到以下两点：

显示Loading对话框之前先等待一段时间

隐藏Loading对话框时判断显示时间是否达到了最短显示时间，如果没有达到就延时执行隐藏任务

清楚思路后就可以优化Loading对话框了，直接附上完整代码：

import android.app.AlertDialog;

import android.content.Context;

import android.os.Handler;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.TextView;

import androidx.annotation.NonNull;

public class LoadingDialog extends AlertDialog {

private static final int MIN_SHOW_TIME = 500;

private static final int MIN_DELAY = 500;

private TextView tvMessage;

private long mStartTime = -1;

private boolean mPostedHide = false;

private boolean mPostedShow = false;

private boolean mDismissed = false;

private Handler mHandler = new Handler();

private final Runnable mDelayedHide = new Runnable() {

@Override

public void run() {

mPostedHide = false;

mStartTime = -1;

dismiss();

}

};

private final Runnable mDelayedShow = new Runnable() {

@Override

public void run() {

mPostedShow = false;

if (!mDismissed) {

mStartTime = System.currentTimeMillis();

show();

}

}

};

public LoadingDialog(@NonNull Context context) {

super(context, R.style.Theme_AppCompat_Dialog);

View loadView = LayoutInflater.from(getContext()).inflate(R.layout.dialog_loading, null);

setView(loadView);

tvMessage = loadView.findViewById(R.id.tv_message);

}

public void showDialog(String message) {

tvMessage.setText(message);

mStartTime = -1;

mDismissed = false;

mHandler.removeCallbacks(mDelayedHide);

mPostedHide = false;

if (!mPostedShow) {

mHandler.postDelayed(mDelayedShow, MIN_DELAY);

mPostedShow = true;

}

}

public void hideDialog() {

mDismissed = true;

mHandler.removeCallbacks(mDelayedShow);

mPostedShow = false;

long diff = System.currentTimeMillis() - mStartTime;

if (diff >= MIN_SHOW_TIME || mStartTime == -1) {

dismiss();

} else {

if (!mPostedHide) {

mHandler.postDelayed(mDelayedHide, MIN_SHOW_TIME - diff);

mPostedHide = true;

}

}

}

@Override

public void onDetachedFromWindow() {

super.onDetachedFromWindow();

mHandler.removeCallbacks(mDelayedHide);

mHandler.removeCallbacks(mDelayedShow);

}

}

布局文件我就不展示了，就是一个ProgressBar和一个TextView，用于展示提示信息。其实基本上都是照抄的ContentLoadingProgressBar，区别只是需要定义一个Handler对象来处理延时任务。控制Loading对话框的显示和隐藏直接使用showDialog()和hideDialog()方法就可以了。为了简单示例，我这里自定义的Dialog直接继承自AlertDialog，大家项目中使用的可能是自己定义的Dialog或者第三方Dialog，又或者是DialogFragment，都没关系，只需要清楚思路，自行修改一下即可，注意要在适当的时机移除延时任务，防止内存泄漏。

优化完成后我们可以简单地测试一下，添加两个按钮，点击按钮时调用showDialog()方法延时显示Loading对话框，之后分别延时300ms和600ms后调用hideDialog()方法隐藏Loading对话框，模拟网络请求过程，运行效果如下图所示：

可以看出，延时300ms的情况由于调用显示和隐藏方法的间隔时间小于MIN_DELAY，因此不会显示出Loading对话框；延时600ms的情况会显示出Loading对话框，由于调用hideDialog()方法时Loading对话框显示的时间大约为600 - MIN_DELAY = 100ms不足MIN_SHOW_TIME，因此会延时显示一段时间后再隐藏。

补充一下，我这里定义的Loading对话框的延时显示时间和最短显示时间都是使用的500ms，和ContentLoadingProgressBar一样，大家也可以修改成自己认为合适的值，尤其是延时显示时间，500ms可能有些长，容易给用户造成卡顿的感觉，可以适当地减小延时时间，比如调整为300ms。

3.总结

本文通过分析ContentLoadingProgressBar的原理引出了项目开发中Loading对话框的一种优化方式，避免对话框显示和隐藏间隔时间太短导致的“闪烁”现象。其实这可能也不算什么问题，不做处理也没关系，但既然解决起来很简单，又能给用户带来更好的使用体验，为什么不去做呢。提到优化我们往往想到的都是运行性能、内存等等方面，代码逻辑上的优化很容易被忽略，但恰恰这才是我们要首先考虑也是最容易着手的。最后，限于自身水平，文中有些地方可能分析得不是很准确，或者大家有什么更好的想法都欢迎提出，一起交流。