带header的RecyclerView

前面介绍了RecyclerView的简单用法，现在学着在这里加入一个头部的HearderView，先上效果图：

进入正题，我们要先设计两个layout，一个放列表的元素(略)，一个放Header，header如下：header_test.xml

<?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="wrap_content"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:background="@color/write_ffffff"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_my_bg"
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:background="@mipmap/beanmom_homepage_bg"
                android:orientation="vertical"
                android:scaleType="fitCenter"></ImageView>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:orientation="horizontal"
                android:paddingTop="60dp"
                android:background="@mipmap/beanmom_homepage_bg2">

                <LinearLayout
                    android:id="@+id/ll_my_talk_head"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="25dp"
                        android:layout_marginLeft="25dp"
                        android:layout_weight="1"
                        android:gravity="right">

                        <TextView
                            android:id="@+id/tv_my_concern"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center"
                            android:padding="10dp"
                            android:text="test1"
                            android:textColor="#353535"/>
                        <TextView
                            android:id="@+id/tv_my_concern_num"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center"
                            android:padding="10dp"
                            android:singleLine="true"
                            android:text="0"
                            android:textColor="#353535"/>
                    </LinearLayout>

                    <View
                        android:layout_width="0.5dp"
                        android:layout_height="match_parent"
                        android:layout_marginBottom="20dp"
                        android:layout_marginTop="20dp"
                        android:background="#000000" />

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="25dp"
                        android:layout_marginRight="25dp"
                        android:layout_weight="1"
                        android:gravity="left">

                        <TextView
                            android:id="@+id/tv_my_fans"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center"
                            android:padding="10dp"
                            android:text="test2"
                            android:textColor="#353535"/>
                        <TextView
                            android:id="@+id/tv_my_fans_num"
                            android:layout_width="wrap_content"
                            android:layout_height="match_parent"
                            android:gravity="center"
                            android:padding="10dp"
                            android:singleLine="true"
                            android:text="0"
                            android:textColor="#353535"/>
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="95dp"
            android:orientation="vertical">

            <ImageButton
                android:id="@+id/ib_my_photo"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_gravity="center_horizontal"
                android:background="@mipmap/default_photo2"
                /><!--app:clickEffect="150"-->

            <TextView
                android:id="@+id/tv_my_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:padding="10dp"
                android:singleLine="true"
                android:text="昵称"
                android:textColor="#353535"/>
        </LinearLayout>
    </FrameLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#ffffff"
        android:gravity="center"
        android:text="-----下面是正常的列表-----">
    </TextView>

</LinearLayout>

布局准备好了，我们来写Adapter，Adapter中需要获得Header的View，然后当作其中一个Item放在RecyclerView中，只是这个Item占据了第一行的全部，不懂看代码中的注释：

/**
 * Created by lan.zheng on 2016/8/11.
 */
public class HeaderTestAdapter extends RecyclerView.Adapter {
    private static final int ITEM_VIEW_TYPE_HEADER = 0;  //Header标识
    private static final int ITEM_VIEW_TYPE_ITEM = 1;
    private static View mHeader;
    private static Context sContext;

    public HeaderTestAdapter(View header,Context context){
        if(header != null){
            mHeader =  header;  //传入Header的View
            sContext = context;
        }
    }

    public boolean isHeader(int position) {
        return position == 0;  //是否是Header
    }

    @Override
    public int getItemViewType(int position) {
        return isHeader(position) ? ITEM_VIEW_TYPE_HEADER : ITEM_VIEW_TYPE_ITEM;  //返回View的类型，是否是Header，用于下面的方法
    }
    
    @Override
    public DisplayHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == ITEM_VIEW_TYPE_HEADER) {
            return new DisplayHolder(mHeader);  
        }
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.grid_item, parent, false);
        return new DisplayHolder(view);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
        if(isHeader(position)){
            return;  //如果是Header,不需要在这里操作
        }
        DisplayHolder lHolder = (DisplayHolder) holder;
        lHolder.tv_list_item_show.setText("tip"+position); //普通的Item赋值
        lHolder.tv_list_item_show.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(sContext,"tip"+String.valueOf(position),Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        return 13;    //这里我固定死了，有需要的可以传入真实的数据
    }

    private static class DisplayHolder extends RecyclerView.ViewHolder {

        TextView tv_list_item_show;  //Item的初始化

        public DisplayHolder(View itemView) {
            super(itemView);
            tv_list_item_show = (TextView)itemView.findViewById(R.id.tv_list_item_show);
        }

    }

}

准备完毕，Activity中就可以使用了：

RecyclerView mRecyclerView;
HeaderTestAdapter mHeaderTestAdapter;
 private void initView(){
        mRecyclerView = (RecyclerView) findViewById(R.id.rv_test);
        final GridLayoutManager lGridLayoutManager = new GridLayoutManager(this,3);
        mRecyclerView.setLayoutManager(lGridLayoutManager);
        View header = LayoutInflater.from(this).inflate(R.layout.header_test,mRecyclerView,false);
        mHeaderTestAdapter = new HeaderTestAdapter(header,this);
        mRecyclerView.setAdapter(mHeaderTestAdapter);
        lGridLayoutManager .setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {   //重写该方法，让header横跨所有列
                return mHeaderTestAdapter.isHeader(position) ? lGridLayoutManager.getSpanCount() : 1;
            }
        });
    }

详细讲解一下上面的操作，先初始化RecyclerView, 用的是网格的管理，然后初始化我们的Header View，把它的实例传入适配器去，然后重写getSpanSize（）方法，当是Header的position的时候，我们就让其横跨所有列。

好了，以上就是增加Header的方法，有什么更好的方法欢迎提出。