0
点赞
收藏
分享

微信扫一扫

RecyclerView:实现带header的grid


这是一个针对技术开发者的一个应用,你可以在掘金上获取最新最优质的技术干货,不仅仅是Android知识、前端、后端以至于产品和设计都有涉猎,想成为全栈工程师的朋友不要错过!

原文:RecyclerView: Grid with header 

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

GridLayoutManager

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

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


  1. RecyclerView recyclerView = (RecyclerView) findViewById(
  2.     R.id.recycler_view);
  3. recyclerView.addItemDecoration(new MarginDecoration(this));
  4. recyclerView.setHasFixedSize(true);
  5. recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
  6. recyclerView.setAdapter(new NumberedAdapter(30));


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



GridLayoutActivity.java

可变的span size

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

注:span size表示一个item的跨度,跨度了多少个span。


  1. GridLayoutManager manager = new GridLayoutManager(this, 3);
  2. manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  3.   @Override
  4.   public int getSpanSize(int position) {
  5.     return (3 - position % 3);
  6.   }
  7. });
  8. recyclerView.setLayoutManager(manager);


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

GridLayoutVariableSpanSizeActivity.java

头部(header)

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

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

其中TextViewHolder的代码为:

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


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

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

1. final GridLayoutManager manager = new GridLayoutManager(this, 2);
2. recyclerView.setLayoutManager(manager);
3.  
4. View header = LayoutInflater.from(this).inflate(
5.     R.layout.header, recyclerView, false);
6. header.setOnClickListener(new View.OnClickListener() {
7.   @Override
8.   public void onClick(View v) {
9.     Toast.makeText(v.getContext(), R.string.grid_layout_header, 
10.         Toast.LENGTH_SHORT).show();
11.   }
12. });
13. final HeaderNumberedAdapter adapter 
14.     = new HeaderNumberedAdapter(header, 30);
15. recyclerView.setAdapter(adapter);
16.  
17. manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
18.   @Override
19.   public int getSpanSize(int position) {
20.     return adapter.isHeader(position) ? manager.getSpanCount() : 1;
21.   }
22. });

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


总结

为了用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

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


举报

相关推荐

0 条评论