ViewPagerIndicator

ViewPagerIndicator

1. 支持自定義tab樣式

2. 支持自定義滑動塊樣式和位置

3. 支持自定義切換tab的過渡效果

4. 支持子界面的預(yù)加載和界面緩存

5. 支持設(shè)置界面是否可滑動

6. android:minSdkVersion="8" android:targetSdkVersion="24"

7.導入方式

<1>gradle導入

compile 'com.shizhefei:ViewPagerIndicator:1.1.2'

由于用到了v4和recyclerview所以也要導入他們

compile 'com.android.support:support-v4:23.4.0'

compile 'com.android.support:recyclerview-v7:23.2.1'

<2>jar包方式導入

這次開發(fā)中使用到了滑動標題欄并且可切換標題切換底部的viewpager,如圖所示:


這個可以解決輪播banner,引導頁,4個界面的tab頁面,可滑動tab界面等項目中常用的組件。

這個框架主要的類有:

1.ViewPager

2.Indicator

??? 顧名思義是指示器的意思。有點像水平方向的listview 可以自定義item。

?? Indicator

????? setCurrentItem(int item, boolean anim) 設(shè)置當前項

????? setOnTransitionListener(OnTransitionListener onTransitionListener)設(shè)置tab過渡動畫

????? setOnItemSelectListener(OnItemSelectedListener onItemSelectedListener)設(shè)置tab切換監(jiān)聽

????? setScrollBar(ScrollBar scrollBar)設(shè)置跟隨tab滑動的滑動塊

?? 1.FixedIndicatorView 主要用于固定大小來平均分配tab的情況。

?????? setSplitMethod(int splitMethod) 設(shè)置tab分割方式,平均分割,wrap分割,比重分割

????? setCenterView(View centerView, ViewGroup.LayoutParams layoutParams)設(shè)置顯示在tab中心的View,用于實現(xiàn)新浪微博底部+號

????? getCenterView();

?? 2.ScrollIndicatorView 主要用于多個tab可以進行滑動。

?????? setSplitAuto(boolean splitAuto) 設(shè)置是否自動分割,當總tab寬度小于Indicator寬度就平均分割tab,或者比重分割。大于Indicator寬度就wrap分割

????? setPinnedTabView(boolean isPinnedTabView) 設(shè)置是否固定第一個tab

?????? setPinnedShadow(Drawable shadowDrawable, int shadowWidth)設(shè)置固定tab的陰影

?? 3.RecyclerIndicatorView 主要用于無數(shù)個tab可以進行滑動。

???? 優(yōu)點適用于tab很多的情況,缺點tab少的時候沒有ScrollIndicatorVie的自動分割功能。

3.IndicatorViewPager

indicatorViewPager.setAdapter(IndicatorPagerAdapter adapter)

// 設(shè)置它可以自定義實現(xiàn)在滑動過程中,tab項的字體變化,顏色變化等等過渡效果

indicatorViewPager.setIndicatorOnTransitionListener(onTransitionListener);

// 設(shè)置它可以自定義滑動塊的樣式

indicatorViewPager.setIndicatorScrollBar(scrollBar);

// 設(shè)置page是否可滑動切換

indicatorViewPager.setPageCanScroll(false);

/*

* 設(shè)置緩存界面的個數(shù),左右兩邊緩存界面的個數(shù),不會被重新創(chuàng)建。 默認是1,表示左右兩邊

* 相連的1個界面和當前界面都會被緩存住,比如切換到左邊的一個界面,那個界面是不會重新創(chuàng)建的。

*/

indicatorViewPager.setPageOffscreenLimit(1);

/*

* 設(shè)置預(yù)加載界面的個數(shù)。左右兩邊加載界面的個數(shù) 默認是1,表示左右兩邊 相連的1個界面會和當前界面同時加載

*/

indicatorViewPager.setPagePrepareNumber(1);

// 設(shè)置頁面切換監(jiān)聽

indicatorViewPager.setOnIndicatorPageChangeListener(onIndicatorPageChangeListener);

// 設(shè)置page間的圖片的寬度

indicatorViewPager.setPageMargin(1);

// 設(shè)置page間的圖片

indicatorViewPager.setPageMarginDrawable(d);

4.BannerComponent(無限輪播banner)

setAutoPlayTime(long time) 設(shè)置自動播放的間隔時間

startAutoPlay(); 開始播放

stopAutoPlay(); 停止播放

5.IndicatorPagerAdapter,

??? 里面使用的是view,

6.ScrollBar

tab的滑動塊通過indicatorViewPager.setIndicatorScrollBar(scrollBar);進行設(shè)置子類有

ColorBar 顏色的滑動塊

DrawableBar 圖片滑動塊

LayoutBar 布局滑動塊

TextWidthColorBar 大小同tab里的text一樣寬的顏色的滑動塊

SpringBar 實現(xiàn)拖拽效果的圓形滑動塊? 該類修改于https://github.com/chenupt/SpringIndicator

7.OnTransitionListener

子類有

OnTransitionTextListener tab的字體顏色變化,和字體大小變化效果

8.LazyFragment

1.實現(xiàn)原理:

一開始onCreateView的時候只是加載一個空的FrameLayout

當通過結(jié)合onCreateView和setUserVisibleHint兩個方法進行判斷是否需要加載真正的布局界面,需要的時候把真正的布局界面添加到之前的空的FrameLayout上面

2.回調(diào)方法:

onCreateViewLazy? 對應(yīng) onCreateView

onDestroyViewLazy 對應(yīng) onDestroyView

onResumeLazy? ? ? 對應(yīng) onResume

onPauseLazy? ? ? 對應(yīng) onPause

onDestroy 和 onCreate 方法不變

另外添加了onFragmentStartLazy fragment顯示的時候調(diào)用,在ViewPager界面切換的時候你就可以通過這個判斷是否顯示

onFragmentStopLazy fragment不顯示的時候調(diào)用

上面所有有l(wèi)azy結(jié)尾的方法都意味著 真正的布局正在顯示

3.使用方法

放心在onCreateViewLazy 的時候創(chuàng)建布局,初始化數(shù)據(jù)。調(diào)用該方法的時候,界面已經(jīng)要顯示啦? 在onDestroyViewLazy的方法里面做釋放操作


我在本次開發(fā)中使用的是可滑動的tab頁,首先在xml布局文件引用com.shizhefei.view.indicator.ScrollIndicatorView和ViewPager,然后在java代碼中實例化組件,調(diào)用mScrollIndicatorView.setOnTransitionListener設(shè)置切換時標題的顏色,mScrollIndicatorView.setScrollBar設(shè)置滾動條,然后將mViewPager和mScrollIndicator傳入獲取IndicatorViewPager對象,因為我的需求是在viewpager加載fragment,所以我們得重寫適配器,繼承自IndicatorViewPager.IndicatorFragmentPagerAdapter,重寫getCount(),getViewForTab,getFragmentForPage,最后setAdapter,大工告成。


如果說你的viewpager加載的是圖片就繼承IndicatorViewPager.IndicatorViewPagerAdapter,其他的步驟如上。

在此感謝github作者,來自https://github.com/LuckyJayce/ViewPagerIndicator#viewpagerindicator

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容