前言
在Android开发过程中，我们不免会用到数据加载过渡动画，最常用的就是“菊花”加载，或者其他的一些动画loading。那么今天就让我们来了解另一种加载过渡的方式----骨架屏。
今天涉及的内容有：
- 骨架屏库依赖
- 封装类SkeletonHelper给View设置加载过渡
- 封装类SkeletonHelper给RecyclerView设置加载过渡
- 骨架屏使用需要注意的问题
- 封装类SkeletonHelper源码
- 骨架屏官网
先来波效果图
1.gif
2.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;
}
}
}
显示效果如下：
1.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;
}
}
}
显示效果如下：
2.gif
项目结构图
image.png
四.骨架屏使用需要注意的问题
在给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骨架屏显示只能显示一个，二者不能同时显示(即使你都调用了，也只会显示其中一个效果)，故在使用的时候，需要衡量侧重显示哪部分内容。
五.封装类SkeletonHelper源码
下面贴出封装类SkeletonHelper源码：
网友评论