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

1、骨架屏的实现方式

一个见的股价屏效果

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

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

优点：

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

缺点：

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

2、Skeleton解读

一、Skeleton的使用方式

展示骨架屏效果：

1
2
3
4
5
6
7
8
View rootView = findViewById(R.id.rootView);
skeletonScreen = Skeleton.bind(rootView)
           .load(R.layout.activity_view_skeleton)//骨架屏UI
           .duration(1000)//动画时间，以毫秒为单位
           .shimmer(true)//是否开启动画
           .color(R.color.shimmer_color)//shimmer的颜色
           .angle(30)//shimmer的倾斜角度
           .show();

关闭骨架屏效果并展示原有View：

1
skeletonScreen.hide()

流程：

1. 选择需要替换的目标view
2. 将骨架效果xml与目标view进行绑定
3. 添加一些效果属性，比如：动画时间、是否开启展示动画、动画颜色等
4. 在合适的实际关闭骨架屏效果

二、Skeleton源码实现

Skeleton提供两个绑定方法，分别绑定普通View与RecyclerView，分别返回对应的Builder

1
2
3
4
5
6
7
8
public class Skeleton {
    public static RecyclerViewSkeletonScreen.Builder bind(RecyclerView recyclerView) {
        return new RecyclerViewSkeletonScreen.Builder(recyclerView);
    }
    public static ViewSkeletonScreen.Builder bind(View view) {
        return new ViewSkeletonScreen.Builder(view);
    }
}

我们首先来看看如何实现与普通View绑定，构造方法中传入目标View，并对shimmer动画效果设置默认的颜色，在Builder里面我们可以看到各种相关参数的设定。

1
2
3
4
public Builder(View view) {
	this.mView = view;
	this.mShimmerColor = ContextCompat.getColor(mView.getContext(), R.color.shimmer_color);
  }

接下来再到show的步骤，主要实现还是由ViewSkeletonScreen来实现

1
2
3
4
5
public ViewSkeletonScreen show() {
    ViewSkeletonScreen skeletonScreen = new ViewSkeletonScreen(this);
    skeletonScreen.show();
    return skeletonScreen;
}

其中ViewSkeletonScreen与绑定的RecyclerViewSkeletonScreen都实现了SkeletonScreen接口，SkeletonScreen有两个接口方法分别是 

void show();
void hide();

对于ViewSkeletonScreen.show()进入源码，这里出现一个比较重要的类ViewReplacer，等下再进行解析，通过show的源码清楚的知道逻辑：
1、生成骨架效果View
2、利用生成的View替换目标View。
其中生成骨架效果View阶段主要还是通过LayoutInflater去加载传入mSkeletonResID

1
2
3
4
5
6
7
@Override
public void show() {
       View skeletonLoadingView = generateSkeletonLoadingView();
       if (skeletonLoadingView != null) {
           mViewReplacer.replace(skeletonLoadingView);
       }
   }

接下来主要讲解ViewReplacer类，其构造方法传入目标View

1
2
3
4
5
6
public ViewReplacer(View sourceView) {
     mSourceView = sourceView;
     mSourceViewLayoutParams = mSourceView.getLayoutParams();
     mCurrentView = mSourceView;
     mSourceViewId = mSourceView.getId();
 }

其比较重要的方法有两个：replace() 和 restore() 这两个方法分别为SkeletonScreen 的show()和hide()的最终实现，首先看replace()方法，有两个方法重载，分别传入targetViewResID或者targetView，最终还是会走到replace(View targetView)中。
其主要逻辑为：

1. 判断所替换的View和骨架屏效果View是否为同一个View
2. remove掉在父布局中的目标View
3. 将骨架屏效果View添加到目标View的父布局中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
public void replace(int targetViewResID) {
       if (mTargetViewResID == targetViewResID) {
           return;
       }
       if (init()) {
           mTargetViewResID = targetViewResID;
           replace(LayoutInflater.from(mSourceView.getContext()).inflate(mTargetViewResID, mSourceParentView, false));
       }
   }

   public void replace(View targetView) {
       if (mCurrentView == targetView) {
           return;
       }
       if (targetView.getParent() != null) {
           ((ViewGroup) targetView.getParent()).removeView(targetView);
       }
       if (init()) {
           mTargetView = targetView;
           mSourceParentView.removeView(mCurrentView);
           mTargetView.setId(mSourceViewId);
           mSourceParentView.addView(mTargetView, mSourceViewIndexInParent, mSourceViewLayoutParams);
           mCurrentView = mTargetView;
       }
   }

在执行添加到目标View的父布局中，有执行一个init方法，主要做两件事：

1. 获取目标View的父View
2. 找到目标View在父View 中的位置索引，为之后添加骨架屏View到父View中做铺垫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private boolean init() {
     if (mSourceParentView == null) {
         mSourceParentView = (ViewGroup) mSourceView.getParent();
         if (mSourceParentView == null) {
             Log.e(TAG, "the source view have not attach to any view");
             return false;
         }
         int count = mSourceParentView.getChildCount();
         for (int index = 0; index < count; index++) {
             if (mSourceView == mSourceParentView.getChildAt(index)) {
                 mSourceViewIndexInParent = index;
                 break;
             }
         }
     }
     return true;
 }

至此对普通View的骨架屏效果实现流程已经完全梳理完成，那对于RecyclerView呢？其实两者实现逻辑差不多，主要有两个差异：

  1. 在RecyclerViewSkeletonScreen的Builder中，相比ViewSkeletonScreen多了一个adapter()方法，传入目标RecyclerView的Adapter
  2. 在show的时候对目标RecyclerView的adapter进行替换，使用骨架屏效果的adapter。hide的时候恢复为原先的Adapter

3、总结

  1. Skeleton的原理主要是通过替换目标View和RecyclerView的Adapter
  2. 在Skeleton的使用过程中最需要关心的两个问题是：show()和hide()的时机
  3. 对于整个页面的骨架屏效果实现，个人推荐在布局中添加一个全屏的空View盖在原先内容上
  4. 注意一些异常情况下的hide()，要不然整个页面就“假死”状态了。

参考：
https://juejin.im/post/5c789a4ce51d457c042d3b31