仿照ContentLoadingProgressBar 的特点在Android项目中自定义Loading对话框

news/2024/12/23 2:13:57/

ContentLoadingProgressBar 是 Android 中的一个控件,继承自 ProgressBar。它在 ProgressBar 的基础上添加了一些特殊功能,主要用于在加载内容时显示进度。它的一些主要特点如下:

  1. 自动隐藏和显示:ContentLoadingProgressBar 会在内容加载完成后自动隐藏,并在内容开始加载时自动显示。这减少了手动控制进度条显示和隐藏的代码量。
  2. 延迟显示:为了避免在短时间内频繁显示和隐藏进度条,ContentLoadingProgressBar 提供了一个延迟显示的功能。如果内容加载时间非常短,进度条可能不会显示出来。
  3. 延迟隐藏:类似地,ContentLoadingProgressBar 也提供了延迟隐藏的功能,以确保进度条在内容加载完成后不会立即消失,从而提供更好的用户体验。

这些功能使 ContentLoadingProgressBar 成为一个更智能、更易用的进度条控件,特别适合在需要频繁加载内容的应用中使用。

1、ContentLoadingProgressBar 的特性

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

  1. 在显示之前会等待一段时间来被隐藏:这意味着在显示之前,ContentLoadingProgressBar 会等待一段时间,如果在这段时间内被隐藏,那么就不会显示出来。
  2. 一旦显示,ContentLoadingProgressBar 会在一段时间内保持可见:这确保了进度条不会在短时间内频繁显示和隐藏,避免了 UI 视图的“闪烁”现象。

这种“闪烁”现象在项目开发中很常见,例如在进行网络请求之前显示 Loading 对话框,请求完成之后再隐藏。如果网络请求耗时很短,就会导致对话框在短时间内显示和隐藏,造成“闪烁”现象。ContentLoadingProgressBar 的这两个特性很好地解决了这个问题。

2、ContentLoadingProgressBar 的实现

ContentLoadingProgressBar 中定义了两个 int 类型的常量 MIN_SHOW_TIMEMIN_DELAY,分别表示显示的最短时间和延迟显示的时间,值都是 500ms。mDelayedShowmDelayedHide 是两个 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 对话框“闪烁”问题需要做到以下两点:

  1. 显示 Loading 对话框之前先等待一段时间
  2. 隐藏 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 对话框的一种优化方式,避免对话框显示和隐藏间隔时间太短导致的“闪烁”现象。


http://www.ppmy.cn/news/1512683.html

相关文章

基于HarmonyOS的宠物收养系统的设计与实现(一)

基于HarmonyOS的宠物收养系统的设计与实现&#xff08;一&#xff09; 本系统是简易的宠物收养系统&#xff0c;为了更加熟练地掌握HarmonyOS相关技术的使用。 项目创建 创建一个空项目取名为PetApp 首页实现&#xff08;组件导航使用&#xff09; 官方文档&#xff1a;组…

一款免费的开源支付网关系统,支持X宝、某信、云闪付等多种支付方式,提供收单、退款、聚合支付、对账、分账等功能(附源码)

前言 在数字化浪潮中&#xff0c;电子-商务和移动支付迅速崛起&#xff0c;支付系统成为企业运营的核心组件。然而&#xff0c;现有支付处理方案常面临成本高、集成复杂、系统耦合度高等挑战。 这些问题不仅增加了企业负担&#xff0c;也制约了业务的快速迭代和创新。市场迫切…

数据结构预备知识

目录 1. 什么是集合框架 2. 什么是数据结构 3. 容器背后对应的数据结构 4. 相关java知识 5. 时间复杂度 6. 空间复杂度 7. 包装类 7.1 装箱和拆箱 7.2 阿里面试题&#xff1a; 8. 泛型 8.1 泛型的语法 8.2 泛型怎样编译 9. 泛型的上界 9.1 语法 9.2 泛型方法 1.…

2024年“研究生科研素养提升”系列公益讲座在线测试

一、单选题 1、SCI是指&#xff08; &#xff09; A 、中国科学引文索引 ✓ B 、科学引文索引Science Citation Index C 、社会科学引文索引 D 、国际科学引文索引 参考答案&#xff1a; B 答案解析&#xff1a;SCI是指科学引文索引 Science Citation Index 2、下列哪个数…

使用 lateral view explode(col1)后行数变少了,bug排查

问题复现 查询该表结果为100行 select count(1) as cnt from ( select distinct a,b,c from pageAds ) 查询下表条数为90行 select count(1) as cnt from ( select distinct a,b,c from pageAds ) lateral view explode(split(a,,)) adTable as d 思考&#xff1a;第二条语…

学习使用pymodbus模块实现Modbus通讯

Modbus是一种工业领域广泛使用的通信协议&#xff0c;而PyModbus是一个在Python中实现Modbus通信的库。它支持多种Modbus模式&#xff0c;包括RTU&#xff08;通过串行线路&#xff09;&#xff0c;ASCII和TCP/IP。 1. 建立通讯 from pymodbus.client import ModbusTcpClient…

synchronized锁状态和底层实现

锁的状态 无锁状态&#xff0c;偏向锁状态&#xff0c;轻量级锁状态&#xff0c;重量级锁状态。锁的状态是通过对象监视器在对象头中的字段来表明的&#xff0c;四种状态会随着竞争的情况逐渐升级。偏向锁、轻量级锁、重量级锁是针对synchronized的状态。 这四种状态都不是 Jav…

开始尝试从0写一个项目--后端(四)

借出&#xff0c;归还&#xff0c;管理 学生和管理员登录分离 学生登录到用户界面 管理员到后台 后台和用户分离 添加代码 sems-server/src/main/java/com/ljc/controller/user/UserStudentController.java package com.ljc.controller.user;import com.ljc.constant.Jwt…