针对RecyclerView打造属于你的LayoutManager

拼搏现实的明天。 2022-08-23 03:58 152阅读 0赞

转载地址：http://blog.csdn.net/huachao1001/article/details/51594004

一直想找`RecyclerView`自定义`LayoutManager`相关资料，网上虽然有几篇，但是写的却不够详细，看的一知半解。`Google`了几篇国外的文章后研究了一下，今天决定静下心来好好去写一篇关于自定义`LayoutManager`，跟大家一起学习~。相信大家都会使用`RecyclerView`，本文重点介绍如何自定义`RecyclerView`中的`LayoutManager`。

# 1 RecyclerView机制 #

`RecyclerView`内部有个`Recycler`，它其实就是一个垃圾回收再利用的工具，我们定义`LayoutManager`时，我们需要将不用的`View`回收掉；在需要获取新的View时直接申请，即通过`getViewForPosition()`方法，返回的`View`可能是之前回收的`垃圾View`，也可能是`new`出来的新`View`，这些都是RecyclerView帮我们做的。那么`RecyclerView`内部的`垃圾View`缓存是什么样子的呢？我们接下来看看~

## 1.1RecyclerView的二级缓存 ##

在`RecyclerView`中，有两个缓存：`Scrap`和`Recycle`。`Scrap`中文就是废料的意思，`Recycle`对应是回收的意思。这两个缓存有什么作用呢？首先`Scrap`缓存是指里面缓存的`View`是接下来需要用到的，即里面的绑定的数据无需更改，可以直接拿来用的，是一个轻量级的缓存集合；而`Recycle`的缓存的`View`为里面的数据需要重新绑定，即需要通过`Adapte`r重新绑定数据。关于这两个缓存的使用场景，下一节详细介绍。

当我们去获取一个新的`View`时，`RecyclerView`首先去检查`Scrap`缓存是否有对应的`position`的`View`，如果有，则直接拿出来可以直接用，不用去重新绑定数据；如果没有，则从`Recycle`缓存中取，并且会回调`Adapter`的`onBindViewHolder`方法（当然了，如果`Recycle`缓存为空，还会调用`onCreateViewHolder`方法），最后再将绑定好新数据的View返回。

## 1.2 将View缓存的两种方式 ##

前面我们了解到，`RecyclerView`中有二级缓存，我们可以自己选择将`View`缓存到哪里。我们有两种选择的方式：`Detach`和`Remove`。`Detach`的`View`放在`Scrap`缓存中，`Remove`掉的`View`放在Recycle缓存中；那我们应该如何去选择呢？

在什么样的场景中使用`Detach`呢？主要是在我们的代码执行结束之前，我们需要反复去将`View`移除并且马上又要添加进去时，选择`Datach`方式，比如：当我们对View进行重新排序的时候，可以选择Detach，因为屏幕上显示的就是这些position对应的View，我们并不需要重新去绑定数据，这明显可以提高效率。使用`Detach`方式可以通过函数`detachAndScrapView()`实现。

而使用Remove的方式，是当View不在屏幕中有任何显示的时候，你需要将它Remove掉，以备后面循环利用。可以通过函数`removeAndRecycleView()`实现。

# 2 开始自定义LayoutManager #

首先，得将我们自定义的`LayoutManager`继承`RecyclerView.LayoutManager`，而`RecyclerView.LayoutManager`是一个抽象类，但是抽象方法只有一个`generateDefaultLayoutParams`也就是说，我们只需要重新这一个方法就可以自定义我们自己的`LayoutManager`啦~，让我们happy地去自定义吧~

然后在在MainActivity中默默的加了以下两行代码：

很兴奋的运行看效果~~~：哇擦！啥都没有~。哈哈，被耍的感觉有木有！其实，学过自定义`ViewGroup`都知道，我们需要对子`View`进行布局，不了解的可以参考我的另一篇博文[《自定义View，有这一篇就够了 》][View_]，即需要重写`onLayout()`函数，并且在函数体里面需要对子View进行布局。我们自定义的`LayoutManager`主要工作就是对子`View`布局，那更需要我们重新类似`onLayout`的函数了。正如你所想的那样，`LayoutManager`有个函数`onLayoutChildren()`就是负责对子`View`布局的。

如果我们需要实现一个垂直方向的`LinearLayout`，我们可以这么写：

注意到，我们在最开始先执行了`detachAndScrapAttachedViews(recycler)`，即将所有的子View先Detach掉，放入到Scrap缓存中，为什么要这样做呢？主要是考虑到，屏幕上可能还有一些ItemView是继续要留在屏幕上的，我们不直接Remove，而是选择Detach。最后的效果很简单：   
![自定义LayoutManager效果][LayoutManager]

看一下MainActivity的完整代码吧~

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">package com.hc.customlayoutmanager;
 
 import android.os.Bundle;
 import android.support.v7.app.AppCompatActivity;
 import android.support.v7.widget.RecyclerView;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.TextView;
 
 import java.util.ArrayList;
 
 public class MainActivity extends AppCompatActivity {
 private RecyclerView recyclerView;
 private ArrayList<MyEntity> myData;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
 
 initData();
 
 MyLayoutManager layoutManager = new MyLayoutManager();
 MyAdapter adapter = new MyAdapter(); 
 recyclerView.setLayoutManager(layoutManager);
 recyclerView.setAdapter(adapter);
 }
 
 //初始化数据
 private void initData() {
 int size = 30;
 myData = new ArrayList<>(size);
 for (int i = 0; i < size; i++) {
 MyEntity e = new MyEntity();
 e.setStr("str:" + i);
 myData.add(e);
 }
 }
 
 //自定义Adapter
 class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
 
 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
 View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.recycler_view_item, parent, false);
 
 MyViewHolder viewHolder = new MyViewHolder(v);
 
 
 return viewHolder;
 }
 
 @Override
 public void onBindViewHolder(MyViewHolder holder, int position) {
 MyEntity myEntity = myData.get(position);
 
 holder.setStr(myEntity.getStr());
 }
 
 @Override
 public int getItemCount() {
 return myData.size();
 }
 }
 
 //自定义Holder
 static class MyViewHolder extends RecyclerView.ViewHolder {
 private TextView strTv;
 
 
 public MyViewHolder(View itemView) {
 super(itemView);
 strTv = (TextView) itemView.findViewById(R.id.str);
 }
 
 public void setStr(String str) {
 strTv.setText(str);
 }
 
 }
 }
 </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li></ul>

其他非关键代码这里就不贴出来了，后面会附上源码~

# 3 添加滑动 #

现在我们实现了简单的layout，但是还不能像ListView那样滑动，那么如何设置滚动呢？首先，你得重写`canScrollVertically()`函数，并返回`true`。同理，如果实现水平方向的滑动，则重写`canScrollHorizontally()`并返回`true`。

然后重写`scrollVerticallyBy()`函数，用于实现垂直方向滑动，同理，如果你想要实现水平方向的滑动那么重写`scrollHorizontallyBy()`函数。

其中`getVerticalSpace()`函数是用于获取RecyclerView在垂直方向上的可用空间，即去除了padding后的高度：

另外就是，我们要获取所有的ItemView的高度之和`totalHeight`，以及竖直方向的滑动偏移量`verticalScrollOffset`，`verticalScrollOffset`的起始值为0，而`totalHeight`可用通过遍历子View来获取，在`scrollVerticallyBy()`函数中可用获取这两个数据：

好了，看看效果吧~   
![滑动效果][20160606144224957]

# 4 回收子View #

当你觉得一切都非常完美的时候，却忽略了一个很关键的点！那就是回收~。我们知道，`RecyclerView`强大就强大在`View`的循环回收利用上，而一个`View`是否需要回收，是由我们的`LayoutManager`来管理的~还记得我们前面说的Remove吗？也就是将View放到Recycle缓存中去~

我们前面自定义的`LayoutManager`并没有回收子`View`，接下来我们去看看如何循环利用子View吧~。首先，我们应该将所有的item的上下左右的偏移量记录下来，并且要记录哪些Item需要被回收：

接下来就是初始化这两个变量，在`onLayoutChildren()`函数中对上面定义的两个变量进行初始化：

注意，上面的`for`循环里面并没有再调用`layoutDecorated()`函数，而是在最后调用了`recycleAndFillItems()`函数，这个函数是先将不需要的Item进行回收，然后在从缓存中取出需要的Item，代码如下：

最后不要忘了在`scrollVerticallyBy`中添加`recycleAndFillItems(recycler, state);`，因为在滑动过程中，需要重新对Item进行布局，即从缓存中取出Item进行数据绑定后放在新出现的Item的位置上。并且，还需要在`scrollVerticallyBy`最开始调用`detachAndScrapAttachedViews(recycler);`代码如下：

看看我们的效果，主要关注打印的日志信息里面的子View的数量，确保确实是循环利用了子View

![回收子View][View]

好啦~现在为止我们基本上已经实现了我们想要的效果啦，至于重写`onAdapterChanged()`以及`scrollToPosition()`等等效果请参考[http://wiresareobsolete.com/2014/09/building-a-recyclerview-layoutmanager-part-1/][http_wiresareobsolete.com_2014_09_building-a-recyclerview-layoutmanager-part-1]。

最后献上源码：[http://download.csdn.net/detail/huachao1001/9542610][http_download.csdn.net_detail_huachao1001_9542610]

[View_]: http://blog.csdn.net/huachao1001/article/details/51577291
[LayoutManager]: /images/20220722/fa7aeafe063541feb67eba213a9fc54c.png
[20160606144224957]: /images/20220722/f73707acac714f89959f3ce2880b4698.png
[View]: /images/20220722/915bbbfa12534e27802cf0fc9c30d3c9.png
[http_wiresareobsolete.com_2014_09_building-a-recyclerview-layoutmanager-part-1]: http://wiresareobsolete.com/2014/09/building-a-recyclerview-layoutmanager-part-1/
[http_download.csdn.net_detail_huachao1001_9542610]: http://download.csdn.net/detail/huachao1001/9542610