Android 解析RecyclerView（2）——带顶部View和底部View的RecyclerView

RecyclerView是用来替代ListView的一个控件，比ListView更加的简洁高效，不过也有一些比较不足的地方，比如：无法直接设置点击事件监听; 无法像ListView那样直接添加顶部View和底部View。

设置点击事件监听在前一篇文章已经解决了，这一篇文章要来介绍如何为RecyclerView添加顶部View和底部View。

一、源码分析

先来看下ListView的源码，研究它是如何添加顶部View的

public void addHeaderView(View v, Object data, boolean isSelectable) { final FixedViewInfo info = new FixedViewInfo(); info.view = v; info.data = data; info.isSelectable = isSelectable; mHeaderViewInfos.add(info); mAreAllItemsSelectable &= isSelectable; // Wrap the adapter if it wasn't already wrapped. if (mAdapter != null) { if (!(mAdapter instanceof HeaderViewListAdapter)) { wrapHeaderListAdapterInternal(); } // In the case of re-adding a header view, or adding one later on, // we need to notify the observer. if (mDataSetObserver != null) { mDataSetObserver.onChanged(); } } } 

可以看到，addHeaderView() 方法首先是将 headerView 保存到 FixedViewInfo 对象中，再将 FixedViewInfo 对象保存到集合中。
FixedViewInfo 类的定义如下所示：

 public class FixedViewInfo { /** The view to add to the list */ public View view; /** The data backing the view. This is returned from {@link ListAdapter#getItem(int)}. */ public Object data; /** <code>true</code> if the fixed view should be selectable in the list */ public boolean isSelectable; } 

mAdapter 即是为ListView设置的Adapter 对象，如果 mAdapter 不是HeaderViewListAdapter 的直接实例，则调用 wrapHeaderListAdapterInternal() 方法，以顶部View、底部View和mAdapter为参数，来将 mAdapter 转为 HeaderViewListAdapter 对象

 protected void wrapHeaderListAdapterInternal() { mAdapter = wrapHeaderListAdapterInternal(mHeaderViewInfos, mFooterViewInfos, mAdapter); } protected HeaderViewListAdapter wrapHeaderListAdapterInternal( ArrayList<ListView.FixedViewInfo> headerViewInfos, ArrayList<ListView.FixedViewInfo> footerViewInfos, ListAdapter adapter) { return new HeaderViewListAdapter(headerViewInfos, footerViewInfos, adapter); } 

查看 HeaderViewListAdapter 类的一些方法，可以看出 HeaderViewListAdapter 在计算子项总数和获取子项实例时，都是将顶部View和底部View包含进来的。

public int getCount() { if (mAdapter != null) { return getFootersCount() + getHeadersCount() + mAdapter.getCount(); } else { return getFootersCount() + getHeadersCount(); } } public Object getItem(int position) { // Header (negative positions will throw an IndexOutOfBoundsException) int numHeaders = getHeadersCount(); if (position < numHeaders) { return mHeaderViewInfos.get(position).data; } // Adapter final int adjPosition = position - numHeaders; int adapterCount = 0; if (mAdapter != null) { adapterCount = mAdapter.getCount(); if (adjPosition < adapterCount) { return mAdapter.getItem(adjPosition); } } // Footer (off-limits positions will throw an IndexOutOfBoundsException) return mFooterViewInfos.get(adjPosition - adapterCount).data; } 

经过以上的分析，就给我们提供了设计思路。我们同样可以设计一个包裹了 RecyclerView Adapter 和顶部底部View的外部Adapter，再将该Adapter设置给 RecyclerView。此外，由于原生的 RecyclerView 没有对应的 addHeaderView() 和 addFooterView() 方法，所以也需要再来继承 RecyclerView，在子类中定义需要的方法。

二、自定义Adapter

先定义几个需要用到的变量，headerViews 和 footerViews 分别用于存储顶部View和底部View，两个整数值则是会不断自增加一，用来作为SparseArray< View > 的Key值，adapter则是指向为RecyclerView设置的Adapter

 private RecyclerView.Adapter adapter; private SparseArray<View> headerViews; private SparseArray<View> footerViews; //头部类型开始位置，用于viewType private static int BASE_ITEM_TYPE_HEADER = 1000; //底部类型开始位置，用于viewType private static int BASE_ITEM_TYPE_FOOTER = 2000; 

然后声明几个用来添加和移除View的方法

/** * 添加头部View * * @param view 头部View */ public void addHeaderView(View view) { if (headerViews.indexOfValue(view) < 0) { headerViews.put(BASE_ITEM_TYPE_HEADER++, view); notifyDataSetChanged(); } } /** * 添加底部View * * @param view 底部View */ public void addFooterView(View view) { if (footerViews.indexOfValue(view) < 0) { footerViews.put(BASE_ITEM_TYPE_FOOTER++, view); notifyDataSetChanged(); } } /** * 移除头部View * * @param view View */ public void removeHeaderView(View view) { int index = headerViews.indexOfValue(view); if (index > -1) { headerViews.removeAt(index); notifyDataSetChanged(); } } /** * 移除底部View * * @param view View */ public void removeFooterView(View view) { int index = footerViews.indexOfValue(view); if (index > -1) { footerViews.removeAt(index); notifyDataSetChanged(); } } 

重点是 getItemViewType() 方法，如果索引值position指向的是顶部View或者底部View，则返回该View在 SparseArray< View >中的Key值，以该值作为View的 ItemViewType。如果索引指向的是中间的展示数据的子项，则调用adapter本身相同的方法

 /** * 根据索引判断该位置的View类型 * 如果是头部，则返回该View在headerViews中的key * 如果是底部，则返回该View在footerViews中的key * * @param position 索引 * @return View类型 */ @Override public int getItemViewType(int position) { if (isHeaderPosition(position)) { return headerViews.keyAt(position); } if (isFooterPosition(position)) { position = position - headerViews.size() - adapter.getItemCount(); return footerViews.keyAt(position); } position = position - headerViews.size(); return adapter.getItemViewType(position); } 

为不同的View指定了不同的ItemViewType后，则可以在onCreateViewHolder() 方法中返回不同的 ViewHolder 对象了

 @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (isHeaderViewType(viewType)) { return createHeaderFooterViewHolder(headerViews.get(viewType)); } if (isFooterViewType(viewType)) { return createHeaderFooterViewHolder(footerViews.get(viewType)); } return adapter.onCreateViewHolder(parent, viewType); } 

总的方法定义如下所示：

/** * 作者： 叶应是叶 * 时间： 2017/6/4 */ public class WrapRecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private RecyclerView.Adapter adapter; private SparseArray<View> headerViews; private SparseArray<View> footerViews; //头部类型开始位置，用于viewType private int BASE_ITEM_TYPE_HEADER = 1000; //底部类型开始位置，用于viewType private int BASE_ITEM_TYPE_FOOTER = 2000; public WrapRecyclerViewAdapter(RecyclerView.Adapter adapter) { this.adapter = adapter; headerViews = new SparseArray<>(); footerViews = new SparseArray<>(); this.adapter.registerAdapterDataObserver(new RecyclerView.AdapterDataObserver() { @Override public void onChanged() { super.onChanged(); notifyDataSetChanged(); } }); } @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { if (isHeaderViewType(viewType)) { return createHeaderFooterViewHolder(headerViews.get(viewType)); } if (isFooterViewType(viewType)) { return createHeaderFooterViewHolder(footerViews.get(viewType)); } return adapter.onCreateViewHolder(parent, viewType); } @Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (isHeaderPosition(position) || isFooterPosition(position)) { return; } adapter.onBindViewHolder(holder, position - headerViews.size()); } /** * 获取列表总的条数（头部View个数+列表条数+底部View个数） * * @return 总的条数 */ @Override public int getItemCount() { return adapter.getItemCount() + headerViews.size() + footerViews.size(); } /** * 获取不包含头部和底部View之后列表的条数 * * @return 列表条数 */ public int getDataItemCount() { return adapter.getItemCount(); } /** * 根据索引判断该位置的View类型 * 如果是头部，则返回该View在headerViews中的key * 如果是底部，则返回该View在footerViews中的key * * @param position 索引 * @return View类型 */ @Override public int getItemViewType(int position) { if (isHeaderPosition(position)) { return headerViews.keyAt(position); } if (isFooterPosition(position)) { position = position - headerViews.size() - adapter.getItemCount(); return footerViews.keyAt(position); } position = position - headerViews.size(); return adapter.getItemViewType(position); } /** * 创建头部View或底部View的ViewHolder * * @param view 头部View或底部View * @return ViewHolder */ private RecyclerView.ViewHolder createHeaderFooterViewHolder(View view) { return new RecyclerView.ViewHolder(view) { }; } /** * 判断是否是头部View * * @param key Key * @return 是否是头部View */ private boolean isHeaderViewType(int key) { return headerViews.indexOfKey(key) > -1; } /** * 判断是否是底部View * * @param key Key * @return 是否是底部View */ private boolean isFooterViewType(int key) { return footerViews.indexOfKey(key) > -1; } /** * 根据索引判断该位置的View是否是头部View * * @param position 索引 * @return 是否是头部View */ private boolean isHeaderPosition(int position) { return (position > -1) && (position < headerViews.size()); } /** * 根据索引判断该位置的View是否是底部View * * @param position 索引 * @return 是否是底部View */ private boolean isFooterPosition(int position) { return (position >= (headerViews.size() + adapter.getItemCount())) && (position < (headerViews.size() + adapter.getItemCount() + footerViews.size())); } /** * 添加头部View * * @param view 头部View */ public void addHeaderView(View view) { if (headerViews.indexOfValue(view) < 0) { headerViews.put(BASE_ITEM_TYPE_HEADER++, view); notifyDataSetChanged(); } } /** * 添加底部View * * @param view 底部View */ public void addFooterView(View view) { if (footerViews.indexOfValue(view) < 0) { footerViews.put(BASE_ITEM_TYPE_FOOTER++, view); notifyDataSetChanged(); } } /** * 移除头部View * * @param view View */ public void removeHeaderView(View view) { int index = headerViews.indexOfValue(view); if (index > -1) { headerViews.removeAt(index); notifyDataSetChanged(); } } /** * 移除底部View * * @param view View */ public void removeFooterView(View view) { int index = footerViews.indexOfValue(view); if (index > -1) { footerViews.removeAt(index); notifyDataSetChanged(); } } } 

三、自定义RecyclerView

继承 RecyclerView 实现 WrapRecyclerView 子类
首先需要声明两个变量

 /** * 用来指向传入的 Adapter 或来构造 WrapRecyclerViewAdapter */ private WrapRecyclerViewAdapter wrapRecyclerViewAdapter; /** * 用来指向传入的Adapter */ private Adapter mRecyclerAdapter; 

仿照ListView的思路来重写 setAdapter() 方法，构建一个 WrapRecyclerViewAdapter 对象作为实际的Adapter。
当中，需要注意的是，如果传入的 recyclerAdapter 是直接继承于 WrapViewRecycleAdapter 的话，则直接强转类型就可以了，否则的话需要再来根据 recyclerAdapter 构造一个 WrapViewRecycleAdapter 对象
如果 wrapRecyclerViewAdapter 是通过强转得来的，则当 mRecyclerAdapter 数据刷新时，wrapRecyclerViewAdapter 自然也会做出相应的变化，因为两者指向的是同一个对象。
如果 wrapRecyclerViewAdapter 是用new关键字重新声明的，则需要在为 mRecyclerAdapter 注册一个观察者对象，在 mRecyclerAdapter 数据刷新时同时通知 wrapRecyclerViewAdapter 也进行数据刷新。

 @Override public void setAdapter(Adapter recyclerAdapter) { if (mRecyclerAdapter != null) { mRecyclerAdapter.unregisterAdapterDataObserver(adapterDataObserver); mRecyclerAdapter = null; } mRecyclerAdapter = recyclerAdapter; // 如果传入的 recyclerAdapter 是直接继承于 WrapViewRecycleAdapter 的话，则直接强转类型 // 否则的话再来根据 recyclerAdapter 构造一个 WrapViewRecycleAdapter if (mRecyclerAdapter instanceof WrapRecyclerViewAdapter) { wrapRecyclerViewAdapter = (WrapRecyclerViewAdapter) mRecyclerAdapter; } else { // 注册观察者对象 mRecyclerAdapter.registerAdapterDataObserver(adapterDataObserver); wrapRecyclerViewAdapter = new WrapRecyclerViewAdapter(mRecyclerAdapter); } super.setAdapter(wrapRecyclerViewAdapter); } 

总的代码如下所示：

/** * 作者： 叶应是叶 * 时间： 2017/6/4 * 描述： 可以带头部View与尾部View的RecyclerView */ public class WrapRecyclerView extends RecyclerView { /** * 用来指向传入的 Adapter 或来构造 WrapRecyclerViewAdapter */ private WrapRecyclerViewAdapter wrapRecyclerViewAdapter; /** * 用来指向传入的Adapter */ private Adapter mRecyclerAdapter; public WrapRecyclerView(Context context) { super(context); } public WrapRecyclerView(Context context, AttributeSet attrs) { super(context, attrs); } public WrapRecyclerView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override public void setAdapter(Adapter recyclerAdapter) { if (mRecyclerAdapter != null) { mRecyclerAdapter.unregisterAdapterDataObserver(adapterDataObserver); mRecyclerAdapter = null; } mRecyclerAdapter = recyclerAdapter; // 如果传入的 recyclerAdapter 是直接继承于 WrapViewRecycleAdapter 的话，则直接强转类型 // 否则的话再来根据 recyclerAdapter 构造一个 WrapViewRecycleAdapter if (mRecyclerAdapter instanceof WrapRecyclerViewAdapter) { wrapRecyclerViewAdapter = (WrapRecyclerViewAdapter) mRecyclerAdapter; } else { // 注册观察者对象 mRecyclerAdapter.registerAdapterDataObserver(adapterDataObserver); wrapRecyclerViewAdapter = new WrapRecyclerViewAdapter(mRecyclerAdapter); } super.setAdapter(wrapRecyclerViewAdapter); } /** * AdapterDataObserver是RecyclerView内部的一个抽象类 * 用来作为观察者监听数据变化 */ private AdapterDataObserver adapterDataObserver = new AdapterDataObserver() { @Override public void onChanged() { if (wrapRecyclerViewAdapter != mRecyclerAdapter) { wrapRecyclerViewAdapter.notifyDataSetChanged(); } } @Override public void onItemRangeRemoved(int positionStart, int itemCount) { if (wrapRecyclerViewAdapter != mRecyclerAdapter) { wrapRecyclerViewAdapter.notifyItemRemoved(positionStart); } } @Override public void onItemRangeMoved(int fromPosition, int toPosition, int itemCount) { if (wrapRecyclerViewAdapter != mRecyclerAdapter) { wrapRecyclerViewAdapter.notifyItemMoved(fromPosition, toPosition); } } @Override public void onItemRangeChanged(int positionStart, int itemCount) { if (wrapRecyclerViewAdapter != mRecyclerAdapter) { wrapRecyclerViewAdapter.notifyItemChanged(positionStart); } } @Override public void onItemRangeChanged(int positionStart, int itemCount, Object payload) { if (wrapRecyclerViewAdapter != mRecyclerAdapter) { wrapRecyclerViewAdapter.notifyItemChanged(positionStart, payload); } } @Override public void onItemRangeInserted(int positionStart, int itemCount) { if (wrapRecyclerViewAdapter != mRecyclerAdapter) { wrapRecyclerViewAdapter.notifyItemInserted(positionStart); } } }; /** * 添加头部View * * @param view View */ public void addHeaderView(View view) { if (wrapRecyclerViewAdapter != null) { wrapRecyclerViewAdapter.addHeaderView(view); } else { throw new RuntimeException("WrapRecyclerViewAdapter == null"); } } /** * 添加底部View * * @param view View */ public void addFooterView(View view) { if (wrapRecyclerViewAdapter != null) { wrapRecyclerViewAdapter.addFooterView(view); } else { throw new RuntimeException("WrapRecyclerViewAdapter == null"); } } /** * 移除头部View * * @param view View */ public void removeHeaderView(View view) { if (wrapRecyclerViewAdapter != null) { wrapRecyclerViewAdapter.removeHeaderView(view); } else { throw new RuntimeException("WrapRecyclerViewAdapter == null"); } } /** * 移除底部View * * @param view View */ public void removeFooterView(View view) { if (wrapRecyclerViewAdapter != null) { wrapRecyclerViewAdapter.removeFooterView(view); } else { throw new RuntimeException("WrapRecyclerViewAdapter == null"); } } } 

四、实际使用

以我上一篇文章：解析RecyclerView（1）——带点击事件监听的通用Adapter 使用到的 MyCommonRecyclerAdapter 类作为最原始的Adapter

在布局文件中声明的RecyclerView就要使用自定义的 WrapRecyclerView 了，再增加几个按钮用于进行RecyclerView展示的数据，顶部View和底部View的增添删除操作。

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.czy.demo.RecyclerView.Wrap.WrapRecyclerActivity"> <Button android:id="@+id/btn_addData" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="增添数据" /> <Button android:id="@+id/btn_deleteData" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn_addData" android:text="删除数据" /> <Button android:id="@+id/btn_addHeaderView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn_deleteData" android:text="增加头部View" /> <Button android:id="@+id/btn_deleteHeaderView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn_addHeaderView" android:text="删除头部View" /> <Button android:id="@+id/btn_addFooterView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn_deleteHeaderView" android:text="增加底部View" /> <Button android:id="@+id/btn_deleteFooterView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/btn_addFooterView" android:text="删除底部View" /> <com.czy.common.RecyclerView.Wrap.WrapRecyclerView android:id="@+id/wrv_dataList" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/btn_deleteFooterView" /> </RelativeLayout> 

Activity总的代码如下所示，加载的顶部View布局文件 R.layout.header_view 只包含含一个 ImageView 控件，底部View布局文件 R.layout.footer _view 只包含一个 TextView 控件

public class WrapRecyclerActivity extends AppCompatActivity implements CommonRecyclerHolder.onClickCommonListener, View.OnClickListener { private List<Data> dataList; private List<View> headerViewList; private List<View> footerViewList; private WrapRecyclerView wrv_dataList; private MyCommonRecyclerAdapter myCommonRecyclerAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wrap_recycler); initData(); wrv_dataList = (WrapRecyclerView) findViewById(R.id.wrv_dataList); wrv_dataList.setLayoutManager(new LinearLayoutManager(this)); myCommonRecyclerAdapter = new MyCommonRecyclerAdapter(this, dataList, R.layout.item, this); wrv_dataList.setAdapter(myCommonRecyclerAdapter); View headerView1 = getLayoutInflater().inflate(R.layout.header_view, wrv_dataList, false); View headerView2 = getLayoutInflater().inflate(R.layout.header_view, wrv_dataList, false); View footerView1 = getLayoutInflater().inflate(R.layout.footer_view, wrv_dataList, false); View footerView2 = getLayoutInflater().inflate(R.layout.footer_view, wrv_dataList, false); wrv_dataList.addHeaderView(headerView1); wrv_dataList.addHeaderView(headerView2); wrv_dataList.addFooterView(footerView1); wrv_dataList.addFooterView(footerView2); headerViewList.add(headerView1); headerViewList.add(headerView2); footerViewList.add(footerView1); footerViewList.add(footerView2); findViewById(R.id.btn_addData).setOnClickListener(this); findViewById(R.id.btn_deleteData).setOnClickListener(this); findViewById(R.id.btn_addHeaderView).setOnClickListener(this); findViewById(R.id.btn_deleteHeaderView).setOnClickListener(this); findViewById(R.id.btn_addFooterView).setOnClickListener(this); findViewById(R.id.btn_deleteFooterView).setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.btn_addData: Data data = new Data(R.mipmap.ic_launcher, "Hi"); dataList.add(data); myCommonRecyclerAdapter.notifyDataSetChanged(); break; case R.id.btn_deleteData: if (dataList.size() > 0) { dataList.remove(0); } myCommonRecyclerAdapter.notifyDataSetChanged(); break; case R.id.btn_addHeaderView: View headerView = getLayoutInflater().inflate(R.layout.header_view, wrv_dataList, false); headerViewList.add(headerView); wrv_dataList.addHeaderView(headerView); break; case R.id.btn_deleteHeaderView: if (headerViewList.size() > 0) { wrv_dataList.removeHeaderView(headerViewList.get(0)); headerViewList.remove(0); } break; case R.id.btn_addFooterView: View footerView = getLayoutInflater().inflate(R.layout.footer_view, wrv_dataList, false); footerViewList.add(footerView); wrv_dataList.addFooterView(footerView); break; case R.id.btn_deleteFooterView: if (footerViewList.size() > 0) { wrv_dataList.removeFooterView(footerViewList.get(0)); footerViewList.remove(0); } break; } } private void initData() { dataList = new ArrayList<>(); headerViewList = new ArrayList<>(); footerViewList = new ArrayList<>(); for (int i = 0; i < 50; i++) { Data data = new Data(R.mipmap.ic_launcher_round, "Hi:" + i); dataList.add(data); } } @Override public void onClick(int position) { Toast.makeText(this, "点击：" + position, Toast.LENGTH_SHORT).show(); } @Override public void onLongClick(int position) { Toast.makeText(this, "长按：" + position, Toast.LENGTH_SHORT).show(); } } 

运行效果：

这里提供代码下载：解析RecyclerView（2）——带顶部View和底部View的RecyclerView