Android开源 Skeleton 骨架屏

目录

一、简介

二、效果图

[三、引用 Skeleton](#三、引用 Skeleton)

[添加jitpack 仓库](#添加jitpack 仓库)

添加依赖:

[四、使用 Skeleton](#四、使用 Skeleton)

[1、VIew 骨架屏使用 ViewSkeletonScreen](#1、VIew 骨架屏使用 ViewSkeletonScreen)

[2、列表类View 骨架屏 RecyclerViewSkeletonScreen、GridViewSkeletonScreen、 ListViewSkeletonScreen](#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

java 复制代码
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

java 复制代码
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欢迎大家提出。++

相关推荐
OpenCSG13 小时前
【活动预告】2025斗拱开发者大会,共探支付与AI未来
人工智能·ai·开源·大模型·支付安全
*才华有限公司*13 小时前
安卓前后端连接教程
android
科技新知13 小时前
大厂AI各走“开源”路
人工智能·开源
TGITCIC14 小时前
LLaVA-OV:开源多模态的“可复现”革命,不只是又一个模型
人工智能·开源·多模态·ai大模型·开源大模型·视觉模型·大模型ai
氦客14 小时前
Android Compose中的附带效应
android·compose·effect·jetpack·composable·附带效应·side effect
雨白14 小时前
Kotlin 协程的灵魂:结构化并发详解
android·kotlin
我命由我1234514 小时前
Android 开发问题:getLeft、getRight、getTop、getBottom 方法返回的值都为 0
android·java·java-ee·android studio·android jetpack·android-studio·android runtime
Modu_MrLiu14 小时前
Android实战进阶 - 用户闲置超时自动退出登录功能详解
android·超时保护·实战进阶·长时间未操作超时保护·闲置超时
Jeled15 小时前
Android 网络层最佳实践:Retrofit + OkHttp 封装与实战
android·okhttp·kotlin·android studio·retrofit
信田君952715 小时前
瑞莎星瑞(Radxa Orion O6) 基于 Android OS 使用 NPU的图片模糊查找APP 开发
android·人工智能·深度学习·神经网络