轉(zhuǎn)載來之 鴻洋
本文由hackware投稿。
hackware的博客地址：
http://www.lxweimin.com/p/2865812fed41
上一篇博客呢，剛好也是介紹Indicator的，主要是對原理的介紹：仿今日頭條頂部導(dǎo)航指示器，本篇博客呢，作者自己開源了一個(gè)指示器，并且封裝了多種非常酷的特效。如果你剛好需要，可以試用，并給作者反饋意見。
說到 ViewPager 指示器，想必大家都不陌生，絕大部分應(yīng)用中都有這個(gè)。使用頻率非常之高。但系統(tǒng)對它的支持并不好，自帶的 PagerTabStrip 和 PagerTitleStrip 太弱，很難滿足需求。
因此往往程序中需要用到指示器的時(shí)候，大家基本上都是選擇自己寫。當(dāng)然也有第三方框架諸如 Jake Wharton 大神的 ViewPagerIndicator 等，我曾經(jīng)嘗試著用它們，但還是被它們的可定制能力給嚇退了。
所以我自行編寫了一個(gè)庫，效果圖如下：
1
背景
近期交互改版，需要在指示器上增加吸附效果（類似上圖第7個(gè)），剛開始我有點(diǎn)懵逼，因?yàn)橹暗闹甘酒髦皇呛唵蔚氖褂昧?HorizontalScrollView + 橫向 LinearLayout ，向 LinearLayout 里面添加一些 TextView 當(dāng)做標(biāo)題，選中的時(shí)候只是簡單的改變 TextView 的顏色，沒有任何動畫，因此實(shí)現(xiàn)起來相對簡單（項(xiàng)目前期時(shí)間緊迫）。這估計(jì)也是大部分應(yīng)用的做法吧。
考慮到后面如果交互再改版，那我又會懵逼了，所以干脆自己來打造一個(gè)可擴(kuò)展、可定制能力 很強(qiáng) 真TM強(qiáng) 的 ViewPager 指示器框架 MagicIndicator ：
https://github.com/hackware1993/MagicIndicator
之所以叫 MagicIndicator，是因?yàn)?鴻神 之前搞了一個(gè) MagicViewPager， 我覺得這兩個(gè)可以很好的搭配使用，并且正如大家看到的，它確實(shí)比較 Magic。
2
如何使用
這期就不打算給大家講原理性文章了，只講如何集成（主要是這兩天都在寫這個(gè)，被媳婦罵慘了，沒時(shí)間寫了），后面我會有一個(gè)系列的文章來講這個(gè)，涉及到的內(nèi)容大概有：
MagicIndicator 原理
如何擴(kuò)展 MagicIndicator 打造任意的切換效果
如何使用 MagicIndicator 來打造主流應(yīng)用（諸如微信主頁的切換）的指示器效果
好，我們開始。
首先，你需要從我的 Github 上將工程代碼 check 下來，直接導(dǎo)入即可運(yùn)行，里面包含源碼和 demo。工程中有個(gè) Module 叫做 magicindicator，直接拷到你的項(xiàng)目中即可。
包結(jié)構(gòu)如下：
不要忘了添加依賴哦:
dependencies { compile project(':magicindicator')}
導(dǎo)入成功后，就可以使用啦。
你需要先在布局文件里引入 MagicIndicator：
再在代碼里面找到它，并進(jìn)行簡單設(shè)置：
這樣，你就可以輕松的實(shí)現(xiàn)效果圖中 今日頭條 式（效果圖中第一個(gè)）切換效果。
額，上面這代碼明顯沒有和 ViewPager 相關(guān)聯(lián)，因此滑動 ViewPager 時(shí)是看不到切換效果的，我們給 ViewPager 添加一個(gè)監(jiān)聽器：
這樣， MagicIndicator 就算成功引入項(xiàng)目啦。
注意，以上代碼明顯沒有和 ViewPager 強(qiáng)關(guān)聯(lián)，因此在不使用 ViewPager 的情況下，仍然可以使用 MagicIndicator。只是需要你手動調(diào)用 onPageXXX 系列方法回調(diào)即可。當(dāng)然，后續(xù)我會提供幫助類來簡化這個(gè)過程。
等 MagicIndicator 基本穩(wěn)定、成型后，我會把它提交到 MavenCenter 和 JCenter 中，方便大家使用。
3
內(nèi)建指示器
MagicIndicator 目前內(nèi)建了好幾種指示器，基本可以滿足絕大部分需求，并且每一種指示器都支持通過 插值器(Interpolator) 來微調(diào)效果（如果你還不會 巧用插值器，可以參考我的前一篇博文 Android水波紋特效的簡單實(shí)現(xiàn) ），后面我還會不定期的往里面添加更多炫酷的效果，敬請期待。下面演示一下使用內(nèi)建的指示器實(shí)現(xiàn)效果圖中的 小尖角式切換效果：
看到?jīng)]有，如果你想換一個(gè)效果，只需在 getItemView 里返回不同的指示器標(biāo)題（IPagerTitleView），在 getIndicator 里返回不同的指示器（IPagerIndicator）就可以啦。
4
如何擴(kuò)展
當(dāng)內(nèi)建的指示器不能滿足你的需求時(shí)，你可以輕易的擴(kuò)展，如果你的需求貌似可以使用 HorizontalScrollView + 橫向 LinearLayout 方式實(shí)現(xiàn)，建議繼承 IPagerTitleView和 IPagerIndicator 即可，如果不行，那就完全自定義吧，繼承 IPagerNavigator (導(dǎo)航器 —— 我覺得上面的那些效果本質(zhì)是一個(gè)導(dǎo)航器，指示器只是包含在導(dǎo)航器中的一個(gè)元素而已) 吧。
效果圖中的最后一個(gè)效果就是如此：
當(dāng)然，我可不希望每當(dāng)內(nèi)置指示器達(dá)不到你的需求時(shí)，你總是去繼承這些個(gè)類，為了簡化，我在最新的代碼里增加了 CommonPagerTitleView，使用方法如下：
效果圖如下：
關(guān)于擴(kuò)展 MagicIndicator，后面會有詳細(xì)的博文來講解，敬請留意。如果你擴(kuò)展 MagicIndicator 實(shí)現(xiàn)了很炫酷的指示器效果，歡迎共享出來。
5
更多
MagicIndicator 同樣考慮到了 ViewPager 內(nèi)容變化的情況，當(dāng)你的 ViewPager 內(nèi)容發(fā)生變化時(shí)，除了調(diào)用 PagerAdapter.notifyDataSetChanged ，還記得先調(diào)用 IPagerNavigator.notifyDataSetChanged 哦：
恩，大家如果有興趣可以學(xué)習(xí)其源碼或者使用，發(fā)現(xiàn)問題，可以給作者留言。此外，這是本公眾號推送的第一篇介紹作者個(gè)人開源項(xiàng)目類的文章，當(dāng)然我也收到很多類似的文章，多數(shù)我都拒絕了，本篇主要是因?yàn)樽髡咴o大家?guī)砹硕嗥夹g(shù)性文章，大家可以支持支持。
以后會考慮將這類文章放到副刊或者僅在技術(shù)類文章后做簡單推薦
