本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出

一 概述

在上篇文章（http://blog.csdn.net/zxt0601/article/details/52355199）裡，我們用ItemDecoration為RecyclerView打造了帶懸停頭部的分組列表。其實Android版微信的通訊錄介面，它的分組title也不是懸停的，我們已經領先了微信一小步（認真臉）~
再看看市面上常見的分組列表（例如餓了麼點餐商品列表），不僅有懸停頭部，懸停頭部在切換時，還會伴有切換動畫。
關於ItemDecoration還有一個問題，簡單佈局還好，我們可以draw出來，如果是複雜的頭部呢？能否寫個xml，inflate進來，這樣使用起來才簡單，即另一種簡單使用onDraw和onDrawOver

的姿勢。
so，本文開頭我們就先用兩節完善一下我們的ItemDecoration。然後進入正題：自定義View實現右側索引導航欄IndexBar，對資料來源的排序欄位按照拼音排序，最後將RecyclerView和IndexBar聯動起來，觸控IndexBar上相應字母，RecyclerView滾動到相應位置。(在螢幕中間顯示的其實就是一個TextView，我們set個體IndexBar即可)
由於大部分使用右側索引導航欄的場景，都需要這幾個固定步驟，對資料來源排序，set給IndexBar，和RecyclerView聯動等，所以最後再將其封裝一把，成一個高度封裝，因此擴充套件性不太高的控制元件，更方便使用，如果需要擴充套件的話，反正看完本文再其基礎上修改應該很簡單~。

最終版預覽：

本文摘要:
1. 用ItemDecoration實現懸停頭部切換動畫
2. 另一種簡單使用onDraw()和onDrawOver()的姿勢
3. 自定義View實現右側**索引導航欄**IndexBar
4. 使用TinyPinyin對資料來源排序
5. 聯動IndexBar和RecyclerView。
6. 封裝重複步驟，方便二次使用，並可定製導航資料來源。

二 懸停頭部的“切換動畫”

實現了兩種，
第一種就是仿餓了麼點餐時,商品列表的懸停頭部切換“動畫效果”，如下：

第二種是一種頭部摺疊起來的視效，個人覺得也還不錯~如下：(估計沒人喜歡)

果然比上部殘篇裡的效果好看多了，那麼程式碼多不多呢，看我的git show 記錄：

就綠色部分的不到十行程式碼就搞定~先上這個圖是為了讓大家安心，程式碼不多，分分鐘看完。
下面放上文字版程式碼，江湖人稱 註釋張 的我，已經寫滿了註釋，
再簡單說下吧，
滑動時，在判斷頭部即將切換（當前pos的tag和pos+1的tag不等）的時候，
1.計算出當前懸停頭部應該上移的位移，
利用Canvas的畫布移動方法Canvas.translate()，即可實現“餓了麼”懸停頭部切換效果。
2.計算出當前懸停頭部應該在螢幕上還剩餘的空間高度，作為頭部繪製的高度
利用Canvas的Canvas.clipRect()方法，剪下畫布，即可實現“摺疊”的視效。

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {//最後呼叫 繪製在最上層
        int pos = ((LinearLayoutManager) (parent.getLayoutManager())).findFirstVisibleItemPosition();

        String tag = mDatas.get(pos).getTag();
        //View child = parent.getChildAt(pos);
        View child = parent.findViewHolderForLayoutPosition(pos).itemView;//出現一個奇怪的bug，有時候child為空，所以將 child = parent.getChildAt(i)。-》 parent.findViewHolderForLayoutPosition(pos).itemView

        boolean flag = false;//定義一個flag，Canvas是否位移過的標誌
        if ((pos + 1) < mDatas.size()) {//防止陣列越界（一般情況不會出現）
            if (null != tag && !tag.equals(mDatas.get(pos + 1).getTag())) {//當前第一個可見的Item的tag，不等於其後一個item的tag，說明懸浮的View要切換了
                Log.d("zxt", "onDrawOver() called with: c = [" + child.getTop());//當getTop開始變負，它的絕對值，是第一個可見的Item移出螢幕的距離，
                if (child.getHeight() + child.getTop() < mTitleHeight) {//當第一個可見的item在螢幕中還剩的高度小於title區域的高度時，我們也該開始做懸浮Title的“交換動畫”
                    c.save();//每次繪製前 儲存當前Canvas狀態，
                    flag = true;

                    //一種頭部摺疊起來的視效，個人覺得也還不錯~
                    //可與123行 c.drawRect 比較，只有bottom引數不一樣，由於 child.getHeight() + child.getTop() < mTitleHeight，所以繪製區域是在不斷的減小，有種摺疊起來的感覺
                    //c.clipRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + child.getHeight() + child.getTop());

                    //類似餓了麼點餐時,商品列表的懸停頭部切換“動畫效果”
                    //上滑時，將canvas上移 （y為負數） ,所以後面canvas 畫出來的Rect和Text都上移了，有種切換的“動畫”感覺
                    c.translate(0, child.getHeight() + child.getTop() - mTitleHeight);
                }
            }
        }
        mPaint.setColor(COLOR_TITLE_BG);
        c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + mTitleHeight, mPaint);
        mPaint.setColor(COLOR_TITLE_FONT);
        mPaint.getTextBounds(tag, 0, tag.length(), mBounds);
        c.drawText(tag, child.getPaddingLeft(),
                parent.getPaddingTop() + mTitleHeight - (mTitleHeight / 2 - mBounds.height() / 2),
                mPaint);
        if (flag)
            c.restore();//恢復畫布到之前儲存的狀態


    }

這份程式碼核心處c.translate(0, child.getHeight() + child.getTop() - mTitleHeight);實現的是餓了麼效果，被註釋掉的

//c.clipRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), parent.getPaddingTop() + child.getHeight() + child.getTop());

實現的是效果二。

三 另一種使用onDraw()和onDrawOver()的姿勢

之前我們使用onDraw(),onDrawOver()，都是用canvas的方法活生生的繪製一個出View，這對於很多人（包括我）來說都不容易，xy座標的確認，尺寸都較難把握，基本上調UI效果時間都很長。尤其是canvas.drawText()方法的y座標，其實是baseLine的位置，不瞭解的童鞋肯定要踩很多坑。
當我們想要繪製的分類title、懸停頭部複雜一點時，我都不敢想象要除錯多久了，這個時候我們還敢用ItemDecoration嗎。
有沒有一種方法，就像我們平時使用的那樣，在Layout佈局xml裡畫好View，然後inflate出來就可以了呢。
這個問題開始確實也把我難住了，難道又要從入門到放棄了嗎？
於是我又搜尋資料，功夫不負有心人。
解決問題的辦法就是，View類的：public void draw(Canvas canvas) {方法
下面我們就看一個用法Demo吧：
佈局layout：header_complex.xml（注意有個ProgressBar哦）

<?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:background="@color/colorPrimaryDark"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:text="複雜頭部" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="複雜頭部"
        android:textColor="@color/colorAccent" />

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

onDrawOver程式碼如下：簡單講解下，先inflate這個複雜的Layout，然後拿到它的LayoutParams，利用這個lp拿到寬和高的MeasureSpec，然後依次呼叫 measure,layout,draw方法，將複雜頭部顯示在螢幕上。
（小安利一下，MeasureSpec不太瞭解的可以看看我的這篇http://blog.csdn.net/zxt0601/article/details/52331007）

        View toDrawView = mInflater.inflate(R.layout.header_complex, parent, false);
        int toDrawWidthSpec;//用於測量的widthMeasureSpec
        int toDrawHeightSpec;//用於測量的heightMeasureSpec
        //拿到複雜佈局的LayoutParams，如果為空，就new一個。
        // 後面需要根據這個lp 構建toDrawWidthSpec，toDrawHeightSpec
        ViewGroup.LayoutParams lp = toDrawView.getLayoutParams();
        if (lp == null) {
            lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);//這裡是根據複雜佈局layout的width height，new一個Lp
            toDrawView.setLayoutParams(lp);
        }
        if (lp.width == ViewGroup.LayoutParams.MATCH_PARENT) {
            //如果是MATCH_PARENT，則用父控制元件能分配的最大寬度和EXACTLY構建MeasureSpec。
            toDrawWidthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight(), View.MeasureSpec.EXACTLY);
        } else if (lp.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
            //如果是WRAP_CONTENT，則用父控制元件能分配的最大寬度和AT_MOST構建MeasureSpec。
            toDrawWidthSpec = View.MeasureSpec.makeMeasureSpec(parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight(), View.MeasureSpec.AT_MOST);
        } else {
            //否則則是具體的寬度數值，則用這個寬度和EXACTLY構建MeasureSpec。
            toDrawWidthSpec = View.MeasureSpec.makeMeasureSpec(lp.width, View.MeasureSpec.EXACTLY);
        }
        //高度同理
        if (lp.height == ViewGroup.LayoutParams.MATCH_PARENT) {
            toDrawHeightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight() - parent.getPaddingTop() - parent.getPaddingBottom(), View.MeasureSpec.EXACTLY);
        } else if (lp.height == ViewGroup.LayoutParams.WRAP_CONTENT) {
            toDrawHeightSpec = View.MeasureSpec.makeMeasureSpec(parent.getHeight() - parent.getPaddingTop() - parent.getPaddingBottom(), View.MeasureSpec.AT_MOST);
        } else {
            toDrawHeightSpec = View.MeasureSpec.makeMeasureSpec(lp.width, View.MeasureSpec.EXACTLY);
        }
        //依次呼叫 measure,layout,draw方法，將複雜頭部顯示在螢幕上。
        toDrawView.measure(toDrawWidthSpec, toDrawHeightSpec);
        toDrawView.layout(parent.getPaddingLeft(), parent.getPaddingTop(),
                parent.getPaddingLeft() + toDrawView.getMeasuredWidth(), parent.getPaddingTop() + toDrawView.getMeasuredHeight());
        toDrawView.draw(c);

這裡還有個有趣的地方，某些需要不斷呼叫onDraw()更新繪製自己最新狀態的View，例如ProgressBar,由於在螢幕上顯示的並不是真正的View，只是我們手動的呼叫了一次draw方法，進而呼叫View的onDraw()顯示的一次“殘影”，所以ProgressBar只會顯示onDraw()當時的樣子，並不會主動重新整理了。
看圖說話，還是很容易理解的：

滑動時，由於會回撥onDrawOver() 方法，所以ProgressBar又被手動呼叫了draw()，開始變化，滑動的快的話，progressBar會有動畫效果。
停止不動時，ProgressBar也是靜止的，保持draw()時繪製的狀態。

四 自定義View實現右側索引導航欄IndexBar

不管是自定義ItemDecoration還是實現右側索引導航欄，都有大量的自定義View知識在裡面 ，這裡簡單複習一下。
（步驟1-4是自定義View的必須套路，步驟5+是IndexBar特殊定製）
1 自定義View首先要確定這個View需要在xml裡接受哪些屬性？
在IndexBar裡，我們先需要兩個屬性，每個索引的文字大小和手指按下時整個View的背景，
即在attrs.xml如下定義：

    <attr name="textSize" format="dimension" />
    <declare-styleable name="IndexBar">
        <attr name="textSize" />
        <attr name="pressBackground" format="color" />
    </declare-styleable>

2 在View的構造方法中獲得我們自定義的屬性
套路程式碼如下，都是套路，記得使用完最後要將typeArray物件 recycle()。

        int textSize = (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics());//預設的TextSize
        mPressedBackground = Color.BLACK;//預設按下是純黑色
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.IndexBar, defStyleAttr, 0);
        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.IndexBar_textSize:
                    textSize = typedArray.getDimensionPixelSize(attr, textSize);
                    break;
                case R.styleable.IndexBar_pressBackground:
                    mPressedBackground = typedArray.getColor(attr, mPressedBackground);
                default:
                    break;
            }
        }
        typedArray.recycle();

3 重寫onMesure()方法（可選）
onMeasure()方法裡，主要就是遍歷一遍indexDatas，得到index最大寬度和高度。然後根據三種測量模式，分配不同的值給View，
EXACLTY就分配具體的測量值（match_parent,確定數值），
AT_MOST就分配父控制元件能給的最大值和自己需要的值之間的最小值。（保證不超過父控制元件限定的值）
UNSPECIFIED則分配自己需要的值。（隨心所欲）

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //取出寬高的MeasureSpec  Mode 和Size
        int wMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSize = MeasureSpec.getSize(widthMeasureSpec);
        int hMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSize = MeasureSpec.getSize(heightMeasureSpec);
        int measureWidth = 0, measureHeight = 0;//最終測量出來的寬高

        //得到合適寬度：
        Rect indexBounds = new Rect();//存放每個繪製的index的Rect區域
        String index;//每個要繪製的index內容
        for (int i = 0; i < mIndexDatas.size(); i++) {
            index = mIndexDatas.get(i);
            mPaint.getTextBounds(index, 0, index.length(), indexBounds);//測量計算文字所在矩形，可以得到寬高
            measureWidth = Math.max(indexBounds.width(), measureWidth);//迴圈結束後，得到index的最大寬度
            measureHeight = Math.max(indexBounds.width(), measureHeight);//迴圈結束後，得到index的最大高度，然後*size
        }
        measureHeight *= mIndexDatas.size();
        switch (wMode) {
            case MeasureSpec.EXACTLY:
                measureWidth = wSize;
                break;
            case MeasureSpec.AT_MOST:
                measureWidth = Math.min(measureWidth, wSize);//wSize此時是父控制元件能給子View分配的最大空間
                break;
            case MeasureSpec.UNSPECIFIED:
                break;
        }

        //得到合適的高度：
        switch (hMode) {
            case MeasureSpec.EXACTLY:
                measureHeight = hSize;
                break;
            case MeasureSpec.AT_MOST:
                measureHeight = Math.min(measureHeight, hSize);//wSize此時是父控制元件能給子View分配的最大空間
                break;
            case MeasureSpec.UNSPECIFIED:
                break;
        }

        setMeasuredDimension(measureWidth, measureHeight);
    }

4 重寫onDraw()方法
整理一下需求和思路：
利用index資料來源的size，和控制元件可繪製的高度(高度-paddingTop-paddingBottom)，求出每個index區域的高度mGapHeight。
每個index在繪製時，都是處於水平居中，豎直方向上在mGapHeight區域高度內居中。
思路整理清楚，程式碼很簡單如下：

    public static String[] INDEX_STRING = {"A", "B", "C", "D", "E", "F", "G", "H", "I","J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V","W", "X", "Y", "Z", "#"};//#在最後面（預設的資料來源）
    private List<String> mIndexDatas;//索引資料來源
    private int mGapHeight;//每個index區域的高度
    .....
    mIndexDatas = Arrays.asList(INDEX_STRING);//資料來源

在onSizeChanged方法裡，獲取控制元件的寬高，並計算出mGapHeight:

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
        mGapHeight = (mHeight - getPaddingTop() - getPaddingBottom()) / mIndexDatas.size();
    }

最後在onDraw()方法裡繪製,
如果對於豎直居中baseLine的計算不太理解可以先放置，這塊的確挺繞人，後面應該會寫一篇 canvas.drawText()x y座標計算的小短文.
可記住重點就是 Paint預設的TextAlign是Left，即x方向，左對齊，所以x座標決定繪製文字的左邊界。
y座標是繪製文字的baseLine位置。

    @Override
    protected void onDraw(Canvas canvas) {
        int t = getPaddingTop();//top的基準點(支援padding)
        Rect indexBounds = new Rect();//存放每個繪製的index的Rect區域
        String index;//每個要繪製的index內容
        for (int i = 0; i < mIndexDatas.size(); i++) {
            index = mIndexDatas.get(i);
            mPaint.getTextBounds(index, 0, index.length(), indexBounds);//測量計算文字所在矩形，可以得到寬高
            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();//獲得畫筆的FontMetrics，用來計算baseLine。因為drawText的y座標，代表的是繪製的文字的baseLine的位置
            int baseline = (int) ((mGapHeight - fontMetrics.bottom - fontMetrics.top) / 2);//計算出在每格index區域，豎直居中的baseLine值
            canvas.drawText(index, mWidth / 2 - indexBounds.width() / 2, t + mGapHeight * i + baseline, mPaint);//呼叫drawText，居中顯示繪製index
        }
    }

以上四步基本完成了IndexBar的繪製工作，下面我們為它新增一些行為的響應。

5 重寫onTouchEvent()方法
我們需要重寫onTouchEvent()方法，
以便處理手指按下時的View背景變色，擡起時恢復原來顏色
並根據手指觸控的落點座標，判斷當前處於哪個index區域，回撥給相應的監聽器處理（顯示當前index的值，滑動RecyclerView至相應區域等。。）
程式碼如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                setBackgroundColor(mPressedBackground);//手指按下時背景變色
                //注意這裡沒有break，因為down時，也要計算落點 回撥監聽器
            case MotionEvent.ACTION_MOVE:
                float y = event.getY();
                //通過計算判斷落點在哪個區域：
                int pressI = (int) ((y - getPaddingTop()) / mGapHeight);
                //邊界處理（在手指move時，有可能已經移出邊界，防止越界）
                if (pressI < 0) {
                    pressI = 0;
                } else if (pressI >= mIndexDatas.size()) {
                    pressI = mIndexDatas.size() - 1;
                }
                //回撥監聽器
                if (null != mOnIndexPressedListener) {
                    mOnIndexPressedListener.onIndexPressed(pressI, mIndexDatas.get(pressI));
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
            default:
                setBackgroundResource(android.R.color.transparent);//手指擡起時背景恢復透明
                //回撥監聽器
                if (null != mOnIndexPressedListener) {
                    mOnIndexPressedListener.onMotionEventEnd();
                }
                break;
        }
        return true;
    }

6 聯動IndexBar和RecyclerView
具體的操作交由監聽器處理，定義和實現如下：
值得一提的就是，滑動RecyclerView到指定postion，我們使用的是LinearLayoutManager的scrollToPositionWithOffset(int position, int offset)方法，offset傳入0，postion即目標postion即可。如果使用RecyclerView.scrollToPosition();等方法，滑動會很飄~定位不準。
mPressedShowTextView 就是在螢幕中間顯示的當前處於哪個index的TextView。

    /**
     * 當前被按下的index的監聽器
     */
    public interface onIndexPressedListener {
        void onIndexPressed(int index, String text);//當某個Index被按下

        void onMotionEventEnd();//當觸控事件結束（UP CANCEL）
    }

    private onIndexPressedListener mOnIndexPressedListener;

    public void setmOnIndexPressedListener(onIndexPressedListener mOnIndexPressedListener) {
        this.mOnIndexPressedListener = mOnIndexPressedListener;
    }

        //設定index觸控監聽器
        setmOnIndexPressedListener(new onIndexPressedListener() {
            @Override
            public void onIndexPressed(int index, String text) {
                if (mPressedShowTextView != null) { //顯示hintTexView
                    mPressedShowTextView.setVisibility(View.VISIBLE);
                    mPressedShowTextView.setText(text);
                }
                //滑動Rv
                if (mLayoutManager != null) {
                    int position = getPosByTag(text);
                    if (position != -1) {
                        mLayoutManager.scrollToPositionWithOffset(position, 0);
                    }
                }
            }

            @Override
            public void onMotionEventEnd() {
                //隱藏hintTextView
                if (mPressedShowTextView != null) {
                    mPressedShowTextView.setVisibility(View.GONE);
                }
            }
        });

五 封裝重複步驟，方便二次使用。

在我個人的理解裡，程式過多的封裝是會導致擴充套件性的降低（也是因為我水平有限），然而我們今天要封裝的這個IndexBar，由於使用場景和套路還是挺固定的（城市分組列表，商品分類列表）所以值得將相關的操作都聚合起來，二次使用更方便。畢竟，一個專案裡同樣的程式碼寫第二遍的程式設計師都不是好的聖鬥士。（其實是我的leader不想寫第二遍，讓我封裝一下給他秒用）
梳理一下固定的操作：
1 都是先對原始資料sourceDatas源按照排序欄位拼音排序。
2 然後將螢幕中hint的TextView ，以及索引資料來源indexDatas(通過sourceDatas獲得)，通過set方法傳給IndexBar。
3 聯動IndexBar和RecyclerView，使得觸控IndexBar相應區域RecyclerView會滾動(藉助sourceDatas獲得對應postion)。
根據上述，我的設想在使用時，只需要給IndexBar設定 原始資料sourceDatas，HintTextView，和RecyclerView的LinearLayoutManager，在IndexBar內部對sourceDatas排序，並獲得索引資料來源indexDatas，然後設定一個預設的index觸控監聽器，在手指按下滑動時，由於IndexBar持有HintTextView和LayoutManager，則HintTextView的show hide，以及LayoutManager的滾動 都在IndexBar內部完成。
最終使用預覽：

        //使用indexBar
        mTvSideBarHint = (TextView) findViewById(R.id.tvSideBarHint);//HintTextView
        mIndexBar = (IndexBar) findViewById(R.id.indexBar);//IndexBar
        mIndexBar.setmPressedShowTextView(mTvSideBarHint)//設定HintTextView
                .setNeedRealIndex(true)//設定需要真實的索引
                .setmLayoutManager(mManager)//設定RecyclerView的LayoutManager
                .setmSourceDatas(mDatas);//設定資料來源

佈局xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

    <mcxtzhang.itemdecorationdemo.IndexBar.widget.IndexBar
        android:id="@+id/indexBar"
        android:layout_width="24dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        app:pressBackground="@color/partTranslucent"
        app:textSize="16sp" />

    <TextView
        android:id="@+id/tvSideBarHint"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center"
        android:background="@drawable/shape_side_bar_bg"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="48sp"
        android:visibility="gone"
        tools:text="A"
        tools:visibility="visible" />

</FrameLayout>

其中，setNeedRealIndex(true)//設定需要真實的索引，是指索引欄的資料不是固定的A-Z，#。而是根據真實的sourceDatas生成。
因為鏈式呼叫用起來很爽，所以在這些set方法裡都return 了 this。

1 抽象兩個實體類和一個介面。
先把tag抽象出來，放在頂層，這裡存放的就是IndexBar顯示的每個index值（A-Z,#）（本例是城市的漢語拼音首字母)，而且在聯動滑動時，根據tag獲取postion時，也需要用到tag。它是導航分組列表的基礎。

public class BaseIndexTagBean {
    private String tag;//所屬的分類（城市的漢語拼音首字母）

    public String getTag() {
        return tag;
    }

    public void setTag(String tag) {
        this.tag = tag;
    }
}

然後抽象一個介面和一個實體類，
介面定義一個方法getTarget()，它返回 需要被轉化成拼音，並取出首字母 索引排序的 欄位。（本例就是城市的名字）
實體類繼承BaseIndexTagBean，並實現以上介面，且額外存放 需要排序的欄位的拼音值，（本例是城市的拼音）。它根據getTarget()返回的值利用TinyPinyin庫得到拼音。

public interface IIndexTargetInterface {
    String getTarget();//需要被轉化成拼音，並取出首字母 索引排序的 欄位
}

public abstract class BaseIndexPinyinBean extends BaseIndexTagBean implements IIndexTargetInterface {
    private String pyCity;//城市的拼音

    public String getPyCity() {
        return pyCity;
    }

    public void setPyCity(String pyCity) {
        this.pyCity = pyCity;
    }
}

有了以上兩個類一個介面，我們就可以將 對原始資料來源sourceDatas按照拼音排序，並取出索引資料來源indexDatas的操作封裝起來。

2 封裝原始資料來源初始化（利用TinyPinyin獲取全拼音），取出索引資料來源indexDatas的操作。
使用時，我們先讓具體的實體bean，繼承自BaseIndexPinyinBean ，在getTarget()方法返回排序目標欄位。本例如下：

public class CityBean extends BaseIndexPinyinBean {

    private String city;//城市名字

    public CityBean() {
    }
    public CityBean(String city) {
        this.city = city;
    }

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

    @Override
    public String getTarget() {
        return city;
    }
}

IndexBar類內程式碼：
使用時會呼叫IndexBar.setmSourceDatas()方法傳入原始資料來源，在方法內對資料來源初始化，並取出索引資料來源。

    private List<? extends BaseIndexPinyinBean> mSourceDatas;//Adapter的資料來源
    public IndexBar setmSourceDatas(List<? extends BaseIndexPinyinBean> mSourceDatas) {
        this.mSourceDatas = mSourceDatas;
        initSourceDatas();//對資料來源進行初始化
        return this;
    }

    /**
     * 初始化原始資料來源，並取出索引資料來源
     *
     * @return
     */
    private void initSourceDatas() {
        int size = mSourceDatas.size();
        for (int i = 0; i < size; i++) {
            BaseIndexPinyinBean indexPinyinBean = mSourceDatas.get(i);
            StringBuilder pySb = new StringBuilder();
            String target = indexPinyinBean.getTarget();//取出需要被拼音化的欄位
            //遍歷target的每個char得到它的全拼音
            for (int i1 = 0; i1 < target.length(); i1++) {
                //利用TinyPinyin將char轉成拼音
                //檢視原始碼，方法內 如果char為漢字，則返回大寫拼音
                //如果c不是漢字，則返回String.valueOf(c)
                pySb.append(Pinyin.toPinyin(target.charAt(i1)));
            }
            indexPinyinBean.setPyCity(pySb.toString());//設定城市名全拼音

            //以下程式碼設定城市拼音首字母
            String tagString = pySb.toString().substring(0, 1);
            if (tagString.matches("[A-Z]")) {//如果是A-Z字母開頭
                indexPinyinBean.setTag(tagString);
                if (isNeedRealIndex) {//如果需要真實的索引資料來源
                    if (!mIndexDatas.contains(tagString)) {//則判斷是否已經將這個索引新增進去，若沒有則新增
                        mIndexDatas.add(tagString);
                    }
                }
            } else {//特殊字母這裡統一用#處理
                indexPinyinBean.setTag("#");
                if (isNeedRealIndex) {//如果需要真實的索引資料來源
                    if (!mIndexDatas.contains("#")) {
                        mIndexDatas.add("#");
                    }
                }
            }
        }
        sortData();
    }

3 封裝對原始資料來源sourceDatas，索引資料來源indexDatas的排序操作。

    /**
     * 對資料來源排序
     */
    private void sortData() {
        //對右側欄進行排序 將 # 丟在最後
        Collections.sort(mIndexDatas, new Comparator<String>() {
            @Override
            public int compare(String lhs, String rhs) {
                if (lhs.equals("#")) {
                    return 1;
                } else if (rhs.equals("#")) {
                    return -1;
                } else {
                    return lhs.compareTo(rhs);
                }
            }
        });

        //對資料來源進行排序
        Collections.sort(mSourceDatas, new Comparator<BaseIndexPinyinBean>() {
            @Override
            public int compare(BaseIndexPinyinBean lhs, BaseIndexPinyinBean rhs) {
                if (lhs.getTag().equals("#")) {
                    return 1;
                } else if (rhs.getTag().equals("#")) {
                    return -1;
                } else {
                    return lhs.getPyCity().compareTo(rhs.getPyCity());
                }
            }
        });
    }

4 是否需要真實的索引資料來源。
相關變數定義：

    public static String[] INDEX_STRING = {"A", "B", "C", "D", "E", "F", "G", "H", "I","J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"};//#在最後面（預設的資料來源）
    private List<String> mIndexDatas;//索引資料來源
    private boolean isNeedRealIndex;//是否需要根據實際的資料來生成索引資料來源（例如 只有 A B C 三種tag，那麼索引欄就 A B C 三項）

初始化init時，判斷不需要真實的索引資料來源，就用預設值（A-Z,#）

        if (!isNeedRealIndex) {//不需要真實的索引資料來源
            mIndexDatas = Arrays.asList(INDEX_STRING);
        }

使用時，如果如果真實索引資料來源，呼叫這個方法，傳入true，一定要在設定資料來源setmSourceDatas(List)之前呼叫。

    /**
     * 一定要在設定資料來源{@link #setmSourceDatas(List)}之前呼叫
     *
     * @param needRealIndex
     * @return
     */
    public IndexBar setNeedRealIndex(boolean needRealIndex) {
        isNeedRealIndex = needRealIndex;
        if (isNeedRealIndex){
            if (mIndexDatas != null) {
                mIndexDatas = new ArrayList<>();
            }
        }
        return this;
    }

在initSourceDatas() 裡，會根據這個變數往mIndexDatas裡增加index。

5 IndexBar和外部聯動的相關（HintTextView，和RecyclerView的LinearLayoutManager）
set方法很簡單：

    public IndexBar setmPressedShowTextView(TextView mPressedShowTextView) {
        this.mPressedShowTextView = mPressedShowTextView;
        return this;
    }

    public IndexBar setmLayoutManager(LinearLayoutManager mLayoutManager) {
        this.mLayoutManager = mLayoutManager;
        return this;
    }

它們兩最終都是在index觸控監聽器裡用到，程式碼上文已提及，只不過這次挪到IndexBar內部init裡。
init函式如下：

    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        ...
        if (!isNeedRealIndex) {//不需要真實的索引資料來源
            mIndexDatas = Arrays.asList(INDEX_STRING);
        }
        //設定index觸控監聽器
        setmOnIndexPressedListener(new onIndexPressedListener() {
            @Override
            public void onIndexPressed(int index, String text) {
                if (mPressedShowTextView != null) { //顯示hintTexView
                    mPressedShowTextView.setVisibility(View.VISIBLE);
                    mPressedShowTextView.setText(text);
                }
                //滑動Rv
                if (mLayoutManager != null) {
                    int position = getPosByTag(text);
                    if (position != -1) {
                        mLayoutManager.scrollToPositionWithOffset(position, 0);
                    }
                }
            }
            @Override
            public void onMotionEventEnd() {
                //隱藏hintTextView
                if (mPressedShowTextView != null) {
                    mPressedShowTextView.setVisibility(View.GONE);
                }
            }
        });
    }

    /**
     * 根據傳入的pos返回tag
     *
     * @param tag
     * @return
     */
    private int getPosByTag(String tag) {
        if (TextUtils.isEmpty(tag)) {
            return -1;
        }
        for (int i = 0; i < mSourceDatas.size(); i++) {
            if