關於RecyclerView的使用，相信大家都不陌生，並且功能的強大早已讓眾多開發者臣服，本篇主要講解聯絡人列表效果的懸浮頭部分組列表的實現，先上效果圖：

一般的思路應該是利用RecyclerView的itemType來區分標題和下面的子資料而採用不同的佈局，再加上RecyclerView的滾動監聽來實現頭部的懸浮標題移動、隱藏、顯示。本篇的主要思路是從ItemDecoration下手，說到這裡我想你應該心中有個眉目了，如果對ItemDecoration還不熟悉的朋友，可以去看我的前兩篇文章：

先上程式碼：

@Override
    public void getItemOffsets
 
(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int pos=parent.getChildViewHolder(view).getAdapterPosition();
        if(keys.containsKey(pos)){//留出頭部偏移
            outRect.set(0,mTitleHeight,0,0);
        }else
 
{
            outRect.set(0,dividerHeight,0,0);
        }
    }

首先就是根據當前view的position判斷需要在上方留出分割線空隙還是標題欄頭部空隙。

然後是onDraw方法繪製具體的分割線和標題欄，看程式碼：

private void drawVertical(Canvas c, RecyclerView parent){
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int
 
 top=0;
        int bottom=0;
        for (int i = 0; i < parent.getChildCount(); i++) {
            View child=parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
            if(!keys.containsKey(params.getViewLayoutPosition())){
                //畫普通分割線
                top=child.getTop()-params.topMargin-dividerHeight;
                bottom=top+dividerHeight;
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(c);
            }else{
                //畫頭部
                top=child.getTop()-params.topMargin-mTitleHeight;
                bottom=top+mTitleHeight;
                c.drawRect(left,top,right,bottom,mBackgroundPaint);
                float x=TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10,mContext.getResources().getDisplayMetrics());
                float y=bottom - (mTitleHeight - mTextHeight) / 2 - mTextBaselineOffset;//計算文字baseLine
                c.drawText(keys.get(params.getViewLayoutPosition()),x,y,mTextPaint);
            }
        }
    }

其中用到了canvas.drawText方法，這裡需要注意y座標的計算，文字的繪製是根據baseLine來進行的，不懂的朋友可以去網上查閱相關的知識，本文不再重點講解。

最後就是onDrawOver方法的實現，該方法主要用來在RecyclerView最上層繪製，這樣當列表滾動的時候，可以繪製標題欄，這樣就看上去就一直懸浮在頁面頂部，主要難點就是去判斷上下兩組標題欄的碰撞，下面看程式碼：

@Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        if(!showFloatingHeaderOnScrolling){
            return;
        }
        int firstVisiblePos=((LinearLayoutManager)parent.getLayoutManager()).findFirstVisibleItemPosition();
        if(firstVisiblePos==RecyclerView.NO_POSITION){
            return;
        }
        String title=getTitle(firstVisiblePos);
        if(TextUtils.isEmpty(title)){
            return;
        }
        boolean flag=false;
        if(getTitle(firstVisiblePos+1)!=null&&!title.equals(getTitle(firstVisiblePos+1))){
            //說明是當前組最後一個元素，但不一定碰撞了
            View child=parent.findViewHolderForAdapterPosition(firstVisiblePos).itemView;
            if(child.getTop()+child.getMeasuredHeight()<mTitleHeight){
                //進一步檢測碰撞
                c.save();//儲存畫布當前的狀態
                flag=true;
                c.translate(0,child.getTop()+child.getMeasuredHeight()-mTitleHeight);//負的代表向上
            }
        }
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int top=parent.getPaddingTop();
        int bottom=top+mTitleHeight;
        c.drawRect(left,top,right,bottom,mBackgroundPaint);
        float x=TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,10,mContext.getResources().getDisplayMetrics());
        float y=bottom - (mTitleHeight - mTextHeight) / 2 - mTextBaselineOffset;//計算文字baseLine
        c.drawText(title,x,y,mTextPaint);
        if(flag){
            //還原畫布為初始狀態
            c.restore();
        }
    }

注意第四行，我加了個變數來控制是否需要懸浮頭部的效果，如果不需要則直接返回，只有分組列表的效果。而getTitle方法主要是用來獲取每個item的title，碰撞的檢測主要是根據當前第一個可見元素和下一個元素進行對比，也就是程式碼第16行，如果這兩個元素所在的title不一樣，就說明是屬於不同的分組，標題欄即將進行碰撞了，當然這樣檢測還是不夠的，還需要根據item的高度和標題欄的高度結合item的getTop值來共同判斷，這樣就可以去移動畫布，造成標題欄被下一個擠上去的效果，同時需要在下面還原移動過的畫布。

怎麼樣，整個邏輯和過程就講解完了，實現起來簡單吧，有疑問的朋友可以在下面留言~~~