Android开源 Skeleton 骨架屏

目录

一、简介

二、效果图

三、引用 Skeleton

添加jitpack 仓库

添加依赖:

四、使用 Skeleton

1、VIew 骨架屏使用  ViewSkeletonScreen

2、列表类View 骨架屏 RecyclerViewSkeletonScreen、GridViewSkeletonScreen、  ListViewSkeletonScreen


一、简介

骨架屏的作用是在网络请求较慢时,提供基础占位,当数据加载完成后,恢复数据展示。它可以给用户一种很自然的过渡,避免页面长时间白屏或者闪烁等情况。

Skeleton 除实现静态的骨架图展示和新增了骨架屏闪烁动画,骨架屏动画是指在页面加载时,先显示一个简单的页面框架(骨架屏),然后再加载实际的页面内容。这样可以让用户在等待页面加载的过程中,先看到一个基本的页面结构,避免了空白页面的尴尬和用户的无知情况。骨架屏动画的优点是可以提高用户体验,让用户感觉页面加载更快,同时也可以减轻服务器的压力。

在展示骨架屏的同时增加动画,可以减少因直接展示静态骨架屏的单一感觉,还可以增加界面的动态性,进一步减少用户在等待数据加载时的时间,从而提高用户体验感。

二、效果图

 

三、引用 Skeleton

添加jitpack 仓库

Android Gradle Plugin 为 v7.1.0 以下版本:进入项目根目录,打开 “build.gradle” 文件,在 “allprojects” 中加入如下代码:

...

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        mavenCentral()
        google()
    }
}

当您的 Android Gradle Plugin 为 v7.1.0 或以上版本:进入项目根目录,打开 “settings.gradle” 文件,在 “dependencyResolutionManagement” 中加入如下代码:

...

dependencyResolutionManagement {         repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)

        repositories {   

                  maven { url 'https://jitpack.io' }

                  mavenCentral()

                  google()

         }

}

添加依赖:

进入 “app” 目录,打开 “build.gradle” 文件,在 “dependencies” 中添加 :

...

dependencies {

...

implementation "com.gitee.ym521:skeleton:1.2.0"

}

四、使用 Skeleton

当前 skeleton支持两种状态:View和列表类View。

1、VIew 骨架屏使用  ViewSkeletonScreen

ViewSkeletonScreen viewSkeletonScreen  = Skeleton.bind(view) //作用布局 .load(R.layout.skeleton_view_item) //骨架屏布局 自定义 必须填写.angle(20)  //流光动画 斜率 有默认值.duration(1000)  //动画周期时长 (一次动画时长) 有默认值.color(R.color.white) //流光动画 颜色 有默认值viewSkeletonScreen.show() //显示骨架屏viewSkeletonScreen.hide() //隐藏骨架屏 可以多次调用

2、列表类View 骨架屏 RecyclerViewSkeletonScreen、GridViewSkeletonScreen、  ListViewSkeletonScreen


RecyclerViewSkeletonScreen recyclerViewSkeletonScreen = Skeleton.bind(view) //骨架屏作用recyclerView 控件  必须填写.load(R.layout.skeleton_view_item)   //骨架屏item 布局Id  必须填写.adapter(adapter)  //骨架屏 结束后的正常数据的适配器 必须填写.angle(20)  //流光斜率 有默认值.duration(1000) //流光动画 时长 有默认值.count(10)  //骨架屏 item 个数 有默认值.color(R.color.white) //流光动画 颜色 有默认值.shimmer(true)  //是否开启流光动画 默认开启recyclerViewSkeletonScreen.show() //显示骨架屏recyclerViewSkeletonScreen.hide() //隐藏 骨架屏显示 .adapter(adapter) 内的正常数据  不建议多次调用recyclerViewSkeletonScreen.dismiss() //隐藏 骨架屏显示 .adapter(adapter) 内的正常数据  可以多次调用 

GridViewSkeletonScreen、  ListViewSkeletonScreen 和RecyclerViewSkeletonScreen设置一致,但是需要注意:RecyclerViewSkeletonScreen 的作用recyclerView 最好在显示骨架屏前设置layoutManager。

提示:RecyclerViewSkeletonScreen、GridViewSkeletonScreen、  ListViewSkeletonScreen 如果是请求回调方法\函数内关闭骨架屏,建议使用dismiss() 。可以避免在分页加载时频繁因调用hide()造成列表闪烁。 

Kotlin 就不再展示示例,能写kotlin 应该可以根据java示例 自己转换kotlin。

 

希望您给博主一些鼓励(点赞、关注、收藏),如果这个Skeleton有BUG欢迎大家提出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/31119.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是DNS的缓存?

DNS 缓存是一个临时的数据库,存储在计算机或网络设备(如路由器)上,用于保存最近的 DNS 查询结果。这种缓存机制可以加速后续的相同查询,因为设备可以直接从缓存中提取先前的查询结果,而不需要再次到外部的 …

操作系统 -- 进程间通信

一、概述 进程经常需要与其他进程通信。例如,在一个shell管道中,第一个进程的输出必须传送给第二个进程,这样沿着管道传递下去。因此在进程之间需要通信,而且最好使用一种结构良好的方式,不要使用中断。在下面几节中&…

GPU虚拟化理解包含直通,k8s安装,GPU-manager

什么是VGPU? vGPU,即真正意义上的GPU虚拟化方案,就是将一块GPU卡的计算能力进行切片,分成多个逻辑上虚拟的GPU,以vGPU为单位分配GPU的计算能力, 并将单块GPU卡分配给多台虚拟机使用,使得虚拟机能够运行3D…

日常开发中Git命令指北

Git基本操作 创建化仓库 mkdir 目录 cd 目录 git init配置本地仓库 # 配置用户名,邮箱 git config user.name "cxf" git config user.email "1969612859qq.com" # 查看本地配置(小写的 L) git config -l # 重置配置&a…

Linux下 时间戳的转化

Linux下一般用date 记录当前时间,尤其是我们需要保存测试log的时候,或者设计一个跑多长时间的脚本都需要时间戳。下面看一下平时最常用的几种写法 1 date “%Y-%m-%d %H:%M” 显示具体时间 2 修改时间 date -s 3 date %s :当前时间的时间戳 显示具体时…

远程通信-RPC

项目场景: 在分布式微服务架构中,远程通信是最基本的需求。 常见的远程通信方式,有基于 REST 架构的 HTTP协议、RPC 框架。 下面,从三个维度了解一下 RPC。 1、什么是远程调用 2、什么是 RPC 3、RPC 的运用场景和优 什么是远程调用…

【效率提升-Perl脚本】根据Verilog文件自动生成tb文件

文章目录 Verilog端口文件(仅做示范用)对应的tb文件相应代码 在数字IC设计过程中,根据顶层生成testbench时存在很多重复性工作,因此为了提高工作效率,特地开发此脚本。 相应的python脚本见链接: 【效率提升…

单机游戏防破解方案解析

近年来,游戏市场用户规模趋于稳定,游戏市场进入了存量时代,各赛道“人满为患”,如何在一片红海中站稳脚跟成了厂商的必修课。 而在快节奏的社会环境下,脱离了网游社交粘性,主打清爽、自由的单机游戏&#…

Java训练六

目录 一、除数不能为0 二、校验年龄格式 三、终端循环 四、 计算最大公约数 一、除数不能为0 使用静态变量、静态方法以及throws关键字,实现当两个数相除且除数为0时,程序会捕获并处理抛出的ArithmeticException异常(算术异常&#xff09…

动手学深度学习(三)线性神经网络—softmax回归

分类任务是对离散变量预测,通过比较分类的概率来判断预测的结果。 softmax回归和线性回归一样也是将输入特征与权重做线性叠加,但是softmax回归的输出值个数等于标签中的类别数,这样就可以用于预测分类问题。 分类问题和线性回归的区别&#…

[YAPI]导出API文档

1.登录点击进去,点击项目2.点击接口,点击编辑,划到最下面,开启开放接口3.点击数据管理, 选择你要的数据导出格式,点击公开接口, 导出完别忘记关闭,防止别人导的时候将你开启的 也一并下载下来

opencv 基础54-利用形状场景算法比较轮廓-cv2.createShapeContextDistanceExtractor()

注意:新版本的opencv 4 已经没有这个函数 cv2.createShapeContextDistanceExtractor() 形状场景算法是一种用于比较轮廓或形状的方法。这种算法通常用于计算两个形状之间的相似性或差异性,以及找到最佳的匹配方式。 下面是一种基本的比较轮廓的流程&…

点的复合运动

一、问题所在 对于复合运动中的牵连运动一直很蒙,之前做题的时候都是靠经验,比如圆盘选择圆心做动系原点、连杆选择牵连点做原点等,今天重新整理了一下。 牵连运动的定义是动系相对于定系的运动,这个定义就很模糊。如果是指动系…

调整项目符号/项目编号与文本的距离

百度知道多年前的答案是调整标尺,我的PPT里没有标尺 调节悬挂缩进即可

flutter开发实战-实现左右来回移动的按钮引导动画效果

flutter开发实战-实现左右来回移动的按钮引导动画效果 最近开发过程中需要实现左右来回移动的按钮引导动画效果 一、动画 AnimationController用来控制一个或者多个动画的正向、反向、停止等相关动画操作。在默认情况下AnimationController是按照线性进行动画播放的。Animati…

Vite 创建 Vue项目之后,eslint 错误提示的处理

使用 npm create vuelatest创建 vue 项目(TS)之后,出现了一些 eslint 错误提示,显然,不是代码真实的错误,而是提示搞错了。 vuejs/create-vue: 🛠️ The recommended way to start a Vite-pow…

勘探开发人工智能技术:机器学习(3)

0 提纲 4.1 logistic回归 4.2 支持向量机(SVM) 4.3 PCA 1 logistic回归 用超平面分割正负样本, 考虑所有样本导致的损失. 1.1 线性分类器 logistic 回归是使用超平面将空间分开, 一边是正样本, 另一边是负样本. 因此, 它是一个线性分类器. 如图所示, 若干样本由两个特征描…

FPGA应用学习-----FIFO双口ram解决时钟域+asic样机的时钟选通

60m写入异步ram,再用100M从ram中读出 写地址转换为格雷码后,打两拍和读地址判断是否空产生。相反读地址来判断是否满产生。 分割同步模块 asic时钟的门控时钟,fpga是不推荐采用门控时钟的,有很多方法移除fpga的时钟选通。 如果是a…

天花板级,Python接口自动化测试-接口关联封装调用(实例)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 流程相关的接口&a…

docker基本使用方法

docker使用 1. Docker 介绍 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。Docker 使您能够将应用程序与基础架构分开,从而可以快速交付软件。通过利用 …