原計劃這周給大家帶來 MagicIndicator 的原理性文章(雖說不難,都是一個套路,但還是有必要闡述一下),可這兩天加班加點給 MagicIndicator 增加了一些新特性,使得它的可定制能力更強了,這也就直接導致使用時要關注的配置參數更多了,所以我覺得有必要對這些參數進行一一講解,方便大家快速入手。
本篇是 MagicIndicator 系列博文的第二篇,如果你還沒有看過 MagicIndicator系列之一 —— 使用MagicIndicator打造千變萬化的ViewPager指示器 ,建議先看完再過來看這篇。
開篇
額,我還是先貼圖吧,從圖中就可以看出 MagicIndicator 支持的一些特性:
我稍稍介紹一下,在代碼層面,每一個指示器就是一個 **IPagerNavigator ** , MagicIndicator 中目前內置了兩個 IPagerNavigator (后續不斷增多),分別是:
- CommonNavigator
- CircleNavigator
顧名思義, CommonNavigator 是一個通用的指示器,也就是指我們常見的橫向的、帶有很多子元素的的指示器。子元素中可帶文本、圖標以及你想要的任何View。效果圖中除了最后一個指示器是 CircleNavigator 外,其余全是對 CommonNavigator 進行參數配置的結果,怎么樣,是不是覺得很強大!
CircleNavigator 功能則比較簡單,我把它作為內置的指示器只是為了凸顯 MagicIndicator 的擴展能力,具體用法請參考我的 demo 吧,今天不做過多介紹。
CommonNavigator
這才是今天的主角。
考慮到絕大部分應用中的指示器都類似上面的效果,因此我將它抽象出來。同時為了使得大家通過簡單配置(自定義 IPagerNavigator 顯得麻煩)即可滿足一般需求,我找了很多帶指示器的應用,諸如小飛讀報、訊飛輸入法、一點資訊、今日頭條、網易新聞、微信、豌豆莢等,挨個研究它們的指示器效果,總結出了一些共有的特性。這些特性在代碼層面,表現為 CommonNavigator 的7個成員變量,分別是:
/**
* 提供給外部的參數配置
*/
/****************************************************/
private boolean mAdjustMode; // 自適應模式,為true表示title均分寬度,適用于數目固定的、少量的title
private boolean mEnablePivotScroll; // 啟動中心點滾動
private float mScrollPivotX = 0.5f; // 滾動中心點 0.0f - 1.0f
private boolean mSmoothScroll = true; // 是否平滑滾動,適用于 !mAdjustMode && !mFollowTouch
private boolean mFollowTouch = true; // 是否手指跟隨滾動
private int mRightPadding;
private int mLeftPadding;
/****************************************************/
看到注釋我想你就已經比較明了啦,不過我還是想對這幾個屬性展開說明:
-
mAdjustMode
自適應模式,默認為 false,適用于數目固定的、子元素較少的指示器,比如訊飛輸入法的皮膚界面:
shurufa.gif
自適應模式下,每個子元素的寬度默認是均分的。如果你不想均分,重寫 CommonNavigatorAdapter 的 getTitleWeight 方法吧。同時,其余6個屬性都不生效了,因為都沒意義啦。
-
mFollowTouch
手指跟隨滾動,默認為true,此模式下,只要 ViewPager 滾動,子元素也會跟著滾動,否則要等手指抬起后(onPageSelected)才開始滾動,看看小飛讀報的效果吧:
xiaofeidubao.gif -
mScrollPivotX
滾動的中心點,默認為0.5f,也就是居中,就像剛才小飛讀報的效果,如果你設置為0.15f,就是網易新聞的效果啦:
wangyixinwen.gif
gif略卡,大家不要怪我,都是網易新聞的錯,該優化優化下界面卡頓啦。
mEnablePivotScroll
是否開啟中心點滾動,默認為 false,開啟后,選中某一個子元素時,將會根據 mScrollPivotX 滾動到合適的位置,否則,只有當子元素不完全可見時,才會觸發滾動,使得子元素完全可見。mSmoothScroll
是否平滑滾動,默認為 true,在 !mAdjustMode && !mFollowTouch 下生效。也就是當子元素不完全可見時,觸發滾動使之完全可見時是否平滑滾動。-
mLeftPadding,mRightPadding
CommonNavigator 內部的 HorizontalScrollView 的 左右padding,默認為0。至于它有什么用,看看今日頭條的效果吧:
toutiao.gif
可以看到,添加頻道按鈕和搜索按鈕是懸在指示器上邊的,但是指示器中的最后一個元素卻可以滾出來,在 MagicIndicator 中,設置一下 mRightPadding 就可以搞定啦。
好了,這幾個屬性都介紹完了,相信大家都明白了吧。關于效果圖中的效果是如何做到的,后面會有專門的博客來講解如何擴展 MagicIndicator 打造任意的切換效果。
結語
如果大家覺得 MagicIndicator 很好,對你有幫助,歡迎多多 star + fork,關注!關注!,也請幫忙推廣一下哈。感激不盡。
MagicIndicator 是我計劃長期維護的項目,由于才剛開始,現在的指示器效果還不是很多,后續會不斷加入更多炫酷的效果,如果你想加入我,打造更好的用戶體驗,私信我吧。
MagicIndicator 疑難解答,交流請加QQ群:373360748。
今天就到此為止吧。周末愉快!