骨架屏加载

作者: 奔跑的佩恩 | 来源:发表于2019-10-22 09:26 被阅读0次

前言

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

今天涉及的内容有:

  1. 骨架屏库依赖
  2. 封装类SkeletonHelper给View设置加载过渡
  3. 封装类SkeletonHelper给RecyclerView设置加载过渡
  4. 骨架屏使用需要注意的问题
  5. 封装类SkeletonHelper源码
  6. 骨架屏官网

先来波效果图


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源码:

相关文章

  • 骨架屏( Skeleton Screen )

    骨架屏 什么是骨架屏 骨架屏英文叫 Skeleton Screen,也被称为加载占位图。它是在页面数据尚未加载前先...

  • ios - 原生骨架屏,网络加载过渡动画的封装

    ios - 原生骨架屏,网络加载过渡动画的封装 ios - 原生骨架屏,网络加载过渡动画的封装

  • SPA应用性能优化问题

    解决空白屏问题 组件懒加载和路由懒加载 骨架屏 骨架屏(skeleton screen)已经不是什么新奇的概念,他...

  • 骨架屏加载

    前言 在Android开发过程中,我们不免会用到数据加载过渡动画,最常用的就是“菊花”加载,或者其他的一些动画lo...

  • 交互设计

    添加骨架屏,例如 ant design 的 添加 loading 加载状态及对应图标

  • 骨架屏

    一、什么是骨架屏? 骨架屏可以理解为是在需要等待加载内容的位置提供一个占位图形组合,描绘了当前页面的大致框架的骨架...

  • 什么是骨架屏

    关于骨架屏(简介) 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充...

  • 2020-03-26 考拉前端骨架屏生成技术揭秘

    1. 为什么要使用骨架屏 骨架屏就是在页面数据尚未加载前,先给用户展示出页面的大致结构(灰色占位图),直到请求数据...

  • 微信小程序内如何实现骨架屏效果

    首先了解下什么是骨架屏? 骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面...

  • android Skeleton Screen框架Skeleto

    骨架屏简介 骨架屏可以理解为是当数据还未加载进页面之前,页面的一个空白的样板。一个简单的关键渲染路径。在看到在页面...

网友评论

    本文标题:骨架屏加载

    本文链接:https://www.haomeiwen.com/subject/pfdpmctx.html