#转载#RecyclerView:实现带header的grid

柔光的暖阳◎ 2022-06-12 08:54 125阅读 0赞

文章出处:http://blog.csdn.net/q178266871/article/details/50716502

#  RecyclerView:实现带header的grid #

泡在网上的日子 发表于 2015-07-22 16:19 第 4757 次阅读 [RecyclerView][]

编辑推荐：[稀土掘金][Link 1]，这是一个高质量的技术干货分享社区，web前端、[Android][]、[iOS][]、设计资源和产品，满足你的学习欲望。

原文：[RecyclerView: Grid with header][RecyclerView_ Grid with header]

GridView和ListView有许多的相似之处，不过也有一个显著的不同：没有header和footer。现在它们两者都可以用RecyclerView实现，我想看看如何在grid上添加header。

## GridLayoutManager ##

我用GridLayoutManager创建了一个spanCount为2的RecylcerView。

注：spanCount即列数。这里GridLayoutManager的第二个参数就是spanCount。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>RecyclerView&nbsp;recyclerView&nbsp;=&nbsp;(RecyclerView)&nbsp;findViewById(</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>R.id.recycler_view);</code> 
     </div> 
     <div> 
      <code>recyclerView.addItemDecoration(</code> 
      <code>new</code>&nbsp; 
      <code>MarginDecoration(</code> 
      <code>this</code> 
      <code>));</code> 
     </div> 
     <div> 
      <code>recyclerView.setHasFixedSize(</code> 
      <code>true</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>recyclerView.setLayoutManager(</code> 
      <code>new</code>&nbsp; 
      <code>GridLayoutManager(</code> 
      <code>this</code> 
      <code>,&nbsp;2));</code> 
     </div> 
     <div> 
      <code>recyclerView.setAdapter(</code> 
      <code>new</code>&nbsp; 
      <code>NumberedAdapter(30));</code> 
     </div> 
    </div> <p></p></td> 
  </tr> 
 </tbody> 
</table>

[NumberedAdapter][] 以字符串的形式显示了每个item的position，在点击的时候显示一个toast。

![grid.png][]

[GridLayoutActivity.java][]

## 可变的span size ##

在上面的基本设置中，我们的spanCount为2，每个item的span size为1，因此一个header需要的span size则为2。在我尝试着添加header之前，我想先看看如何设置 span size。其实很简单。

注：span size表示一个item的跨度，跨度了多少个span。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>GridLayoutManager&nbsp;manager&nbsp;=&nbsp;</code> 
      <code>new</code>&nbsp; 
      <code>GridLayoutManager(</code> 
      <code>this</code> 
      <code>,&nbsp;3);</code> 
     </div> 
     <div> 
      <code>manager.setSpanSizeLookup(</code> 
      <code>new</code>&nbsp; 
      <code>GridLayoutManager.SpanSizeLookup()&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;int&nbsp;getSpanSize(int&nbsp;position)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>(3&nbsp;-&nbsp;position&nbsp;%&nbsp;3);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
     <div> 
      <code>recyclerView.setLayoutManager(manager);</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

setSpanSizeLookup可以让你根据position来设置 span size，上面代码中的公式所得到的 span size依次是3, 2, 1, 3, 2, 1…

![grid-variable-span.png][]

[GridLayoutVariableSpanSizeActivity.java][]

## 头部（header） ##

现在让我们来添加一个header！我们需要一个提供两种view类型的adapter，一个为header一个为普通的item。可以看看[HeaderNumberedAdapter][]，它在构造函数中把一个view作为header，然后把它存在一个成员变量中。

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> 
    <div>
      53 
    </div> 
    <div>
      54 
    </div> 
    <div>
      55 
    </div> 
    <div>
      56 
    </div> 
    <div>
      57 
    </div> 
    <div>
      58 
    </div> 
    <div>
      59 
    </div> 
    <div>
      60 
    </div> 
    <div>
      61 
    </div> 
    <div>
      62 
    </div> 
    <div>
      63 
    </div> 
    <div>
      64 
    </div> 
    <div>
      65 
    </div> 
    <div>
      66 
    </div> 
    <div>
      67 
    </div> 
    <div>
      68 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>package&nbsp;com.sqisland.android.recyclerview;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>import&nbsp;android.support.v7.widget.RecyclerView;</code> 
     </div> 
     <div> 
      <code>import&nbsp;android.view.LayoutInflater;</code> 
     </div> 
     <div> 
      <code>import&nbsp;android.view.View;</code> 
     </div> 
     <div> 
      <code>import&nbsp;android.view.ViewGroup;</code> 
     </div> 
     <div> 
      <code>import&nbsp;android.widget.Toast;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>import&nbsp;java.util.ArrayList;</code> 
     </div> 
     <div> 
      <code>import&nbsp;java.util.List;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>public&nbsp;class&nbsp;HeaderNumberedAdapter&nbsp;extends&nbsp;RecyclerView.Adapter&lt;TextViewHolder&gt;&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>private&nbsp;static&nbsp;final&nbsp;int&nbsp;ITEM_VIEW_TYPE_HEADER&nbsp;=&nbsp;0;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>private&nbsp;static&nbsp;final&nbsp;int&nbsp;ITEM_VIEW_TYPE_ITEM&nbsp;=&nbsp;1;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>private&nbsp;final&nbsp;View&nbsp;header;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>private&nbsp;final&nbsp;List&lt;String&gt;&nbsp;labels;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;HeaderNumberedAdapter(View&nbsp;header,&nbsp;int&nbsp;count)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code>&nbsp; 
      <code>(header&nbsp;==&nbsp;</code> 
      <code>null</code> 
      <code>)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>throw</code>&nbsp; 
      <code>new</code>&nbsp; 
      <code>IllegalArgumentException(</code> 
      <code>"header&nbsp;may&nbsp;not&nbsp;be&nbsp;null"</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.header&nbsp;=&nbsp;header;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.labels&nbsp;=&nbsp;</code> 
      <code>new</code>&nbsp; 
      <code>ArrayList&lt;String&gt;(count);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code>&nbsp; 
      <code>(int&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;count;&nbsp;++i)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>labels.add(String.valueOf(i));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;boolean&nbsp;isHeader(int&nbsp;position)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>position&nbsp;==&nbsp;0;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;TextViewHolder&nbsp;onCreateViewHolder(ViewGroup&nbsp;parent,&nbsp;int&nbsp;viewType)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code>&nbsp; 
      <code>(viewType&nbsp;==&nbsp;ITEM_VIEW_TYPE_HEADER)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>new</code>&nbsp; 
      <code>TextViewHolder(header);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>View&nbsp;view&nbsp;=&nbsp;LayoutInflater.from(parent.getContext()).inflate(R.layout.item,&nbsp;parent,&nbsp;</code> 
      <code>false</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>new</code>&nbsp; 
      <code>TextViewHolder(view);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;void&nbsp;onBindViewHolder(final&nbsp;TextViewHolder&nbsp;holder,&nbsp;final&nbsp;int&nbsp;position)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code>&nbsp; 
      <code>(isHeader(position))&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>final&nbsp;String&nbsp;label&nbsp;=&nbsp;labels.get(position&nbsp;-&nbsp;1);&nbsp;&nbsp;</code> 
      <code>//&nbsp;Subtract&nbsp;1&nbsp;for&nbsp;header</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>holder.textView.setText(label);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>holder.textView.setOnClickListener(</code> 
      <code>new</code>&nbsp; 
      <code>View.OnClickListener()&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>public&nbsp;void&nbsp;onClick(View&nbsp;v)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Toast.makeText(</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>holder.textView.getContext(),&nbsp;label,&nbsp;Toast.LENGTH_SHORT).show();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;int&nbsp;getItemViewType(int&nbsp;position)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>isHeader(position)&nbsp;?&nbsp;ITEM_VIEW_TYPE_HEADER&nbsp;:&nbsp;ITEM_VIEW_TYPE_ITEM;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>@Override</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;int&nbsp;getItemCount()&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code>&nbsp; 
      <code>labels.size()&nbsp;+&nbsp;1;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

其中TextViewHolder的代码为：

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>package&nbsp;com.sqisland.android.recyclerview;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>import&nbsp;android.support.v7.widget.RecyclerView;</code> 
     </div> 
     <div> 
      <code>import&nbsp;android.view.View;</code> 
     </div> 
     <div> 
      <code>import&nbsp;android.widget.TextView;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>public&nbsp;class&nbsp;TextViewHolder&nbsp;extends&nbsp;RecyclerView.ViewHolder&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;TextView&nbsp;textView;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>public&nbsp;TextViewHolder(View&nbsp;itemView)&nbsp;{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>super</code> 
      <code>(itemView);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>textView&nbsp;=&nbsp;(TextView)&nbsp;itemView.findViewById(R.id.text);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

在RecyclerView新建一个view的时候，如果处于header的位置，我们用view holder来封装这个header。onBindViewHolder中不必对header做任何事情，因为它的逻辑是在activity中处理的。

回到activity。我们需要用一个header来初始化[HeaderNumberedAdapter][]，同时重写setSpanSizeLookup，让header横跨所有列。

我们inflate header，定义它的点击事件，使用它去构造adapter。然后再setSpanSizeLookup中，我们在header所处的位置返回和span count （列数）相等的 span size。

![grid-header.png][]

## 总结 ##

为了用RecyclerView创建一个带header的grid：

1.  定义一个具有两种view类型的adapter，一个为header一个为普通item。
2.  nflate一个header，把它传递给adapter。
3.  重写GridLayoutManager中的setSpanSizeLookup，在header所处的位置返回和span count （列数）相等的 span size。

源码: [https://github.com/chiuki/android-recyclerview][https_github.com_chiuki_android-recyclerview]

ps：在我的g＋上有人评论说如果你不需要RecyclerView的功能，比如animation，reordering，staggering等，你也可以从AOSP中拷贝[HeaderGridView.java][]。

[RecyclerView]: http://www.jcodecraeer.com/tags.php?/RecyclerView/
[Link 1]: http://gold.xitu.io/
[Android]: http://lib.csdn.net/base/android
[iOS]: http://lib.csdn.net/base/ios
[RecyclerView_ Grid with header]: http://blog.sqisland.com/2014/12/recyclerview-grid-with-header.html
[NumberedAdapter]: https://github.com/chiuki/android-recyclerview/blob/master/app/src/main/java/com/sqisland/android/recyclerview/NumberedAdapter.java
[grid.png]: /images/20220612/6e769b9542924130a3938246be7a4d1a.png
[GridLayoutActivity.java]: https://github.com/chiuki/android-recyclerview/blob/master/app/src/main/java/com/sqisland/android/recyclerview/GridLayoutActivity.java
[grid-variable-span.png]: /images/20220612/c519dc52369a4f5eb9e9a45c1ff01c86.png
[GridLayoutVariableSpanSizeActivity.java]: https://github.com/chiuki/android-recyclerview/blob/master/app/src/main/java/com/sqisland/android/recyclerview/GridLayoutVariableSpanSizeActivity.java
[HeaderNumberedAdapter]: https://github.com/chiuki/android-recyclerview/blob/master/app/src/main/java/com/sqisland/android/recyclerview/HeaderNumberedAdapter.java
[grid-header.png]: /images/20220612/7246894326914db380abe69247226213.png
[https_github.com_chiuki_android-recyclerview]: https://github.com/chiuki/android-recyclerview
[HeaderGridView.java]: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android-apps/5.0.0_r1/com/android/photos/views/HeaderGridView.java