ContentLoadingProgressBar 是 Android 中的一个控件,继承自 ProgressBar。它在 ProgressBar 的基础上添加了一些特殊功能,主要用于在加载内容时显示进度。它的一些主要特点如下:
- 自动隐藏和显示:ContentLoadingProgressBar 会在内容加载完成后自动隐藏,并在内容开始加载时自动显示。这减少了手动控制进度条显示和隐藏的代码量。
- 延迟显示:为了避免在短时间内频繁显示和隐藏进度条,ContentLoadingProgressBar 提供了一个延迟显示的功能。如果内容加载时间非常短,进度条可能不会显示出来。
- 延迟隐藏:类似地,ContentLoadingProgressBar 也提供了延迟隐藏的功能,以确保进度条在内容加载完成后不会立即消失,从而提供更好的用户体验。
这些功能使 ContentLoadingProgressBar 成为一个更智能、更易用的进度条控件,特别适合在需要频繁加载内容的应用中使用。
1、ContentLoadingProgressBar 的特性
从注释中可以看出,ContentLoadingProgressBar 在 ProgressBar 的基础上添加了以下特性:
- 在显示之前会等待一段时间来被隐藏:这意味着在显示之前,ContentLoadingProgressBar 会等待一段时间,如果在这段时间内被隐藏,那么就不会显示出来。
- 一旦显示,ContentLoadingProgressBar 会在一段时间内保持可见:这确保了进度条不会在短时间内频繁显示和隐藏,避免了 UI 视图的“闪烁”现象。
这种“闪烁”现象在项目开发中很常见,例如在进行网络请求之前显示 Loading 对话框,请求完成之后再隐藏。如果网络请求耗时很短,就会导致对话框在短时间内显示和隐藏,造成“闪烁”现象。ContentLoadingProgressBar 的这两个特性很好地解决了这个问题。
2、ContentLoadingProgressBar 的实现
ContentLoadingProgressBar 中定义了两个 int 类型的常量 MIN_SHOW_TIME
和 MIN_DELAY
,分别表示显示的最短时间和延迟显示的时间,值都是 500ms。mDelayedShow
和 mDelayedHide
是两个 Runnable 任务,分别对应延时显示和延时隐藏。在控制 ContentLoadingProgressBar 的显示和隐藏时不能使用 setVisibility()
方法,而是需要使用 show()
和 hide()
方法。
show() 方法
public void show() {mStartTime = -1;mPostedHide = false;mPostedShow = true;removeCallbacks(mDelayedHide);if (!mPostedShow) {postDelayed(mDelayedShow, MIN_DELAY);}
}
show()
方法首先会做一些状态的恢复处理,将 mStartTime
恢复为 -1,mStartTime
记录了 ContentLoadingProgressBar 开始显示的时间,接着将延时隐藏任务 mDelayedHide
从任务队列中移除。方法最后会判断 mPostedShow
的值,如果为 false 就调用 postDelayed()
方法延迟 MIN_DELAY
(500ms)后执行 mDelayedShow
任务。mPostedShow
用于标记 mDelayedShow
是否已添加到任务队列中,防止任务的重复执行。mDelayedShow
任务的逻辑很简单,主要就是记录开始显示的时间并执行 setVisibility(View.VISIBLE)
将 ContentLoadingProgressBar 显示出来。
hide() 方法
public void hide() {mPostedHide = true;removeCallbacks(mDelayedShow);long diff = System.currentTimeMillis() - mStartTime;if (diff >= MIN_SHOW_TIME || mStartTime == -1) {setVisibility(View.GONE);} else {postDelayed(mDelayedHide, MIN_SHOW_TIME - diff);}
}
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。
3、自定义Loading 对话框
ContentLoadingProgressBar 给了我们很好的思路,解决 Loading 对话框“闪烁”问题需要做到以下两点:
- 显示 Loading 对话框之前先等待一段时间。
- 隐藏 Loading 对话框时判断显示时间是否达到了最短显示时间,如果没有达到就延时执行隐藏任务。
清楚思路后就可以优化 Loading 对话框了,直接附上完整代码:
package com.jpc.customwidgetstudy.widgetimport android.app.Activity
import android.app.AlertDialog
import android.content.Context
import android.os.Handler
import android.os.Looper
import android.view.LayoutInflater
import android.view.ViewGroup
import android.widget.TextView
import com.jpc.customwidgetstudy.R/*** 自定义Loading Dialog, 用于显示加载中的状态*/
class LoadingDialog(context: Context): AlertDialog(context, R.style.Theme_AppCompat_Dialog){companion object{// 最短显示时间private const val MIN_SHOW_TIME = 500L// 最短延迟时间private const val MIN_DELAY_TIME = 500L}private var tvMessage: TextViewinit {val parent = (context as? Activity)?.findViewById<ViewGroup>(android.R.id.content)val loadView = LayoutInflater.from(context).inflate(R.layout.dialog_loading, parent, false)setView(loadView)tvMessage = loadView.findViewById(R.id.tv_message)}// 记录开始时间private var mStartTime: Long = -1// 防止延时隐藏任务的重复执行private var mPostedHide: Boolean = false// 防止延时显示任务的重复执行private var mPostedShow: Boolean = false// 是否已经消失private var mDismissed: Boolean = false// 主线程Handlerprivate val mHandler = Handler(Looper.getMainLooper())// 显示private val mDelayedShow: Runnable = Runnable {mPostedShow = falseif (!mDismissed){mStartTime = System.currentTimeMillis()show()}}// 隐藏private val mDelayedHide: Runnable = Runnable {mPostedHide = falsemStartTime = -1dismiss()}// 显示Dialogfun showDialog(message: String){tvMessage.text = messagemStartTime = -1mDismissed = falsemHandler.removeCallbacks(mDelayedHide)mPostedHide = falseif (!mPostedShow){mHandler.postDelayed(mDelayedShow, MIN_DELAY_TIME)mPostedShow = true}}// 隐藏Dialogfun hideDialog(){mDismissed = truemHandler.removeCallbacks(mDelayedShow)mPostedShow = falseval diff = System.currentTimeMillis() - mStartTimeif (diff >= MIN_SHOW_TIME || mStartTime == -1L){dismiss()}else{if (!mPostedHide){mHandler.postDelayed(mDelayedHide, MIN_SHOW_TIME - diff)mPostedHide = true}}}// 从Window移除时移除所有的Callbackoverride fun onDetachedFromWindow() {super.onDetachedFromWindow()mHandler.removeCallbacks(mDelayedHide)mHandler.removeCallbacks(mDelayedShow)}
}
可以定义Dialog的大小
<style name="Theme.AppCompat.Dialog" parent="Theme.AppCompat.Light.Dialog"><!-- Customize your dialog theme here --><item name="android:windowBackground">@color/loading_color</item><item name="android:windowMinWidthMajor">30%</item><item name="android:windowMinWidthMinor">30%</item><item name="android:padding">6dp</item></style><!-- Custom ProgressBar style --><style name="CustomProgressBar" parent="Widget.AppCompat.ProgressBar"><item name="android:indeterminateTint">@color/colorPrimary</item></style>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"><ProgressBarandroid:id="@+id/progressBar"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintBottom_toTopOf="@id/tv_message"app:layout_constraintStart_toStartOf="@id/tv_message"app:layout_constraintEnd_toEndOf="@id/tv_message"style="@style/CustomProgressBar"/><TextViewandroid:id="@+id/tv_message"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="加载中..."app:layout_constraintTop_toTopOf="parent"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintEnd_toEndOf="parent" /></androidx.constraintlayout.widget.ConstraintLayout>
布局文件就是一个 ProgressBar 和一个 TextView,用于展示提示信息。控制 Loading 对话框的显示和隐藏直接使用 showDialog()
和 hideDialog()
方法就可以了。为了简单示例,这里自定义的 Dialog 直接继承自 AlertDialog,注意要在适当的时机移除延时任务,防止内存泄漏。
效果如下:
总结
本文通过分析 ContentLoadingProgressBar 的原理引出了项目开发中 Loading 对话框的一种优化方式,避免对话框显示和隐藏间隔时间太短导致的“闪烁”现象。