SuspensionIndexBar

SuspensionIndexBar

相關博文：

喜歡隨手點個star 多謝

在哪裡找到我：

我的github：

我的CSDN部落格：

我的稀土掘金：

我的簡書：

效果一覽：

配合我另一個庫組裝的效果(SuspensionIndexBar + SwipeMenuLayout)：

SwipeDelMenuActivity: 

高仿美團選擇城市介面（MeituanSelectCityActivity）:

高仿微信通訊錄介面（WeChatActivity）:

普通城市列表介面(MainActivity):

引入

Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Step 2. Add the dependency

	dependencies {
	        compile 'com.github.mcxtzhang:SuspensionIndexBar:V1.0.0'
	}
 

使用說明：

更新記錄：

2016 11 29 :

• 重構懸停分組，將TitleItemDecoration更名為SuspensionDecoration，資料來源依賴ISuspensionInterface介面。
• 重構索引導航，將IndexBar對資料來源的操作，如排序，轉拼音等分離出去，以介面IIndexBarDataHelper通訊。
• 有N多兄弟給我留言、加QQ問的：如何實現美團選擇城市列表頁面，
• 新增一個不帶懸停分組的HeaderView（微信通訊錄介面）

2016 11 10 : 1 IndexBar也考慮了HeaderView不需要索引的情況：

        mIndexBar.setmPressedShowTextView(mTvSideBarHint)//設定HintTextView
                .setNeedRealIndex(true)//設定需要真實的索引
                .setmLayoutManager(mManager)//設定RecyclerView的LayoutManager
                .setmSourceDatas(mDatas)//設定資料
                .setHeaderViewCount(mWrapperAdapter.getHeaderViewCount());//設定HeaderView數量
 

2016 11 07 ： 1 考慮了HeaderView不需要索引的情況，TitleItemDecoration增加了一個headerView的欄位和方法：

new TitleItemDecoration(this, mDatas).setHeaderViewCount(mWrapperAdapter.getHeaderViewCount())

2 暫時抽離TitleItemDecoration至lib包，並且以 介面形式接收資料 。

to do list

1 擴充套件 SuspensionDecoration 支援傳入layout or View。

閒言碎語

一

網上關於實現帶懸停分組頭部的列表的方法有很多，像我看過有主席的自定義ExpandListView實現的，也看過有人用一個額外的父佈局裡面套 RecyclerView/ListView+一個頭部View（位置固定在父佈局上方）實現的。 對於以上解決方案，有以下幾點個人覺得不好的地方：

1. 現在RecyclerView是主流

2. 在RecyclerView外套一個父佈局總歸是增加布局層級，容易overdraw，顯得不夠優雅。

3. item佈局實現帶這種分類頭部的方法有兩種，一種是把分類頭部當做一種itemViewtype（麻煩），另一種是每個Item佈局都包含了分類頭部的佈局，程式碼里根據postion等資訊動態Visible，Gone頭部（佈局冗餘，item效率降低）。

況且Google為我們提供了ItemDecoration，它本身就是用來修飾RecyclerView裡的Item的，它的getItemOffsets() onDraw()方法用於為Item分類頭部留出空間和繪製（解決缺點3），它的onDrawOver()方法用於繪製懸停的頭部View（解決缺點2）。

而且更重要的是，ItemDecoration出來這麼久了，你還不用它？

本文就利用ItemDecoration 打造 分組列表，並配有懸停頭部功能。

亮點預覽：新增多個ItemDecoration、它們的執行順序、ItemDecoration方法執行順序、ItemDecoration和RecyclerView的繪製順序

二

我們用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. 封裝重複步驟，方便二次使用，並可定製導航資料來源。

三

本文是這個系列的第三篇，不出意外也是終結篇。因為使用經過重構後的控制元件已經可以快速實現市面上帶 索引導航、懸停分組的列表介面了。 在前兩篇裡，我們從0開始，一步一步實現了仿微信通訊錄、餓了麼選餐介面。 （第一篇戳我 第二篇戳我） 這篇文章作為終結篇，和前文相比，主要涉及以下內容：

• 重構懸停分組，將TitleItemDecoration更名為SuspensionDecoration，資料來源依賴ISuspensionInterface介面。
• 重構索引導航，將IndexBar對資料來源的操作，如排序，轉拼音等分離出去，以介面IIndexBarDataHelper通訊。
• 有N多兄弟給我留言、加QQ問的：如何實現美團選擇城市列表頁面，
• 新增一個不帶懸停分組的HeaderView（微信通訊錄介面）