RecyclerView添加Header、Footer、Empty

有的时候，我们需要在RecyclerView的头部加一些信息，底部加一些信息（如加载更多），列表为空的时候显示一个空的提示，这个时候可以考虑为RecyclerView添加Header、Footer和Empty信息。我们知道RecyclerView其实是一个列表，这个时候我们就可以考虑把Header、Footer和Empty当成列表中的一个item，通过type来区分不同的item显示不同的内容。

具体的操作是：

Adapter：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private final int ITEM_TYPE_HEADER = 0;
    private final int ITEM_TYPE_NRMAL = 1;
    private final int ITEM_TYPE_FOOTER = 2;
    private final int ITEM_TYPE_EMPTY = 3;

    private View mHeaderView;
    private View mFooterView;
    private View mEmptyView;

    private List<StudentEntity> mDataList;
    private Context mContext;

    public MyAdapter(List<StudentEntity> mData, Context mContext) {
        this.mDataList = mData;
        this.mContext = mContext;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        switch (viewType) {//通过不同的type，创建不同布局的ViewHolder
            case ITEM_TYPE_HEADER:
                return new MyViewHolder(mHeaderView);
            case ITEM_TYPE_EMPTY:
                return new MyViewHolder(mEmptyView);
            case ITEM_TYPE_FOOTER:
                return new MyViewHolder(mFooterView);
            default:
                return new MyViewHolder(LayoutInflater.from(mContext).inflate(R.layout.item, parent, false));
        }
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        //根据不同的type，设置不同类型的item数据
        int type = getItemViewType(position);
        if (type == ITEM_TYPE_HEADER || type == ITEM_TYPE_FOOTER || type == ITEM_TYPE_EMPTY) return;
        holder.mTvName.setText(mDataList.get(getRealItemPosition(position)).getName());
        holder.mTvAge.setText(mDataList.get(getRealItemPosition(position)).getAge());
    }

    @Override
    public int getItemCount() {
        int itemCount = mDataList.size();
        if (null != mEmptyView && itemCount == 0) itemCount++;//对Empty的判断，一定要放在第一位
        if (null != mHeaderView) itemCount++;
        if (null != mFooterView) itemCount++;
        return itemCount;
    }

    @Override
    public int getItemViewType(int position) {//设置不同类型的type
        if (null != mHeaderView && position == 0)
            return ITEM_TYPE_HEADER;
        else if (null != mFooterView && position == getItemCount() - 1)
            return ITEM_TYPE_FOOTER;
        else if (null != mEmptyView && mDataList.size() == 0)
            return ITEM_TYPE_EMPTY;
        return ITEM_TYPE_NRMAL;

    }

    private int getRealItemPosition(int position) {//获取实际列表数据的position
        if (null != mHeaderView) return position - 1;
        return position;
    }

    /**
     * 设置header
     */
    public void setHeaderView(View headerView) {
        this.mHeaderView = headerView;
        notifyItemInserted(0);
    }

    /**
     * 设置footer
     */
    public void setFooterView(View footerView) {
        this.mFooterView = footerView;
        notifyItemInserted(getItemCount() - 1);
    }

    /**
     * 设置data为空的时候显示的view
     */
    public void setEmptyView(View emptyView) {
        this.mEmptyView = emptyView;
        notifyDataSetChanged();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        private TextView mTvName;
        private TextView mTvAge;

        public MyViewHolder(View itemView) {
            super(itemView);
            if (itemView == mHeaderView || itemView == mEmptyView || itemView == mFooterView)
                return;
            mTvName = itemView.findViewById(R.id.tv_name);
            mTvAge = itemView.findViewById(R.id.tv_age);

        }
    }
}

 

Activity：

mHeaderView = LayoutInflater.from(this).inflate(R.layout.header, mRecyclerView, false);
mFooterView = LayoutInflater.from(this).inflate(R.layout.footer, mRecyclerView, false);
mEmptyView = LayoutInflater.from(this).inflate(R.layout.empty, mRecyclerView, false);
mAdapter = new MyAdapter(mData, this);
mAdapter.setHeaderView(mHeaderView);
mAdapter.setFooterView(mFooterView);
mAdapter.setEmptyView(mEmptyView);

 

有数据的时候显示效果是：

没有数据时候的显示效果是：

 

对应的github地址：https://github.com/ruxing1102/Practice

 

这样基本上就能实现所有的效果了，有一个不足的地方是如果整个项目中有很多个列表的页面，每个页面的Adapter都要写这些代码，就有些冗余了，最好的办法是把这些代码封装起来，封装的方式就是自定义RecyclerView。然后在RecyclerView中定义一个内部的Adapter，内部Adapter对header、Footer和Empty进行处理，外部的Adapter跟普通的Adapter一样，实现onCreateViewHolder()、onBindViewHolder()和getItemCount()方法即可。

自定义RecyclerView：

public class MyRecyclerView extends RecyclerView {

    private View mHeaderView;
    private View mFooterView;
    private View mEmptyView;
    private BaseAdapter mAdapter;


    public MyRecyclerView(Context context) {
        super(context);
    }

    public MyRecyclerView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public MyRecyclerView(Context context, @Nullable AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void setAdapter(Adapter adapter) {
        if (adapter != null) mAdapter = new BaseAdapter(adapter);//创建基于外部Adapter的内部Adapter
        super.setAdapter(mAdapter);//将内部Adapter设置为RecyclerView的Adapter
    }

    public void setHeaderView(View headerView) {
        this.mHeaderView = headerView;
        if (null != mAdapter) mAdapter.notifyItemInserted(0);
    }

    public void setmFooterView(View footerView) {
        this.mFooterView = footerView;
        if (null != mAdapter) mAdapter.notifyItemInserted(mAdapter.getItemCount() - 1);
    }

    public void setEmptyView(View emptyView) {
        this.mEmptyView = emptyView;
        if (null != mAdapter) mAdapter.notifyDataSetChanged();
    }

    private class BaseAdapter extends RecyclerView.Adapter<ViewHolder> {

        private Adapter mDataAdapter;
        private final int ITEM_TYPE_HEADER = 0;
        private final int ITEM_TYPE_FOOTER = 1;
        private final int ITEM_TYPE_EMPTY = 2;
        private final int ITEM_TYPE_DATA = 3;


        public BaseAdapter(Adapter mDataAdapter) {
            this.mDataAdapter = mDataAdapter;
        }

        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            switch (viewType) {
                case ITEM_TYPE_HEADER:
                    return new ViewHolder(mHeaderView) {
                    };
                case ITEM_TYPE_FOOTER:
                    return new ViewHolder(mFooterView) {
                    };
                case ITEM_TYPE_EMPTY:
                    return new ViewHolder(mEmptyView) {
                    };
                default:
                    return mDataAdapter.onCreateViewHolder(parent, viewType);
            }
        }

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            int type = getItemViewType(position);
            if (type == ITEM_TYPE_HEADER || type == ITEM_TYPE_FOOTER || type == ITEM_TYPE_EMPTY)
                return;
            mDataAdapter.onBindViewHolder(holder, getRealDataPosition(position));
        }

        @Override
        public int getItemCount() {
            int itemCount = mDataAdapter.getItemCount();
            if (null != mEmptyView && mDataAdapter.getItemCount() == 0) itemCount++;
            if (null != mHeaderView) itemCount++;
            if (null != mFooterView) itemCount++;
            return itemCount;
        }

        @Override
        public int getItemViewType(int position) {
            if (null != mHeaderView && position == 0)
                return ITEM_TYPE_HEADER;
            if (null != mFooterView && position == getItemCount() - 1)
                return ITEM_TYPE_FOOTER;
            if (null != mEmptyView && mDataAdapter.getItemCount() == 0)
                return ITEM_TYPE_EMPTY;
            return ITEM_TYPE_DATA;
        }

        private int getRealDataPosition(int position) {
            if (null != mHeaderView) position--;
            return position;
        }
    }

}

 

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.ruxing.customrecyclerview.MyRecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Activity：

public class MainActivity extends AppCompatActivity {

    private MyRecyclerView mRecyclerView;
    private List<DataEntity> mList;
    private DataAdapter mDataAdapter;

    private View mHeaderView;
    private View mFooterView;
    private View mEmptyView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        mList = new ArrayList<>();
        for (int i = 0; i < 30; i++) {
            DataEntity entity = new DataEntity();
            entity.setName("姓名" + i);
            entity.setSex("性别" + i);
            mList.add(entity);
        }
        mDataAdapter = new DataAdapter(this, mList);
        mRecyclerView.setAdapter(mDataAdapter);
        mRecyclerView.setHeaderView(mHeaderView);
        mRecyclerView.setmFooterView(mFooterView);
        mRecyclerView.setEmptyView(mEmptyView);
    }

    private void initViews() {
        mRecyclerView = findViewById(R.id.recyclerView);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
        mHeaderView = LayoutInflater.from(this).inflate(R.layout.item_header, mRecyclerView, false);
        mFooterView = LayoutInflater.from(this).inflate(R.layout.item_footer, mRecyclerView, false);
        mEmptyView = LayoutInflater.from(this).inflate(R.layout.item_empty, mRecyclerView, false);
    }
}

 

对应的github地址：https://github.com/ruxing1102/CustomRecyclerView/tree/master

开发过程中参考到https://www.jianshu.com/p/0eebc6c2a08d