android Skeleton Screen 骨架屏

阅读 2

骨架屏简介

骨架屏可以理解为是当数据还未加载进页面之前,页面的一个空白的样板。一个简单的关键渲染路径。在看到在页面完全渲染完成之前,用户会看到一个样式简单,描绘了当前页面的大致框架的骨架屏页面,然后骨架屏中各个占位部分被实际资源完全替换,这个过程中用户会觉得内容正在逐渐加载即将呈现,降低了用户的焦躁情绪,使得加载过程主观上变得流畅。

基本使用

build.gradle引入

dependencies {
       implementation ’com.ethanhua:skeleton:1.1.2’
       implementation ’io.supercharge:shimmerlayout:2.1.0’
}

在列表页使用

skeletonScreen = Skeleton.bind(recyclerView)
                              .adapter(adapter)
                              .load(R.layout.item_skeleton_news)
                              .show();

View使用

skeletonScreen = Skeleton.bind(rootView)
                              .load(R.layout.layout_img_skeleton)
                              .show();

常用API

  • shimmer 是否展示光晕动画

  • count 在数据加载完成前 列表显示的个数,默认值10

  • color 光晕动画颜色 ,可以在values -color 加入自己需要的颜色

  • angle 加载光晕动画斜角读书(最大值30)

  • duration 光晕动画执行间隔时间

  • frozen 是否关闭列表的刷新

  • load 用于加载骨架屏占位布局

  • hide 隐藏骨架屏 ,用于数据加载完成前占位

  • show 显示骨架屏,用于数据加载完成前

接口SkeletonScreen 实现类:

  • RecyclerViewSkeletonScreen 用于列表
  • ViewSkeletonScreen 用于View

项目实战

在列表中使用

在数据加载前,绑定列表(RecyclerView)

skeletonScreen = Skeleton.bind(dataRecyclerView)
                //设置加载列表适配器 ,并且开启动画 设置光晕动画角度等 最后显示
                .adapter(storyPlatformAdapter).shimmer(true).angle(20)
                .frozen(false)
                .duration(1000)
                .count(10)
                .load(R.layout.item_skeleton_news)
                .show();​

数据加载成功后

//隐藏骨架屏
skeletonScreen.hide();
在普通页面中使用:

绑定布局View,数据加载结束之前show方法

skeletonScreen = Skeleton.bind(rootView)
        .load(R.layout.activity_view_skeleton)
        .duration(1000)
        .color(R.color.shimmer_color)
        .angle(0)
        .show();

在数据加载结束后调用hide方法

skeletonScreen.hide();
在View级别使用

绑定要占位的View,在图片加载开始前调用show方法

skeletonScreen = Skeleton.bind(imageView)
        .load(R.layout.layout_img_skeleton)
        .duration(1000)
        .color(R.color.shimmer_color_for_image)
        .show();

图片加载完后 调用hide方法

skeletonScreen.hide()
状态占位符 ViewReplacer

常用API: replace、 restore

代码:

初始化一个ViewReplacer,传入选择占位的View

//初始化
mViewReplacer = new ViewReplacer(findViewById(R.id.tv_content));

状态占位

//传入要显示的状态布局,比如加载,失败,设置等
mViewReplacer.replace(R.layout.layout_error);

显示/恢复原有View

mViewReplacer.restore();
各位看官,如果你觉得本文不错,请支持一下~