Android骨架屏效果的实现与原理解析

0、前言

大家在使用淘宝的时候，如下图所示有遇到这样的效果，其会只展示一部分骨架大致图，等数据加载完毕之后再展示真正的页面数据。与菊花图相比起来，这样的实现能更好的提升用户的体验，这种效果称做：Skeleton Screen Loading，中文叫做骨架屏。

1、骨架屏的实现方式

在现在主流的骨架屏实现效果中有两种方式：

• 通过View或者Adapter的替换来实现骨架屏效果。可以参考ShimmerRecyclerView、Skeleton及spruce-android。

• 自定义一个View来对布局中的View进行一层包裹，当加载数据时则根据View来绘制骨架，否则显示正常UI，参考Skeleton Android。

这些开源库中，自己比较喜欢今天Skeleton这个开源库，总结了有如下一些优缺点：

优点：

1. 代码方案实现及使用方式简单，通过替换View和Adapter实现效果，使用Builder设计模式来构造。
2. 代码耦合程度不高。没有复杂的设计模式，使得代码结构清晰明了。
3. 骨架屏的效果使用相对于较灵活，可以对整个布局实现骨架屏效果，也可以对单一View实现骨架屏效果。

缺点：

1. 需要对每个骨架屏效果单独写一套xml布局。
2. 使用的removeView和addView对 原有布局的view进行替换，存在一定的风险性
3. 必须清晰的知道所bind的View类型，存在一定的类型转化问题。
4. 依赖了shimmerlayout第三方库

2、Skeleto