RecyclerView添加Header的正确方式

如何為RecyclerView添加Header

大家在使用ListView的時候可以很輕松的添加headers， 但是不知道大家發現沒有，RecyclerView和各種LayoutManager都沒有哪個方法是為添加header而設立的，這個時候我們就開始思考如何為RecyclerView添加header了。 這裡我們的解決方案和網上你能搜到的大多數方案一樣，是通過控制Adapter的itemType來設定的，思路就是根據不同的itemType去加載不同的布局。

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

    public static final int TYPE_HEADER = ;
    public static final int TYPE_NORMAL = ;

    private ArrayList<String> mDatas = new ArrayList<>();

    private View mHeaderView;

    private OnItemClickListener mListener;

    public void setOnItemClickListener(OnItemClickListener li) {
        mListener = li;
    }

    public void setHeaderView(View headerView) {
        mHeaderView = headerView;
        notifyItemInserted();
    }

    public View getHeaderView() {
        return mHeaderView;
    }

    public void addDatas(ArrayList<String> datas) {
        mDatas.addAll(datas);
        notifyDataSetChanged();
    }

    @Override
    public int getItemViewType(int position) {
        if(mHeaderView == null) return TYPE_NORMAL;
        if(position == ) return TYPE_HEADER;
        return TYPE_NORMAL;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(mHeaderView != null && viewType == TYPE_HEADER) return new Holder(mHeaderView);
        View layout = LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false);
        return new Holder(layout);
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
        if(getItemViewType(position) == TYPE_HEADER) return;

        final int pos = getRealPosition(viewHolder);
        final String data = mDatas.get(pos);
        if(viewHolder instanceof Holder) {
            ((Holder) viewHolder).text.setText(data);
            if(mListener == null) return;
            viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    mListener.onItemClick(pos, data);
                }
            });
        }
    }

    public int getRealPosition(RecyclerView.ViewHolder holder) {
        int position = holder.getLayoutPosition();
        return mHeaderView == null ? position : position - ;
    }

    @Override
    public int getItemCount() {
        return mHeaderView == null ? mDatas.size() : mDatas.size() + ;
    }

    class Holder extends RecyclerView.ViewHolder {

        TextView text;

        public Holder(View itemView) {
            super(itemView);
            if(itemView == mHeaderView) return;
            text = (TextView) itemView.findViewById(R.id.text);
        }
    }

    interface OnItemClickListener {
        void onItemClick(int position, String data);
    }
}
           

這裡我們重寫了getItemViewType方法，并根據位置來傳回不同的type，這個type是我們預先商定好的常量，接在onCreateViewHolder方法中來判斷itemType，如果是header，則傳回我們設定的headerView，否則正常加載item布局，相信大家對于上面的代碼不會有任何疑問，接下來我們就在Activity中用一下試試看，

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

    mRecyclerView = (RecyclerView) findViewById(R.id.list);
    mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
    mRecyclerView.setLayoutManager(mLayoutManager);
    mRecyclerView.setItemAnimator(new DefaultItemAnimator());

    mAdapter = new MyAdapter();
    mRecyclerView.setAdapter(mAdapter);
    mAdapter.addDatas(generateData());
    setHeader(mRecyclerView);
    mAdapter.setOnItemClickListener(new MyAdapter.OnItemClickListener() {
        @Override
        public void onItemClick(int position, String data) {
            Toast.makeText(MainActivity.this, data, Toast.LENGTH_SHORT).show();
        }
    });
}

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

這裡LayoutManager我們使用了LinearLayoutManager，并且給Adapter設定了一個header，運作一下

看看效果：

恩，還不錯，item的點選事件也很完美，那接下來，我們将LayoutManager換成GridLayoutManager看看咋樣。

為GridLayoutManager添加header

//  mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
mLayoutManager = new GridLayoutManager(this, );
           

哎喲，我的小心髒啊，快受不了了，這是什麼玩意，我們的header竟然作為一個cell出現在了界面上，這完全不是我們想要的效果啊！ 冷靜下來想想，肯定會有解決方法的吧。這時候我們就該引入一個不太常用的方法了：

gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        return getItemViewType(position) == TYPE_HEADER
                ? gridManager.getSpanCount() : ;
    }
});
           

我們解釋一下這段代碼，首先我們設定了一個SpanSizeLookup，這個類是一個抽象類，而且僅有一個抽象方法getSpanSize，這個方法的傳回值決定了我們每個position上的item占據的單元格個數，而我們這段代碼綜合上面為GridLayoutManager設定的每行的個數來解釋的話，

就是目前位置是header的位置，那麼該item占據2個單元格，正常情況下占據1個單元格。那這段代碼放哪呢？ 為了以後的封裝，我們還是在Adapter中找方法放吧。

我們在Adapter中再重寫一個方法onAttachedToRecyclerView，

@Override
public void onAttachedToRecyclerView(RecyclerView recyclerView) {
    super.onAttachedToRecyclerView(recyclerView);
    RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
    if(manager instanceof GridLayoutManager) {
        final GridLayoutManager gridManager = ((GridLayoutManager) manager);
        gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return getItemViewType(position) == TYPE_HEADER
                        ? gridManager.getSpanCount() : ;
            }
        });
    }
}
           

這個方法在RecyclerView.setAdapter(MyAdapter)時就會自動執行；

這個時候我們再來看一下效果，

恩，這次達到我們的要求了，不過對于StaggeredGridLayoutManager我們還沒做處理，而且我們還發現StaggeredGridLayoutManager中并沒有像GridLayoutManager中這樣的方法，我們還需要單獨為StaggeredGridLayoutManager單獨處理一下。

為StaggeredGridLayoutManager添加header

我們繼續重寫Adapter中另外一個方法。

@Override
public void onViewAttachedToWindow(RecyclerView.ViewHolder holder) {
    super.onViewAttachedToWindow(holder);
    ViewGroup.LayoutParams lp = holder.itemView.getLayoutParams();
    if(lp != null
            && lp instanceof StaggeredGridLayoutManager.LayoutParams
            && holder.getLayoutPosition() == ) {
        StaggeredGridLayoutManager.LayoutParams p = (StaggeredGridLayoutManager.LayoutParams) lp;
        p.setFullSpan(true);
    }
}
           

這裡的處理方式是用通過LayoutParams，而且這裡更簡單，StaggeredGridLayoutManager.LayoutParams為我們提供了一個setFullSpan方法來設定占領全部空間，好開心，看一下StaggeredGridLayoutManager的效果，

模拟瀑布流方法：

在adapter中的bindViewHolder()方法中，設定layoutparams.height為随機值

@Override
        public void bindViewHolder(RecyclerView.ViewHolder parent, String s, int position) {
            if(parent instanceof MyHolder){
                ((MyHolder) parent).mTextView.setText(s);
            }

            StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) parent.itemView.getLayoutParams();
            for(int i=;i<;i++){
                mheight.add((int)(+Math.random()*));
            }
            params.height = mheight.get(position);
            parent.itemView.setLayoutParams(params);
        }
           

我們需要知道的是：在RecyclerView中，控制展示方式的是LayoutManager。是以，我們為ItemView設定LayoutParams就可以改變recyclerView中每一項的布局。

處理分隔符

這是我們開開心心的繼續寫代碼，并且為我們的item添加了分隔符，分隔符我還是用的翔哥寫的那個，畢竟翔哥寫的太好了，而且我們沒有必要重複造輪子，不過這時候問題出現了，相信你也肯定能猜到應該會出現問題了，因為不管我們怎麼處理，header對于RecyclerView來說還是一個普普通通的item，這時候我們添加分割線，肯定也會對header産生影響，那下面，我們再來對翔哥的分割線改造一下吧。

public class GridItemDecoration extends RecyclerView.ItemDecoration {
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
    private Drawable mDivider;
    private boolean hasHeader;

    public GridItemDecoration(Context context) {
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable();
        a.recycle();
    }

    public GridItemDecoration(Context context, boolean header) {
        this(context);
        hasHeader = header;
    }

    ...

    @Override
    public void getItemOffsets(Rect outRect, View view,
                               RecyclerView parent, RecyclerView.State state) {
        int position = parent.getChildAdapterPosition(view);
        int spanCount = getSpanCount(parent);
        int childCount = parent.getAdapter().getItemCount();
        int pos = position;

        if(hasHeader) {
            if(position == ) {
                outRect.set(, , , mDivider.getIntrinsicHeight());
                return;
            } else {
                pos = position - ;
            }
        }

        if (isLastColum(parent, pos, spanCount, childCount)) {
            outRect.set(, , mDivider.getIntrinsicWidth(), mDivider.getIntrinsicHeight());
        } else {
            outRect.set(, , mDivider.getIntrinsicWidth(),
                    mDivider.getIntrinsicHeight());
        }
    }
}
           

改造的地方是擷取偏移量的方法我們換了一個，因為原來的那個已經過時了，而且，這裡我們還加了一個boolean類型的hasHeader變量來表示是不是有header，如果hasHeader并且position為0，那麼我們僅僅繪制底部的分割線，其他的地方不繪制，在有header的情況下，我們還需要将position減1，因為我們認為的第1個item其實是第2個。這個時候我們再來看看有分割線的效果。

看來我們的想法是對的，header部分除了底部有一個分割線外，并沒有其他的分割線，這也完全符合我們的需求。

封裝

這下好了，基本上完美的處理好了，可是難道我們對于不同的Adapter都需要寫那麼多代碼嗎？ 對于一個懶程式員來說，這肯定是一個可怕的事情，是以，我們還需要對我們的Adapter進行封裝，目的就是可以輕輕松松的寫代碼，

/**
 * Created by Administration on 2017/3/30.
 */
public abstract class BaseRecycylerAdapter<T> extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private static final int TYPE_HEADER = ;//有hader的狀态
    private static final int TYPE_NORMAL = ;//沒有header的狀态
    private static final int TYPE_FOOTER = ;//有footor的狀态


    private ArrayList<T> mDatas = new ArrayList<>();

    private View headView;//頭布局
    private View footView;//底布局
    private boolean hasHeadView;//是否有頭布局
    private boolean hasFootView;//是否有底布局

    private OnItemClickListener mListener;

    public void setOnItemClickListener(OnItemClickListener li) {
        mListener = li;
    }

    public void addHeadView(View headView){
        if(headView!=null){
            this.headView = headView;
            this.hasHeadView=true;
            notifyDataSetChanged();
        }

    }



    private void removeHeaderView(){
        if(headView!=null){
            notifyItemRemoved();
            this.headView = null;
            this.hasHeadView = false;
            notifyDataSetChanged();
        }
    }

    public View getHeadView() {
        return headView;
    }

    private void addFootView(View footView){
        if(footView!=null){
            this.footView = footView;
            this.hasFootView = true;
            notifyDataSetChanged();
        }
    }

    private void removeFooterView(){
        if(footView!=null){
            notifyItemRemoved(getItemCount()-);
            this.footView = null;
            this.hasFootView = false;
            notifyDataSetChanged();
        }
    }

    public View getFootView() {
        return footView;
    }

    public void addData(ArrayList<T> datas){
        mDatas.addAll(datas);
        notifyDataSetChanged();
    }

    @Override
    public int getItemViewType(int position) {
        if(checkIsHeaderView(position)){
            return TYPE_HEADER;
        }else if(checkIsFooterView(position)){
            return TYPE_FOOTER;
        }else{
            return  TYPE_NORMAL;
        }
    }

    private boolean checkIsFooterView(int position) {
        return hasFootView && position == getItemCount()-;
    }

    private boolean checkIsHeaderView(int position) {
        return hasHeadView && position == ;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(hasHeadView&&viewType==TYPE_HEADER){
            return new HeaderViewHolder(headView);
        }
        if(hasFootView&&viewType==TYPE_FOOTER){
            return new FooterViewHolder(footView);
        }
        return onCreate(parent,viewType);
    }


    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
            if(checkIsHeaderView(position)&&getItemViewType(position)==TYPE_HEADER){
                return ;
            }
            if(checkIsFooterView(position)&&getItemViewType(position)==TYPE_FOOTER){
                return;
            }
            int realPosition = getRealPosition(holder);
            final T data = mDatas.get(realPosition);
            bindViewHolder(holder,data,realPosition);

        if(mListener!=null){
            holder.itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mListener.onItemClick(position,data,holder);
                }
            });
        }

    }

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);

        RecyclerView.LayoutManager manager = recyclerView.getLayoutManager();
        if(manager instanceof GridLayoutManager) {
            final GridLayoutManager gridManager = ((GridLayoutManager) manager);
            gridManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
                @Override
                public int getSpanSize(int position) {
                    return getItemViewType(position) == TYPE_HEADER
                            ? gridManager.getSpanCount() : ;
                }
            });
        }
    }

    @Override
    public void onViewAttachedToWindow(RecyclerView.ViewHolder holder) {
        super.onViewAttachedToWindow(holder);
        ViewGroup.LayoutParams lp = holder.itemView.getLayoutParams();
        if(lp != null
                && lp instanceof StaggeredGridLayoutManager.LayoutParams
                && holder.getLayoutPosition() == ) {
            StaggeredGridLayoutManager.LayoutParams p = (StaggeredGridLayoutManager.LayoutParams) lp;
            p.setFullSpan(true);
        }
    }

    private int getRealPosition(RecyclerView.ViewHolder holder) {
        int position = holder.getAdapterPosition();//position : 1

        if(hasHeadView||hasFootView){
            return position-;
        }
        else if(hasHeadView&hasFootView){
            return position-;
        }
        else{
            return position;
        }

    }

    @Override
    public int getItemCount() {
        return getItems() + (hasHeadView ?  : ) + (hasFootView ?  : );
    }

    private class HeaderViewHolder extends RecyclerView.ViewHolder {
        public HeaderViewHolder(View  itemView) {
            super(itemView);
            itemView.setOnClickListener(null);
        }
    }

    private class FooterViewHolder extends RecyclerView.ViewHolder {
        public FooterViewHolder(View footView) {
            super(footView);
            footView.setOnClickListener(null);
        }
    }

    public abstract int getItems();
    public abstract RecyclerView.ViewHolder onCreate(ViewGroup parent,int viewType);
    public abstract void bindViewHolder(RecyclerView.ViewHolder parent,T t,int position);

    public interface OnItemClickListener<T> {
        void onItemClick(int position, T data, RecyclerView.ViewHolder holder);
    }
}
           

我們将BaseRecyclerAdapter抽象起來，并且提供兩個抽象方法onCreate和onBind用來建立holder和綁定資料，而對于header做的一系列工作，我們都放到了BaseRecyclerAdapter中，而繼承BaseRecyclerAdapter後，我們僅僅關心我們的holder怎麼建立和資料怎麼綁定就ok。例如下面代碼：

private class MyAdapter extends BaseRecycylerAdapter<String>{
        private List<Integer> mheight = new ArrayList<>();

        @Override
        public int getItems() {
            return list.size();
        }

        @Override
        public RecyclerView.ViewHolder onCreate(ViewGroup parent, int viewType) {
            LayoutInflater mInflater = LayoutInflater.from(parent.getContext());
            View view = mInflater.inflate(R.layout.item,parent,false);
            return new MyHolder(view);
        }

        @Override
        public void bindViewHolder(RecyclerView.ViewHolder parent, String s, int position) {
            if(parent instanceof MyHolder){
                ((MyHolder) parent).mTextView.setText(s);
            }

            StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) parent.itemView.getLayoutParams();
            for(int i=;i<;i++){
                mheight.add((int)(+Math.random()*));
            }
            params.height = mheight.get(position);
            parent.itemView.setLayoutParams(params);
        }

        private class MyHolder extends RecyclerView.ViewHolder {
            private TextView mTextView;
            public MyHolder(View view) {
                super(view);
                mTextView = (TextView) view.findViewById(R.id.text);
            }
        }
    }
           

MainActivity.java :

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private MyAdapter mAdapter;

    private ArrayList<String> list = new ArrayList<>();
    private RecyclerView.LayoutManager mLayoutManager;

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

        initData();

        mAdapter = new MyAdapter();
        mAdapter.addData(list);
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        mLayoutManager = getLayoutManager();
        recyclerView.setLayoutManager(mLayoutManager);
        recyclerView.setAdapter(mAdapter);
        setHeader(recyclerView);

        mAdapter.setOnItemClickListener(new BaseRecycylerAdapter.OnItemClickListener() {
            @Override
            public void onItemClick(int position, Object data, RecyclerView.ViewHolder holder) {
                if(position==mAdapter.getItems()){
                    Toast.makeText(MainActivity.this, "last one",Toast.LENGTH_SHORT).show();
                }
                else if(position==){
                    Toast.makeText(MainActivity.this, "first one",Toast.LENGTH_SHORT).show();
                }
                else{
                    Toast.makeText(MainActivity.this, (String) data,Toast.LENGTH_SHORT).show();
                }

            }
        });

    }

    private void setHeader(RecyclerView recyclerView) {
        View header = LayoutInflater.from(this).inflate(R.layout.head_layout, recyclerView, false);

//給頭布局設定點選事件
        header.findViewById(R.id.image).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "header click",Toast.LENGTH_SHORT).show();
            }
        });
        mAdapter.addHeadView(header);
    }

    private RecyclerView.LayoutManager getLayoutManager() {
 //       LinearLayoutManager manager = new LinearLayoutManager(this);
 //       GridLayoutManager manager = new GridLayoutManager(this,4);
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(,StaggeredGridLayoutManager.VERTICAL);
        return manager;
    }

    private void initData() {
        for(int i=;i<;i++){
            list.add("#name "+i);
        }
    }

    private class MyAdapter extends BaseRecycylerAdapter<String>{
        private List<Integer> mheight = new ArrayList<>();

        @Override
        public int getItems() {
            return list.size();
        }

        @Override
        public RecyclerView.ViewHolder onCreate(ViewGroup parent, int viewType) {
            LayoutInflater mInflater = LayoutInflater.from(parent.getContext());
            View view = mInflater.inflate(R.layout.item,parent,false);
            return new MyHolder(view);
        }

        @Override
        public void bindViewHolder(RecyclerView.ViewHolder parent, String s, int position) {
            if(parent instanceof MyHolder){
                ((MyHolder) parent).mTextView.setText(s);
            }

            StaggeredGridLayoutManager.LayoutParams params = (StaggeredGridLayoutManager.LayoutParams) parent.itemView.getLayoutParams();
            for(int i=;i<;i++){
                mheight.add((int)(+Math.random()*));
            }
            params.height = mheight.get(position);
            parent.itemView.setLayoutParams(params);
        }

        private class MyHolder extends RecyclerView.ViewHolder {
            private TextView mTextView;
            public MyHolder(View view) {
                super(view);
                mTextView = (TextView) view.findViewById(R.id.text);
            }
        }
    }
}
           

這樣我們再用起來就簡單多了，對于這樣的封裝，我們還算滿意，再做完添加header後，相信大家對于footer也有想法了，有想法就實作它吧，擴充一下BaseRecyclerAdapter就ok啦。