Android：RecyclerView 添加 Header 和 Footer（一）

一、简介

与 ListView 和 GridView 相比，RecyclerView 的灵活性和性能上的都有很大的提升。所以用 RecyclerView 来实现 Header 和 Footer 更加灵活方便。

二、实现

1.布局

列表

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns: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"
 android:paddingBottom="@dimen/activity_vertical_margin"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 tools:context="com.study.wnw.recyclerviewheaderfooter.MainActivity">
 
 <androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
    
</RelativeLayout>

列表项(item)

<?xml version="1.0" encoding="utf-8"?><LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="50dp">
 <TextView
    android:id="@+id/item"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textSize="20sp"
    android:textColor="@color/colorAccent"
    android:gravity="center"
    android:background="#08e630"/>
</LinearLayout>

Header

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="100dp">
 
 <TextView
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="我是Header"
    android:textSize="30sp"
    android:textColor="#fde70b0b"
    android:background="#f9777979"
    android:gravity="center"/>
</LinearLayout>

Footer

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="100dp">
 
 <TextView
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="我是Footer"
    android:textSize="30sp"
    android:textColor="#fde70b0b"
    android:background="#f9777979"
    android:gravity="center"/>
</LinearLayout>

2.代码实现

MainActivity.java

public class MainActivity extends Activity {
    private RecyclerView mRecyclerView;
    private MyAdapter mMyAdapter;
    private List<String> mList;

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

        //RecyclerView三部曲+LayoutManager  
        mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        initData();
        mMyAdapter = new MyAdapter(mList);
        mRecyclerView.setAdapter(mMyAdapter);

        //为RecyclerView添加HeaderView和FooterView
        setHeaderView(mRecyclerView);
        setFooterView(mRecyclerView);
    }

    //初始化RecyclerView中每个item的数据
    private void initData(){
        mList = new ArrayList<String>();
        for (int i = 0; i < 20; i++){
            mList.add("item" + i);
        }
    }

    private void setHeaderView(RecyclerView view){
        View header = LayoutInflater.from(this).inflate(R.layout.header, view, false);
        mMyAdapter.setHeaderView(header);
    }

    private void setFooterView(RecyclerView view){
        View footer = LayoutInflater.from(this).inflate(R.layout.footer, view, false);  
        mMyAdapter.setFooterView(footer);
    }
}

MyAdapter.java

public class MyAdapter extendsRecyclerView.Adapter<RecyclerView.ViewHolder> {
    public static final int TYPE_HEADER = 0; //说明是带有Header的
    public static final int TYPE_FOOTER = 1; //说明是带有Footer的
    public static final int TYPE_NORMAL = 2; //说明是不带有header和footer的
    
    //获取从Activity中传递过来每个item的数据集合
    private List<String> mDatas;
    //HeaderView, FooterView
    private View mHeaderView;
    private View mFooterView;
    
    //构造函数
    public MyAdapter(List<String> list){
        this.mDatas = list;
    }
    
    //HeaderView和FooterView的get和set函数
    public View getHeaderView() {
        return mHeaderView;
    }
    public void setHeaderView(View headerView) {
        mHeaderView = headerView;
        notifyItemInserted(0);
    }
    public View getFooterView() {
        return mFooterView;
    }
    public void setFooterView(View footerView) {
        mFooterView = footerView;
        notifyItemInserted(getItemCount()-1);
    }
    
    /** 重写这个方法，很重要，是加入Header和Footer的关键，我们通过判断item的类型，从而绑定不同的view * */
    @Override
    public int getItemViewType(int position) {  
        if (mHeaderView == null && mFooterView == null){  
            return TYPE_NORMAL;
        }
        if (position == 0){  
            //第一个item应该加载Header  
            return TYPE_HEADER;
        }
        if (position == getItemCount()-1){  
            //最后一个,应该加载Footer  
            return TYPE_FOOTER;
        }
        return TYPE_NORMAL;
    }
    
    //创建View，如果是HeaderView或者是FooterView，直接在Holder中返回  
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(mHeaderView != null && viewType == TYPE_HEADER) {  
            return new ListHolder(mHeaderView);
        }
        if(mFooterView != null && viewType == TYPE_FOOTER){  
            return new ListHolder(mFooterView);
        }
        View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
        return new ListHolder(layout);
    }
    
    //绑定View，这里是根据返回的这个position的类型，从而进行绑定的， HeaderView和FooterView, 就不同绑定了
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if(getItemViewType(position) == TYPE_NORMAL){  
            if(holder instanceof ListHolder) {  
                //这里加载数据的时候要注意，是从position-1开始，因为position==0已经被header占用了  
                ((ListHolder) holder).tv.setText(mDatas.get(position-1));  
                return;  
            }  
            return;
        }else if(getItemViewType(position) == TYPE_HEADER){  
            return;  
        }else{  
            return;
        }
    }
    
    //在这里面加载ListView中的每个item的布局
    class ListHolder extends RecyclerView.ViewHolder{
        TextView tv;
        public ListHolder(View itemView) {  
            super(itemView);  
            //如果是headerview或者是footerview,直接返回  
            if (itemView == mHeaderView){  
                return;  
            }  
            if (itemView == mFooterView){  
                return;  
            }  
            tv = (TextView)itemView.findViewById(R.id.item);
        }
    }
    
    //返回View中Item的个数，这个时候，总的个数应该是ListView中Item的个数加上HeaderView和FooterView
    @Override
    public int getItemCount() {
        if(mHeaderView == null && mFooterView == null){  
            return mDatas.size();
        }else if(mHeaderView == null && mFooterView != null){  
            return mDatas.size() + 1;
        }else if (mHeaderView != null && mFooterView == null){  
            return mDatas.size() + 1;
        }else {  
            return mDatas.size() + 2;
        }
    }
}

三、总结

实现 Header 和 Footer 的方式很多，这是一种方法。所有的实现方法都需要通过 Adapter 来实现，只需要控制好数据列表中 position 就可以了。这里仅仅显示文字，当然还可以实现其他更复杂的布局。