Android开源 Skeleton 骨架屏

这篇具有很好参考价值的文章主要介绍了Android开源 Skeleton 骨架屏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、简介

二、效果图

三、引用 Skeleton

添加jitpack 仓库

添加依赖:

四、使用 Skeleton

1、VIew 骨架屏使用  ViewSkeletonScreen

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


一、简介

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

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

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

二、效果图

Android开源 Skeleton 骨架屏,Android开源,android,开源Android开源 Skeleton 骨架屏,Android开源,android,开源

 

三、引用 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欢迎大家提出。文章来源地址https://www.toymoban.com/news/detail-627588.html

到了这里,关于Android开源 Skeleton 骨架屏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 各种Android ui 开源框架

    MaterialDesignExample - 本APP用来演示Material Design控件的使用。 https://www.aswifter.com/2015/07/02/Material-Design-Example-5/ , 使用说明。 InstaMaterial - InstalMaterial 项目(非常多的UI样式:ViewAnimator、RecyclerView、拍照), InstalMaterial学习笔记之Reveal效果。 NavigationDrawer-MaterialDesign - 一个Materia

    2024年04月28日
    浏览(42)
  • Telegram Android开源源码运行

    源码地址 https://github.com/DrKLO/Telegram 环境介绍 Android Studio版本至少3.4,或者直接去官网下载最新的 手机最低要求是Android 8 项目结构 TMessagesProj是电报通讯的核心代码,它是一个依赖库,包含了UI,默认启动页是LanuchActivity.java,登录页面是LoginActivity.java TMessagesProj_App 是要run的项目,

    2024年02月10日
    浏览(43)
  • Android开发者必须收藏的8个开源库,Android开发面试技能介绍

    听过很多人说Android学习很简单,做个App就上手了,工作机会多,毕业后也比较容易找工作。这种观点可能是很多Android开发者最开始入行的原因之一。 在工作初期,工作主要是按照业务需求实现App页面的功能,按照设计师的设计稿实现页面的效果。 在实现的过程中,总是会被

    2024年03月19日
    浏览(80)
  • 140款Android开源优秀项目源码

    BeautifulRefreshLayout-漂亮的美食下拉刷新 GitHub - android-cjj/BeautifulRefreshLayout at BeautifulRefreshForFood Material Design-动画风格的选项卡tab切换功能 GitHub - neokree/MaterialTabs: Custom Tabs with Material Design effects TwinklingRefreshLayout-支持下拉刷新和上拉加载的RefreshLayout,自带越界回弹效果 GitHub - lco

    2024年02月08日
    浏览(43)
  • Android 自定义开源库 EasyView

      这是一个简单方便的Android自定义View库,我一直有一个想法弄一个开源库,现在这个想法付诸实现了,如果有什么需要自定义的View可以提出来,不一定都会采纳,合理的会采纳,时间周期不保证,咱要量力而行呀,踏实一点。 1. 工程build.gradle 或 settings.gradle配置    代

    2024年02月06日
    浏览(37)
  • 开源Android apk转aab工具

    自动化将 apk 转为 aab 文件. 自动化实现打包 smali ,签名,安装. 配置文件(config.toml ) apk转aab命令 config.toml 为配置文件. aab 为指定将 apk 转为 aab 流程. 主要流程如下: 编译apk 将 smali 工程编译成 apk 并签名. 主要流程如下: 编译 upx压缩(可选) 在 target/release 下 压缩后 linux 平台二进制

    2024年02月12日
    浏览(51)
  • Android 酷炫的进度条开源库

    SeekBarWithIntervals: https://github.com/RameshBhupathi/SeekBarWithIntervals Android-ProgressViews: https://github.com/zekapp/Android-ProgressViews SlidingSquareLoaderView: https://github.com/steelkiwi/SlidingSquareLoaderView FuckingVolumeSlider: https://github.com/shellljx/FuckingVolumeSlider FunnyLoader: https://github.com/team-supercharge/FunnyLoader Sect

    2024年04月13日
    浏览(41)
  • android开源投屏工具scrcpy简介

    目录 一,初识scrcpy 1.1 scrcpy介绍 1.2 scrcpy特点 二,scrcpy指令说明 2.1 画面设置 2.1.1 缩小分辨率 2.1.2 修改画面比特率 2.1.3 限制画面帧率 2.1.4 画面裁剪 2.1.5 锁定屏幕朝向 2.2 屏幕录制 2.3  连接方式 2.3.1 无线 2.3.2 多设备 2.4 窗口设置 2.4.1  标题 2.4.2 位置和大小 2.4.3 无边框 2.4.

    2024年02月06日
    浏览(47)
  • Android UI--开源项目IndexableListView(字母索引)

    setContentView(R.layout.main); // 初始化一些数据 mItems = new ArrayList(); mItems.add(“Diary of a Wimpy Kid 6: Cabin Fever”); mItems.add(“Steve Jobs”); mItems.add(“Inheritance (The Inheritance Cycle)”); mItems.add(“11/22/63: A Novel”); mItems.add(“The Hunger Games”); mItems.add(“The LEGO Ideas Book”); mItems.add(“Explosive Ei

    2024年04月23日
    浏览(31)
  • Android GitHub开源库CalendarView的使用

    学习并记录一下,使用GitHub上面的日历控件开源库CalendarView,地址:https://github.com/huanghaibin-dev/CalendarView 实现效果如下: 添加Gradle依赖 实现MultiMonthView,可多选 比如我这里的四个画笔分别对应的含义: 布局代码使用示例 实现点击()左右箭头实现左右翻页功能 可分别调用

    2024年04月25日
    浏览(137)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包