在RecyclerView中添加头部和尾部

1. 界面

就是实现一个有头部、内容部分和底部的 RecyclerView，头部为置顶的公告，底部有一个按钮可以添加 item
以下为实际界面图：

效果图

2. 实现

首先先新建一个class文件继承 RecyclerView.Adapter 代码如下：

public class Adapter extends RecyclerView.Adapter {

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return null;
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 0;
    }

}

由于头部尾部和中间的 item 的布局都是不一样的所以我们需要用到 RecyclerView.Adapter 中的 getItemViewType(int position) 这个方法来判断 item 的类型，然后在 onCreateViewHolder(ViewGroup parent, int viewType) 中根据getItemViewType 中返回的 viewType 来进行选择对应的布局文件和 ViewHolder，相关代码如下：

    // 首先定义几个常量标记item的类型
    public static final int ITEM_TYPE_HEADER = 0;
    public static final int ITEM_TYPE_CONTENT = 1;
    public static final int ITEM_TYPE_BOTTOM = 2;

    private int mHeaderCount = 0;// 头部的数量
    private int mBottomCount = 0;// 底部的数量
    
    // 中间内容长度
    public int getContentItemCount(){
        return mContentList.size();
    }
    
    // 判断当前item是否是头部（根据position来判断）
    public boolean isHeaderView(int position) {
        return mHeaderCount != 0 && position < mHeaderCount;
    }

    // 判断当前item是否是底部
    public boolean isBottomView(int position) {
        return mBottomCount != 0 && position >= (mHeaderCount + getContentItemCount());
    }
    
    // 判断当前item类型
    @Override
    public int getItemViewType(int position) {
        if (isHeaderView(position)) {
            // 头部View
            return ITEM_TYPE_HEADER;
        }else if (isBottomView(position)) {
            // 底部View
            return ITEM_TYPE_BOTTOM;
        } else {
            // 内容View
            return ITEM_TYPE_CONTENT;
        }
    }
    
    // 根据返回的viewType进行判断，选择对应的布局文件和 ViewHolder
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == ITEM_TYPE_HEADER) {
            return new HeaderViewHolder(mLayoutInflater.inflate(R.layout.main_activity_list_item_header, parent, false));
        }else if (viewType == ITEM_TYPE_CONTENT){
            return new ViewHolder(mLayoutInflater.inflate(R.layout.main_activity_list_item_content, parent, false));
        }else if (viewType == ITEM_TYPE_BOTTOM){
            return new BottomViewHolder(mLayoutInflater.inflate(R.layout.main_activity_list_item_bottom, parent, false));
        }
        return null;
    }

其中 HeaderViewHolder、ViewHolder、BottomViewHolder 的布局比较简单这里就不贴出来了，详情可以到我的Github上看

由于用了三种不同的 ViewHolder 所以在 onBindViewHolder(RecyclerView.ViewHolder holder, final int position) 中就需要判断 holder 是哪个 item 类型的

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        // 添加了头部，所以 position 需要进行换算
        mContentPosition = position - mHeaderCount;
        mBottomPosition = position - mHeaderCount - getContentItemCount();
        // 通过 instanceof 判断 holder 继承自哪个类来判断是属于头部尾部还是中间
        if (holder instanceof ViewHolder){
            ((ViewHolder)holder).tvTitle.setText(mContentList.get(mContentPosition));
        }else if (holder instanceof HeaderViewHolder){
            ((HeaderViewHolder)holder).tvTitle.setText(mHeaderList.get(position));
        }else if (holder instanceof BottomViewHolder){
            ((BottomViewHolder)holder).relativeLayout.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mOnClickItemListener.onClickItem(getItemCount());
                }
            });
        }
    }

3. 使用方法

使用方法和普通的 RecyclerView 的用法差不多，只多了几个设置底部和头部 item 数量的方法，以下为用法示例

    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getBaseContext());
    mRecyclerView.setLayoutManager(linearLayoutManager);
    // mHeaderList 为头部数据，mContentList 为中间内容的数据
    EasyAdapter adapter = new EasyAdapter(mHeaderList, mContentList, getBaseContext());
    // 在这个例子中头部是置顶公告，有对应的数据，所以在 adapter 中就根据数据的 size 来设置头部数量了
    adapter.setBottomCount(1);
    mRecyclerView.setAdapter(adapter);

4. 运行效果图

运行效果图

5. Github 项目地址

https://github.com/RoNnx/EasyRecyclerView

本文作者：RoNnx
博客链接：http://ronnx.top/2018/07/09/20180005/
版权声明：本作品采用「知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可」,转载请注明出处！