Android开源 Skeleton 骨架屏

news2024/12/24 3:07:16

目录

一、简介

二、效果图

三、引用 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.coloradmin.cn/o/840256.html

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

相关文章

【Linux命令详解 | ls命令】Linux系统中用于列出目录内容的命令

文章标题 简介一,参数列表二,使用介绍1. 基本使用2. 列出文件详细信息3. 列出所有文件4. 以易读的方式显示文件大小5. 只查看目录信息6. 递归列出所有子目录下的文件7. 按文件最后修改时间排序8. 反向排序9. 按文件大小排序10. 显示文件的inode号11. 在文…

STL空间配置器入门

STL简介   STL(Standard Template Library,标准模板库),从根本上说,STL是一些“容器”的集合,这些“容器”有list,vector,set,map等,STL也是算法和其他一些组件的集合。 谈及组件&#xff0c…

【雕爷学编程】Arduino动手做(186)---WeMos ESP32开发板5

37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的。鉴于本人手头积累了一些传感器和执行器模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的&#x…

队伍发展有一定的规律 队伍不好带

队伍发展有一定的规律,队伍不好带 塔克曼是研究组织行为学的 1977年提出了团队发展模型 有一定的借鉴意义 趣讲大白话:社会变了,带队伍不好带了 【趣讲信息科技247期】 **************************** 塔克曼团队发展的五个阶段是:…

数据结构——双链表

我宁愿靠自己的力量,打开我的前途,而不愿求有力者垂青 文章目录 双线向链表各接口函数名或变量名 双向链表接口实现源码 快速索引【头文件及函数声明】 双向链表接口实现 双向链表的构造分析 双向链表的定义及初始化 双向链表的插入和删除 往期…

网络安全设备及部署

什么是等保定级? 之前了解了下等保定级,接下里做更加深入的探讨 文章目录 一、网路安全大事件1.1 震网病毒1.2 海康威视弱口令1.3 物联网Mirai病毒1.4 专网 黑天安 事件1.5 乌克兰停电1.6 委内瑞拉电网1.7 棱镜门事件1.8 熊猫烧香 二、法律法规解读三、安…

SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--具体功能实现【三】

文章目录 SSM--功能实现实现功能04-添加家居信息需求分析/图解思路分析代码实现注意事项和细节 实现功能05-显示家居信息需求分析/图解思路分析 代码实现 SSM–功能实现 实现功能04-添加家居信息 需求分析/图解 思路分析 完成后台代码从dao -> serivce -> controller ,…

C++学习笔记总结练习:迭代器

迭代器 1 基础 头文件 #include<iterator>迭代器范围 begin和end被容器使用了&#xff0c;可以用front和back作为游标。 左闭右开区间 [begin,end)使用迭代器进行遍历 遍历方法有三种&#xff1a;下标遍历、范围for遍历、迭代器遍历 container c; first c.begin(); l…

【项目 计网2】4.4网络模型 4.5协议 4.6网络通信的过程

文章目录 4.4网络模型OSI七层参考模型TCP/IP四层模型&#xff08;常用&#xff09;简介四层介绍 4.5协议简介常见协议UDP协议TCP协议IP协议以太网帧协议&#xff08;MAC地址封装&#xff09;ARP协议&#xff08;IP->MAC&#xff09; 4.6网络通信的过程封装分用 4.4网络模型 …

【Spring】使用注解存储Bean对象

目录 一、配置扫描路径&#xff08;使用注解的方式存对象的前提&#xff09; 二、使用类注解存储Bean对象 1、使用五大类注解存储Bean对象 2、为什么要这么多的类注解&#xff1f; 2.1、五大类注解之间的关系 3、获取Bean对象时的默认命名规则 三、使用方法注解来存储…

【Paper】2020_网络化多智能体系统的事件触发一致性研究_徐勇

徐勇. 网络化多智能体系统的事件触发一致性研究[D].浙江大学,2020.DOI:10.27461/d.cnki.gzjdx.2020.001385. 文章目录 5 已知 DoS 攻击策略下多智能体系统的事件触发安全一致性分析5.1 引言5.2 数学模型与问题描述5.3 控制器和事件触发条件的设计5.5 数值仿真程序 Main.m程序 M…

.locked勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

引言&#xff1a; 当今社会&#xff0c;互联网的迅速发展为我们的工作和生活带来了便利&#xff0c;但同时也伴随着越来越多的网络威胁。勒索病毒如.locked勒索病毒便是其中的代表之一。.locked勒索病毒利用高级加密算法&#xff0c;将用户重要的数据文件锁定&#xff0c;要求…

IP路由基础+OSPF 基础

IP路由 RIB与FIB RIB&#xff1a;Routing Information Base&#xff0c;路由信息库 &#xff0c;路由器的控制平面 FIB&#xff1a;Forwarding Information Base&#xff0c;转发信息库&#xff0c;路由器的数据平面 路由信息库主要是记录直连路由以及协议宣告的路由信息&am…

Windows安装子系统Linux

Windows安装子系统(Linux ubuntu&#xff09; 安装条件步骤1.安装WSL命令2.设置Linux用户名和密码3.写个简单的.c程序看看4.如何互传文件 安装条件 Windows 10版本2004及更高的版本才能安装。 步骤 1.安装WSL命令 我们可以使用WSL来安装子系统 Linux ubuntu(默认是这个)。 …

思科2021笔试题

笔试时间&#xff1a;2020.09.07&#xff0c;19&#xff1a;00——21&#xff1a;00 岗位&#xff1a;嵌入式软件工程师 题型&#xff1a;数据结构4道&#xff0c;网络3道&#xff0c;操作系统3道&#xff0c;C4道&#xff0c;Java4道&#xff0c;python4道&#xff0c;数据库…

ORCA优化器浅析——CQueryContext对优化器的要求

从ORCA优化器浅析——重要主流程概述中可以知道进入真正优化器引擎执行流程之前需要对优化器提出要求&#xff0c;比如后面会提到的required columns、required sort orders等。而CQueryContext即是承载这些内容的类。首先CQueryContext类是通过PqcGenerate函数构造的&#xff…

深入学习JVM —— GC垃圾回收机制

前言 前面荔枝已经梳理了有关JVM的体系结构和类加载机制&#xff0c;也详细地介绍了JVM在类加载时的双亲委派模型&#xff0c;而在这篇文章中荔枝将会比较详细地梳理有关JVM学习的另一大重点——GC垃圾回收机制的相关知识&#xff0c;重点了解的比如对象可达性的判断、四种回收…

推荐一款老化测试软件 Monitor.Analog

1. 数据采集模块&#xff1a; 该模块负责与下位机设备通信&#xff0c;实时采集模拟量数据。支持多种通信协议&#xff0c;如Modbus、OPC等&#xff0c;以适应不同类型的设备。数据采集模块还需要具备异常数据处理功能&#xff0c;例如数据丢失、错误数据等。 2. 数据存储模块…

Linux命令200例:用Look一个进行文本搜索工具

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

Python简单应用V

题目 通过编写函数实现下述各题。 输入一字符串&#xff0c;各个子串之间按空白字符隔开&#xff0c;分别显式其中最长、最短子串&#xff0c;以及最大、最小字符。 输入单个字符&#xff0c;判断并显示该字符是否为大写英文字母、小写英文字母、非英文文字字符、空格、数字或…