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.rhkb.cn/news/78695.html

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

相关文章

无人机电力巡检方案在电网安全与维护中的应用

目前,无人机技术已经在各行各业都有广泛的应用,其中之一就是在电力巡检中的应用。无人机电力巡检方案以其高效、安全、精准的特点,为电网安全与维护带来了重大突破和进步。 一、无人机电力巡检方案是高效巡检的利器 传统的电力巡检方式需要人…

K8s集群安全机制

1.访问K8s集群的时候,需要经过三个步骤完成具体操作 (1)认证(2)鉴权(授权)(3)准入控制 进行访问的时候,过程中都要经过apiserver,apiserver做统…

C++拷贝wstring到wchar_t*中踩的坑

使用wchar_t指针将wstring中的数据拿出来,发现释放的时候异常,不是深拷贝和浅拷贝的问题 首先先看看string怎末复制到char中,代码如下 string str1"\"0.2.0\"";char* tnew char[str.size()1];memcpy(t, str1.c_str(), s…

SPI通信协议

简介 SPI有主、从两种模式,通常由一个主模块和一个或多个从模块组成(SPI不支持多主机),主 模块选择一个从模块进行同步通信,从而完成数据的交换。提供时钟的为主设备(Master),接 收时…

arm交叉编译lmbench

一、下载lmbench www.bitmover.com/lmbench 官网下载,http://www.bitmover.com/lmbench/lmbench3.tar.gz 我没有下载下来,找的别人的百度云下载 链接: https://pan.baidu.com/s/1tGo1clCqY-jQPN8G1eWSsg 提取码: f6jd 二、修改makefile 修改三个文件…

Vue2:组件基础(下)

Vue2:组件基础(下) Date: April 12, 2023 Sum: props验证、计算属性、自定义时间、组件上的v-model、任务列表案例 Tags: * 目标: 能够知道如何对 props 进行验证 能够知道如何使用计算属性 令能够知道如何为组件自定义事件 …

Matlab中图的最短路径

前言: 图的基本概念: 若想简单绘制图可以利用此网站: 左上角Undirected/Directed是无向图/有向图 左边 0-index ,1-index为0下标,1下标。 Node Count为节点个数 Graph Data:最初尾节点的名称&#xff…

2023华数杯数学建模A题思路 - 隔热材料的结构优化控制研究

# 1 赛题 A 题 隔热材料的结构优化控制研究 新型隔热材料 A 具有优良的隔热特性,在航天、军工、石化、建筑、交通等 高科技领域中有着广泛的应用。 目前,由单根隔热材料 A 纤维编织成的织物,其热导率可以直接测出;但是 单根隔热…

【C# 基础精讲】C# 开发环境搭建(Visual Studio等)

安装C#开发环境是开始学习和使用C#编程的第一步。目前,最常用的C#开发环境是Microsoft Visual Studio,它是一套强大的集成开发环境(IDE),提供了丰富的工具和功能,使开发C#应用程序变得更加便捷。以下是安装…

Docker极速安装Jenkins

安装 Jenkins 是一个常见的任务,使用 Docker 进行安装可以简化该过程并确保环境一致性。以下是在 Docker 中安装 Jenkins 的详细步骤: 安装 Docker: 首先,请确保您已在目标机器上安装了 Docker。根据您的操作系统,可以在 Docker 官…

CCF-CSP 29次 第三题【202303-3 LDAP】(多个STL+递归)

计算机软件能力认证考试系统 #include <iostream> #include <cstring> #include <algorithm> #include <vector> #include <unordered_map> #include <string>using namespace std;typedef long long LL;const int N 2510, M 510;int n…

Windows下安装Kafka(图文记录详细步骤)

Windows下安装Kafka Kafka简介一、Kafka安装前提安装Kafka之前&#xff0c;需要安装JDK、Zookeeper、Scala。1.1、JDK安装&#xff08;version&#xff1a;1.8&#xff09;1.1.1、JDK官网下载1.1.2、JDK网盘下载1.1.3、JDK安装 1.2、Zookeeper安装1.2.1、Zookeeper官网下载1.2.…

51单片机程序烧录教程

STC烧录步骤 &#xff08;1&#xff09;STC单片机烧录方式采用串口进行烧录程序&#xff0c;连接的方式如下图&#xff1a; &#xff08;2&#xff09;所以需要先确保USB转串口驱动是识别到&#xff0c;且驱动运行正常&#xff1b;是否可通过电脑的设备管理器查看驱动是否正常…

接口的顶级理解

目录 1.基本介绍 1.1定义接口 1.2接口使用 2.接口特性 3.实现多个接口 4.接口间的继承 5.接口使用实例 5.1对象比大小 5.1.1方法1&#xff1a;Comparable 接口法 5.1.2构造比较器&#xff08;Comparator接口法&#xff09; 5.2对象数组排序 5.2.1 实现 Comparable 接…

【力扣刷题 | 第二十四天】

目录 前言&#xff1a; 1049. 最后一块石头的重量 II - 力扣&#xff08;LeetCode&#xff09; 494. 目标和 - 力扣&#xff08;LeetCode&#xff09; 总结&#xff1a; 前言&#xff1a; 今天我们依然暴打动态规划 1049. 最后一块石头的重量 II - 力扣&#xff08;LeetCod…

每天一道leetcode:剑指 Offer 53 - II. 0~n-1中缺失的数字(适合初学者二分查找)

今日份题目&#xff1a; 一个长度为n-1的递增排序数组中的所有数字都是唯一的&#xff0c;并且每个数字都在范围0&#xff5e;n-1之内。在范围0&#xff5e;n-1内的n个数字中有且只有一个数字不在该数组中&#xff0c;请找出这个数字。 示例1 输入: [0,1,3] 输出: 2 示例2 …

uniapp 返回上一页并刷新

如要刷新的是mine页面 在/pages/mine/improveInfo页面修改信息&#xff0c;点击保存后跳转到个人中心&#xff08;/pages/mine/index&#xff09;页面并刷新更新数据 点击保存按钮时执行以下代码&#xff1a; wx.switchTab({url: /pages/mine/index }) // 页面重载 let pages …

在线文本转语音播放 (TTS)

具体请前往&#xff1a;在线文本转语音播放(TTS)

彩虹云商城搭建完整教程 完整的学习资料

彩虹云商城搭建完整教程 完整的学习资料提供给大家学习 随着电子商务的快速发展&#xff0c;越来越多的企业开始意识到开设一个自己的电子商城对于销售和品牌推广的重要性。然而&#xff0c;选择一家合适的网站搭建平台和正确地构建一个商城网站并不是一件容易的事情。本文将为…

Python操作MySQL将数据库表中的数据导出到excel

Author: liukai 2810248865qq.com Date: 2022-08-18 04:28:52 LastEditors: liukai 2810248865qq.com LastEditTime: 2023-06-29 09:35:25 FilePath: \PythonProject01\Python操作MySQL数据库及excel将数据库表中的数据导出到excel中.py Description: 这是默认设置,请设置custo…