RecyclerView:实现带header的grid（ViewType和setSpanSizeLookup()方法）

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

GridLayoutManager

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

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

RecyclerView recyclerView = (RecyclerView) findViewById(
R.id.recycler_view);
recyclerView.addItemDecoration(new MarginDecoration(this));

//如果内容更改不会更改RecyclerView  的布局大小，请使用此设置来提高性能；

//将其设置为true并不意味着RecyclerView大小是固定的，只是意味着它不会因适配器内容的更改而改变。

//当您在RecyclerView中添加或删除项目，并且不更改其高度或宽度时，请将setHasFixedSize设置为true避免不必要的布局传递。

recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new GridLayoutManager(this, 2));
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。

GridLayoutManager manager = new GridLayoutManager(this, 3);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return (3 - position % 3);
}
});
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，然后把它存在一个成员变量中。

package com.sqisland.android.recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class HeaderNumberedAdapter extends RecyclerView.Adapter<TextViewHolder> {
private static final int ITEM_VIEW_TYPE_HEADER = 0;
private static final int ITEM_VIEW_TYPE_ITEM = 1;

private final View header;
private final List<String> labels;

public HeaderNumberedAdapter(View header, int count) {
if (header == null) {
throw new IllegalArgumentException("header may not be null");
}
this.header = header;
this.labels = new ArrayList<String>(count);
for (int i = 0; i < count; ++i) {
labels.add(String.valueOf(i));
}
}

public boolean isHeader(int position) {
return position == 0;
}

@Override
public TextViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
if (viewType == ITEM_VIEW_TYPE_HEADER) {
return new TextViewHolder(header);
}
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
return new TextViewHolder(view);
}

@Override
public void onBindViewHolder(final TextViewHolder holder, final int position) {
if (isHeader(position)) {
return;
}
final String label = labels.get(position - 1);  // Subtract 1 for header
holder.textView.setText(label);
holder.textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(
holder.textView.getContext(), label, Toast.LENGTH_SHORT).show();
}
});
}

@Override
public int getItemViewType(int position) {
return isHeader(position) ? ITEM_VIEW_TYPE_HEADER : ITEM_VIEW_TYPE_ITEM;
}

@Override
public int getItemCount() {
return labels.size() + 1;
}
}

其中TextViewHolder的代码为：

package com.sqisland.android.recyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;

public class TextViewHolder extends RecyclerView.ViewHolder {
public TextView textView;
public TextViewHolder(View itemView) {
super(itemView);
textView = (TextView) itemView.findViewById(R.id.text);
}
}

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

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

final GridLayoutManager manager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(manager);

View header = LayoutInflater.from(this).inflate(
R.layout.header, recyclerView, false);
header.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(v.getContext(), R.string.grid_layout_header,
Toast.LENGTH_SHORT).show();
}
});
final HeaderNumberedAdapter adapter
= new HeaderNumberedAdapter(header, 30);
recyclerView.setAdapter(adapter);

manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return adapter.isHeader(position) ? manager.getSpanCount() : 1;
}
});

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

总结

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

定义一个具有两种view类型的adapter，一个为header一个为普通item。

nflate一个header，把它传递给adapter。

重写GridLayoutManager中的setSpanSizeLookup，在header所处的位置返回和span count（列数）相等的 span size。

源码: https://github.com/chiuki/android-recyclerview

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

利用ViewType和setSpanSizeLookup()方法实现混合布局

有时候我们可能需要实现一个上面是GridLayout下面是LinearLayout的效果；

如果之前你用过ListView实现过此功能，那么你一定对下面这两个方法并不陌生；

@Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}

@Override
public int getViewTypeCount() {
return super.getViewTypeCount();
}

其中getItemViewType方法是用来获取当前项Item(position参数)是哪种类型的布局，getViewTypeCount方法是用来获取当前listview总共有多少种类型的布局。

如果你用RecyclerView，你会发现getViewTypeCount这个方法没有了，只有一个getItemViewType方法，用法和listview没有任何区别，这里要注意的就是这个函数onCreateViewHolder(ViewGroup parent, int viewType)这里的第二个参数就是View的类型，可以根据这个类型判断去创建不同item的ViewHolder。

ApplicationAdapter.java :

public class ApplicationAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
//枚举类，两个变量代表两种布局方式
public enum ITEM_TYPE {
ITEM_TYPE_TOP,
ITEM_TYPE_BOTTOM
}

private LayoutInflater mLayoutInflater = null;
private Context mContext = null;
//不同的数据源
private List<ApplicationModel> models;
private List<MessageModel> messages;

public ApplicationAdapter(Context context, List<ApplicationModel> list, List<MessageModel> messageList){
mContext = context;
models = list;
messages = messageList;
mLayoutInflater = LayoutInflater.from(context);
}

/*
* 我们在这个方法中得到viewType，这个参数就是getItemViewType(int position)方法返回的值
*/
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

if(viewType==ITEM_TYPE.ITEM_TYPE_TOP.ordinal()){
return new ApplicationHolder(mLayoutInflater.inflate(R.layout.application_item_layout,parent,false));
}else{
return new MessageHolder(mLayoutInflater.inflate(R.layout.message_item_layout,parent,false));
}

}

/*
* 根据不同的viewType,为不同的布局各自填充数据源
*/
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if(holder instanceof ApplicationHolder){
((ApplicationHolder) holder).mApplicationIcon.setImageResource(models.get(position).getDrawableResId());
((ApplicationHolder) holder).mApplicationName.setText(models.get(position).getName());
}else if(holder instanceof  MessageHolder){
((MessageHolder) holder).mMessageIcon.setImageResource(messages.get(position).getmResoueceIcon());
((MessageHolder) holder).mMessageName.setText(messages.get(position).getmName());
((MessageHolder) holder).mMessageContent.setText(messages.get(position).getmContent());
}
}

//前八个布局按grid显示
@Override
public int getItemViewType(int position) {
return position <8 ? ITEM_TYPE.ITEM_TYPE_TOP.ordinal() : ITEM_TYPE.ITEM_TYPE_BOTTOM.ordinal();
}

@Override
public int getItemCount() {
return models.size();
}

private class ApplicationHolder extends RecyclerView.ViewHolder {
private ImageView mApplicationIcon;
private TextView mApplicationName;
public ApplicationHolder(View inflate) {
super(inflate);
mApplicationIcon = (ImageView) inflate.findViewById(R.id.item_application_right_data_view_icon_iv);
mApplicationName = (TextView) inflate.findViewById(R.id.item_application_right_data_view_name_tv);
}
}

private class MessageHolder extends RecyclerView.ViewHolder {
private ImageView mMessageIcon;
private TextView mMessageName;
private TextView mMessageContent;
public MessageHolder(View inflate) {
super(inflate);
mMessageIcon = (ImageView) inflate.findViewById(R.id.list_item_info_image_view);
mMessageName = (TextView) inflate.findViewById(R.id.list_item_info_title_text_view);
mMessageContent = (TextView) inflate.findViewById(R.id.list_item_info_date_text_view);
}
}

}

其实代码不难理解。

MainActivity.java :

public class MainActivity extends AppCompatActivity{
private RecyclerView mRecyclerView;

private List<ApplicationModel> applicationModels = new ArrayList<>();//应用数据集合
private List<MessageModel> messageModels = new ArrayList<>();//信息数据集合
private ApplicationAdapter mAdapter;

public int[] resources = new int[]{R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher,
R.mipmap.ic_launcher};

public int[] icons = new int[]{R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,
R.mipmap.app_icon_err,};

public String[] names = new String[]{"Name1","Name2","Name3","Name4","Name5","Name6","Name7",
"Name8","Name9","Name10","Name11","Name12"};

public String[] ntitles = new String[]{"Title1","Title2","Title3","Title4","Title1","Title2","Title3",
"Title1","Title2","Title3","Title1","Title2",};

public String[] contents = new String[]{"111","222","333","444","555","666","777",
"888","999","110","111","112"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);

GridLayoutManager manager = new GridLayoutManager(this,4);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {

@Override

public int getSpanSize(int position) {

if(position<8)
return 1;
else
return 4;

}

});

mRecyclerView.setLayoutManager(manager);

//        mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));

initData();

mAdapter = new ApplicationAdapter(this,applicationModels,messageModels);
mRecyclerView.setAdapter(mAdapter);
}

private void initData() {
for(int i =0;i<names.length;i++){
MessageModel message = new MessageModel(icons[i],ntitles[i],contents[i]);
messageModels.add(message);
}

for(int j =0;j<names.length;j++){
ApplicationModel model = new ApplicationModel(resources[j],names[j]);
applicationModels.add(model);
}

}

}

效果图如下：



但是这种方法的实现效果并不好，因为下面的Linearlayout的数据源是从第九个开始加载的，那么前面8个等于是浪费掉了。

参考：http://blog.csdn.net/danfengw/article/details/53117182