既然选择了远方,便只顾风雨兼程。当我第一次尝试去进行写作的时候,我就觉得我应该要把它当作习惯一样坚持下去,哪怕每次只有一点点的进步,我也很满足。
好了,言归正传,开始我们今天的主题。在说正题前,咱先上个图。

这是简书iOS版在请求网络数据时列表默认的加载效果

这是简书Android版在请求网络数据时默认的加载效果。
可以看到简书iOS版在获取到网络数据前,先放了张默认的占位图,而Android版简书则放了个SwipeRefreshLayout刷新控件,哈哈,可见连我们著名的简书大大在这加载默认效果上也没能做到统一啊。现在假设咱是简书Android,如果咱要实现iOS版的效果该咋整呢,可能大家的第一反应是伸手向UI要张图一放搞定。如果是这样,那咱今天就没下文了,本文到这里也就结束了。OK,大家可以去休息了。
然而咱今天想给大家介绍的是另一种思路,自己动手绘制上图中的效果。可能有人会说了,你这不是瞎折腾吗,让UI切张图能搞定的事,你非要自己画何必呢。我想说的是一种列表样式你要切张图,如果是另一种列表样式那么你又要切一张图,10个列表样式就得切10个图,其结果是APP体积上升的越来越快,然而APP本身随着功能的迭代就已经很臃肿了,这无疑使得本就庞大的APP变得更加臃肿不堪。相反如果是自己去绘制的画,哪怕UI闲的没事又设计了几十个列表样式,咱也能做到不需要UI的一砖一瓦,变换下布局就能做到轻松应对。
下面开始我们的项目,打开我们的Android Studio,新建个工程命名为CXRecyclerView,新建个布局文件命名为item_recyclerview_default_loading

通过取色器,取得我们需要绘制的灰色条颜色值#f0f0f0

先画个圆形头像,drawable目录下新建个shape_round_head文件,android:shape设置为oval

接着添加View控件,background设置为我们刚刚画的圆形shape_round_head

在接着添加View绘制小横条,背景色设置为我们取色器取到的灰色。

其他的灰色小横条以此类推,最终我们绘制的item效果图如下。

接着自定义个CXDefaultLoadingAdapter并且继承自RecyclerView.Adapter,重写onCreateViewHolder方法,加载我们的默认加载布局item_recyclerview_default_loading,默认加载数量我们这里设置的是20个,当然你也可以设置其他值。

在接下来我们需要自定义个CXRecyclerView,初始化LinearLayoutManager以及刚刚我们自定义的CXDefaultLoadingAdapter。

现在我们回到MainActivity,对SwipeRefreshLayout刷新控件进行初始化设置颜色和背景,对我们刚刚自定义的CXRecyclerView添加分割线。

OK,最终运行后的效果图如下。

最后放上Github地址GitHub - githappygo/CXRecyclerView: 仿简书IOS版默认列表加载效果
下一篇将接着本篇文章为大家带来如何给我们的默认样式添加闪光效果以及模拟请求网络数据成功后替换掉当前的默认加载图。
网友评论
不过这里我提供另一种方式实现, 自定义view,通过canvas绘制来实现,效率比堆积view 高很多