骨架屏加载

立即下载用AI写一个

发布时间：2019-10-21

1人 | 浏览：1981次 | 收藏 |

技术：android

运行环境：androidstudio

概述

在Android开发过程中，我们不免会用到数据加载过渡动画，最常用的就是“菊花”加载，或者其他的一些动画loading。那么今天就让我们来了解另一种加载过渡的方式----骨架屏。

详细

###前言
在Android开发过程中，我们不免会用到数据加载过渡动画，最常用的就是“菊花”加载，或者其他的一些动画loading。那么今天就让我们来了解另一种加载过渡的方式----骨架屏。

今天涉及的内容有：
1. 骨架屏库依赖
2. 封装类SkeletonHelper给View设置加载过渡
3. 封装类SkeletonHelper给RecyclerView设置加载过渡
4. 骨架屏使用需要注意的问题
5. 项目结构图

先来波效果图
![](/contentImages/image/20191021/GSbEzWhRE47ms5Ghi1G.gif)
![](/contentImages/image/20191021/z50pV2z1LOKPFTxGY6z.gif)
####一. 骨架屏库依赖
今天介绍的一个骨架屏库在使用之前需要添加依赖,在你项目app_model对应的build.gradle中添加以下引用：
```
dependencies {
    //骨架屏
    implementation 'com.ethanhua:skeleton:1.1.2'
    //骨架屏动画支持
    implementation 'io.supercharge:shimmerlayout:2.1.0'
}
```
####二.封装类SkeletonHelper给View设置加载过渡
我已经将骨架屏库的使用封装到一个类SkeletonHelper中了，SkeletonHelper类中有以下几个方法：

```
/**显示View骨架屏**/
showViewSkeleton(View rootView,int skeletonLayoutId)

/**显示RecyclerView布局内容的骨架屏**/
showRecyclerSkeleton(RecyclerView recyclerView,RecyclerView.Adapter adapter,int skeletonLayoutId)

/**隐藏骨架屏**/
hideSkeleton()
```
当我们要给一个不含RecyclerView的界面设置加载过渡动画的时候，下面贴出在MainActivity中的使用代码：
```
public class MainActivity extends AppActivity {

private ConstraintLayout mConstraintLayout;

private TextView mTv;
    private Button mBtn;

public static class MyHandler extends android.os.Handler {
        private final WeakReference<MainActivity> activityWeakReference;

MyHandler(MainActivity activity) {
            this.activityWeakReference = new WeakReference<>(activity);
        }

@Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (activityWeakReference.get() != null) {
                //隐藏骨架屏
                SkeletonHelper.getInstance().hideSkeleton();
            }
        }
    }

@Override
    public int getContentViewId() {
        return R.layout.activity_main;
    }

@Override
    public void initData() {
        mConstraintLayout = findViewById(R.id.container);
        mBtn = findViewById(R.id.button);

//给View设置骨架屏
        SkeletonHelper.getInstance().showViewSkeleton(mConstraintLayout,R.layout.activity_main_skeleton);

MyHandler myHandler = new MyHandler(this);
        myHandler.sendEmptyMessageDelayed(1, 3000);

}

@Override
    public void setListener() {
        mBtn.setOnClickListener(this);
    }

@Override
    public void onClick(View v) {
        super.onClick(v);

switch (v.getId()) {
            case R.id.button:

break;
            default:
                break;
        }

}

}
```
显示效果如下：
![](/contentImages/image/20191021/GSbEzWhRE47ms5Ghi1G.gif)
####三.封装类SkeletonHelper给RecyclerView设置加载过渡
当界面中展示的是一个列表数据，这时则需要给RecyclerView设置加载过渡，下面以加载列表数据在MainActivity中使用为例，MainActivity中调用代码如下：
```
public class MainActivity extends AppActivity {

private ConstraintLayout mConstraintLayout;

private TextView mTv;
    private Button mBtn;
    private RecyclerView mRecyclerView;

private List<String> mNames;
    private NameAdapter<String> mNameAdapter;

public static class MyHandler extends android.os.Handler {
        private final WeakReference<MainActivity> activityWeakReference;

MyHandler(MainActivity activity) {
            this.activityWeakReference = new WeakReference<>(activity);
        }

@Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (activityWeakReference.get() != null) {
                //隐藏骨架屏
                SkeletonHelper.getInstance().hideSkeleton();
            }
        }
    }

@Override
    public int getContentViewId() {
        return R.layout.activity_main;
    }

@Override
    public void initData() {
        mConstraintLayout = findViewById(R.id.container);
        mBtn = findViewById(R.id.button);
        mRecyclerView = findViewById(R.id.rv);

//设置数据
        mNames = new ArrayList<>();
        for (int i = 0; i < 10; i++) {
            mNames.add("大海 " + i);
        }
        mNameAdapter = new NameAdapter<>(mNames, mContext);
        mNameAdapter.setRecyclerLinearManager(mRecyclerView);

//给RecyclerView设置骨架屏
        SkeletonHelper.getInstance().showRecyclerSkeleton(mRecyclerView,mNameAdapter,R.layout.item_layout_skeleton);

MyHandler myHandler = new MyHandler(this);
        myHandler.sendEmptyMessageDelayed(1, 3000);

}

@Override
    public void setListener() {
        mBtn.setOnClickListener(this);
    }

@Override
    public void onClick(View v) {
        super.onClick(v);

switch (v.getId()) {
            case R.id.button:

break;
            default:
                break;
        }

}

}
```
显示效果如下：
![](/contentImages/image/20191021/z50pV2z1LOKPFTxGY6z.gif)
####四.骨架屏使用需要注意的问题
在给View设置加载过渡的时候,方法
```
/**显示View骨架屏**/
showViewSkeleton(View rootView,int skeletonLayoutId)
```
中的skeletonLayoutId是一个R.layout.XXX布局，意思是在加载过程中用R.layout.XXX布局来代替R.layout.activity布局显示，所以R.layout.XXX基本以R.layout.activity为蓝本布局，当然这时R.layout.activity中是不包含RecyclerView控件的。然后R.layout.XXX布局中的控件都要设置一个固定的宽高，不能用wrap_content，否则加载的过渡动画会因为控件没具体数值而看不见。

在给RecyclerView设置加载过渡的时候,方法
```
/**显示RecyclerView布局内容的骨架屏**/
showRecyclerSkeleton(RecyclerView recyclerView,RecyclerView.Adapter adapter,int skeletonLayoutId)
```
的时候，skeletonLayoutId为R.layout.xxx布局，其是用来代替Adapter 中item_adapter_layout数据加载时显示出来的，记得R.layout.xxx中控件要设置间距(若RecyclerView未设置分割线的话)，不然骨架屏加载出来的动画就是一整块而不是一条一条的了。

最后，View骨架屏显示和RecyclerView骨架屏显示只能显示一个，二者不能同时显示(即使你都调用了，也只会显示其中一个效果)，故在使用的时候，需要衡量侧重显示哪部分内容。
####五.项目结构图
![](/contentImages/image/20191021/emAURBjTJKwOp9r51Lm.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

骨架屏加载

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子