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.hqwc.cn/news/55974.html

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

相关文章

黑马程序员SpringMVC练手项目

目录 1、需求 2、项目准备 pom.xml SQL jdbc.properties log4j.properties applicationContext.xml spring-mvc.xml web.xml 3、工作流程 4、难点 项目已经上传到gitee:https://gitee.com/xzl-it/my-projects 1、需求 SpringMVC项目练习:数…

问题解决和批判性思维是软件工程的重要核心

软件工程的重心在于问题解决和批判性思维(合理设计和架构降低复杂度),而非仅局限于编程。 许多人误以为软件工程就只是编程,即用编程语言编写指令,让计算机按照这些指令行事。但实际上,软件工程的内涵远超…

Cilium系列-13-启用XDP加速及Cilium性能调优总结

系列文章 Cilium 系列文章 前言 将 Kubernetes 的 CNI 从其他组件切换为 Cilium, 已经可以有效地提升网络的性能. 但是通过对 Cilium 不同模式的切换/功能的启用, 可以进一步提升 Cilium 的网络性能. 具体调优项包括不限于: 启用本地路由(Native Routing)完全替换 KubeProx…

从零实现深度学习框架——Transformer从菜鸟到高手(一)

引言 💡本文为🔗[从零实现深度学习框架]系列文章内部限免文章,更多限免文章见 🔗专栏目录。 本着“凡我不能创造的,我就不能理解”的思想,系列文章会基于纯Python和NumPy从零创建自己的类PyTorch深度学习框…

关于win11 debian wsl 子系统安装启动docker一直starting,无法启动

首先我先说明,我的步骤都是按照官网步骤来的 通过官网的操作步骤 通过测试命令 sudo docker run hello-world得到下面的命令,我们通过启动命令 sudo service docker start 执行结果如下图 也就是说无法启动,一直显示在启动中 遇到这种情况…

设计模式行为型——备忘录模式

目录 什么是备忘录模式 备忘录模式的实现 备忘录模式角色 备忘录模式类图 备忘录模式举例 备忘录模式代码实现 备忘录模式的特点 优点 缺点 使用场景 注意事项 实际应用 什么是备忘录模式 备忘录模式(Memento Pattern)又叫做快照模式&#x…

使用docker搭建GPT服务

不用ChatGPT账号,不用API,直接免费使用上官方原版的GPT4.0! 这个操作主要使用的是GitHub上的一个开源项目freegpt。 通过docker把这个项目打包到本地电脑上,直接就能使用上原版GPT4.0。 第一步:下载Docker 下载网址:docker.com 根据自己的电脑系统下载对应的版本即可 下…

uniapp 中过滤获得数组中某个对象里id:1的数据

// 假设studentData是包含多个学生信息的数组 const studentData [{id: 1, name: 小明, age: 18},{id: 2, name: 小红, age: 20},{id: 3, name: 小刚, age: 19},{id: 4, name: 小李, age: 22}, ]; // 过滤获取id为1的学生信息 const result studentData.filter(item > ite…

Unity Shader:常用的C#与shader交互的方法

俗话说久病成医,虽然不是专业技术美术,但代码写久了自然会积累一些常用的shader交互方法。零零散散的,总结如下: 1,改变UGUI的材质球属性 有时候我们需要改变ui的一些属性,从而实现想要的效果。通常UGUI上…

【【萌新的STM32 学习-6】】

萌新的STM32 学习-6 BSP 文件夹,用于存放正点原子提供的板级支持包驱动代码,如:LED、蜂鸣器、按键等。 本章我们暂时用不到该文件夹,不过可以先建好备用。 CMSIS 文件夹,用于存放 CMSIS 底层代码(ARM 和 ST…

MySQL日期常见的函数

-- 获取当天日期 -- 2023-06-20 select curdate();-- 获取当天年月日时分秒 select now();-- 日期运算 -- 2024-06-20 17:04:17 select date_add(now(),interval 1 year);-- 日期比较 -- 0 select datediff(now(),now());-- 日期MySQL对于日期类型数据如何查询 -- 获取指定日期…

【C++】语法小课堂 --- auto关键字 typeid查看实际类型 范围for循环 空指针nullptr

文章目录 🍟一、auto关键字(C11)🍩1、auto的简介🍩2、auto的使用细则🚩auto与指针和引用结合起来使用🚩 在同一行定义多个变量 🍩3、auto不能推导的场景1️⃣auto不能作为函数的参数…