骨架屏使用

骨架屏(Skeleton Screen)使用

骨架屏又称占位骨架屏，它是代替菊花图的一种新型加载提示，具体样式如下所示

目前 Github 上主要实现思路有两个，

1. View 或 Adapter 的替换来实现，具体实现库有 ShimmerRecyclerView、Skeleton 及 spruce-android

2.在布局文件中，自定义一个 View 对每个 View 进行包裹，具体实现库有Skeleton Android

下面主要讲第一种思路的实现，替换adapter，用到的库是 Skeleton 库

1.导包

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

2.编写布局

这块比较简单，就不罗列代码了，展示下预览图

• Item 样式布局（需填入数据）

  

• Item 骨架展示（加载中展示的底图）

  这块与上面布局基本一致，区别是给每个 View 添加了背景颜色

  

• 页面布局

  

3.具体逻辑实现

private val MSG : Int = 10000
lateinit var skeletonAdapter : RecyclerViewSkeletonScreen
val dataLists : ArrayList<SkeletonDataBean> = ArrayList()
lateinit var adapter : MultiTypeAdapter

//handler 处理消息
val mHandler : Handler = object : Handler(){
    override fun handleMessage(msg: Message) {
        if (msg.what == MSG){
            Log.d(TAG, "handleMessage: " + dataLists!!.size)
            if (dataLists != null) {
                adapter.items = dataLists
            }
            adapter.notifyDataSetChanged()
            skeletonAdapter.hide()
        }
        super.handleMessage(msg)
    }
}

fun initView(){
    //recycleView 配置 (可忽略)
    mBinding.fhsRvSkeletonTest.layoutManager = LinearLayoutManager(context)
    adapter = MultiTypeAdapter()
    adapter.register(SkeletonDataBean::class.java, MultiTypeSkeletonBinder())
    
    //配置骨架Adapter
    skeletonAdapter = Skeleton.bind(mBinding.fhsRvSkeletonTest)
        .adapter(adapter) //设置加载后 recycleView 的adapter
        .load(R.layout.item_list_skeleton_test)//设置加载中显示的骨架布局
//    	.count(10) //预览条目数
        .shimmer(true)//是否展示动画
        .color(R.color.color_shimmer)//动画颜色
        .angle(20)//动画倾斜角度
    //   .duration(3000)//动画持续时间
        .frozen(true)//加载中是否可滑动
        .show()
    
    //模拟接口获取数据
    getData()
}

private fun getData() {
    Thread(Runnable {
        Thread.sleep(4000)
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风.遇事不决，可问春风.遇事不决，可问春风.遇事不决，可问春风.遇事不决，可问春风.遇事不决，可问春风.", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风.遇事不决，可问春风.遇事不决，可问春风.遇事不决，可问春风.", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        dataLists?.add(SkeletonDataBean("标题一", "遇事不决，可问春风", R.drawable.skeleton_picture))
        mHandler.sendEmptyMessage(MSG)
    }).start()
}

引用：骨架屏（Skeleton Screen）在Android中的应用 - 掘金 (juejin.cn)

引用：Android中骨架屏(Skeleton Screen)使用_Unknown world的博客-CSDN博客_android骨架屏框架