骨架屏（Skeleton Screen）在Android中的应用

 本文已授权「玉刚说」微信公众号独家发布

 在如今获取用户成本越来越高的情况下，好的用户体验能够更好的留住用户。为了提升产品的用户体验，各种技术层出不穷，其中，尤以菊花图以及由它衍生出的各种加载动画最为突出。
 对于菊花图，想必是又爱又恨。而如今有了比菊花图设计体验更棒的方法，即常看到的Skeleton Screen Loading，中文叫做骨架屏。
 那什么是骨架屏尼？它的语义如下：

即表示在页面完全渲染完成之前，用户会看到一个占位的样式，用以描绘了当前页面的大致框架，加载完成后，最终骨架屏中各个占位部分将被真实的数据替换。

 其效果图如下：

 本着不重复造轮子的思想，从GitHub上找了一些骨架屏的实现。当然也可以自己来实现。其最核心就是占位和属性动画的实现。

• 通过View或者Adapter的替换来实现骨架屏是最普遍的方案，该方案需要单独为骨架屏页面进行布局，如果页面过多或者比较复杂，写起来就还是蛮繁琐的。具体实现有ShimmerRecyclerView、Skeleton及spruce-android等开源库。
• 自定义一个View来对布局中的每个View进行一层包裹，当加载数据时则根据View来绘制骨架，否则显示正常UI。由于该方案需要将每个View包裹一层，所以会增加额外的布局层次。具体实现有Skeleton Android等开源库。

 上面就是目前在Android上实现骨架屏的两种方案，下面以Skeleton及Skeleton Android为例进行讲解。

Skeleton

 要想使用Skeleton，需要先导入以下两个库。

dependencies {
   
      implementation 'com.ethanhua:skeleton:1.1.2'
      //主要是动画的实现
      implementation 'io.supercharge:shimmerlayout:2.1.0'
}

 skeleton不仅支持在RecyclerView上实现骨架屏，也支持在View上实现骨架屏。
 先来看看在RecyclerView上的实现。

    recyclerView = findViewById(R.id.recycler);
    recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
    //实际Adapter
    NewsAdapter adapter = new NewsAdapter();
    final SkeletonScreen skeletonScreen = Skeleton.bind(recyclerView)
            .adapter(adapter)//设置实际adapter
            .shimmer(true)//是否开启动画
            .angle(30)//shimmer的倾斜角度
//          .color(R.color.colorAccent)//shimmer的颜色
            .frozen(true)//true则表示显示骨架屏时，RecyclerView不可滑动，否则可以滑动
            .duration(1200)//动画时间，以毫秒为单位
            .count(10)//显示骨架屏时item的个数
            .load(R.layout.item_skeleton_news)//骨架屏UI
            .show(); //default count is 10
    recyclerView.postDelayed(new Runnable() {
   
        @Override
        public void run() {
   
            skeletonScreen.hide();
        }
    }, 10000);//延迟时间

 使用还是比较简单的，主要是对动画属性的设置。当调用show方法时就会显示骨架屏，调用hide就会隐藏骨架屏，显示正常UI。下面就来看看这两个方法的实现。

public class RecyclerViewSkeletonScreen implements SkeletonScreen {
   

    //实际Adapter
    private final RecyclerView.Adapter mActualAdapter;
    //骨架UI所需Adapter
    private final SkeletonAdapter mSkeletonAdapter;
    ...
    @Override
    public void show() {
   
        //将骨架UI的Adapter设置给RecyclerView
        mRecyclerView.setAdapter(mSkeletonAdapter);
        if (!mRecyclerView.isComputingLayout() && mRecyclerViewFrozen) {
   
            mRecyclerView.setLayoutFrozen(true);
        }
    }

    @Override
    public void hide() {
   
        //将正常UI的Adapter设置给RecyclerView
        mRecyclerView.setAdapter(mActualAdapter);
    }
    ...
}

 从上面可以看出，在RecycleView上实现骨架屏是非常简单的，但需要为骨架屏单独实现一套布局，然后通过两个Adapter替换即可。
 虽然骨架屏很多时候都是用在列表、表格中使用，但也有在View上使用的需求，下面就来看看如何在View上实现骨架屏。

   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(