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