少年郎，你需要封装好的ViewPager工具类
作者：夏至，歡迎轉(zhuǎn)載，也請保留這段申明，謝謝
blog.csdn.net/u011418943/…
你是否有遇到這樣的問題，每次開發(fā)一個新的項目，在 viewpager 這一塊上，總是在做重復(fù)的東西，比如app引導(dǎo)頁，輪播圖，viewpager+fragment 的 tab 指示器等等，這些雖然簡單，但卻是每個app都要的，而且很耗時，有沒有每次在寫這個，都很無語的感覺呢？
基于上面這種情況，ViewPagerHelper 就誕生了。ViewPagerHelper 是一個能快速幫你的完成 app引導(dǎo)頁，輪播，和viewpager 指示器的工具，內(nèi)面內(nèi)置了常用屬性，滿足你日常對油膩的師姐的一切幻想，解放你的雙手，釋放你的靈魂。。。。。
How to use
這里用的是 jitpack 這個網(wǎng)站，所以：
allprojects {repositories {...maven { url 'https://jitpack.io' }}}123456復(fù)制代碼然后在你的 module 中添加：
compile 'com.github.LillteZheng:ViewPagerHelper:v0.1'1復(fù)制代碼褲子也脫了，那么現(xiàn)在就是看裝逼圖的時候，畢竟這是個看臉的世界。
效果圖
首先，大家最常用到的就是輪播圖了，這里給大家提供了 4 中常用的 Indicator
1、輪播圖
第一個，仿魅族的輪播圖，加底部放大圓點：
這里解釋一下底部圓點放大的原理，其實非常簡單，就是用一個 shade，里面配置成 圓點，然后在代碼中去設(shè)置透明度和放大縮小，就是這么簡單；小伙伴們可以先按照這個思路自己做一下，或者可以下載代碼驗證一下。
第二個，現(xiàn)在比較流行的弧形圖片
這個是比較流行的，像淘寶，京東這些，都用了這個；這個弧形imageview 呢，也很簡單，相信學(xué)習(xí)過拋物線大神的自定義專欄，這個馬上就能想到了用什么方法了；沒錯，就是用 BitmapShader,對圖片進行裁剪，所以，我們可以用 path 把要繪制的形狀弄出來，再用 BitmapShader 對圖片進行裁剪即可。
如果你要使用弧形圖片，可以用 ArcImageView 這個控件，可以這樣配置：
<!--弧形圖片，arc_height 為弧度的高度--><com.zhengsr.viewpagerlib.view.ArcImageViewandroid:id="@+id/arc_icon"android:layout_width="match_parent"android:layout_height="match_parent"app:arc_height="15dp"android:scaleType="centerCrop"/>1234567復(fù)制代碼第三個，底部指示器是移動的，看起來比較舒服
TransIndicator 提供了兩種，一個是如圖的橢圓形，還是就是圓點，可以選擇自己喜歡的。它的原理呢，其實也不難，就是先寫好4個小圓條，然后再繪制白色的圓條，再根據(jù) viewpager 的 onPageScrolled 獲取距離的變化，改變 canvas.translate 的繪制位置即可。
第四個，底部指示器文字版本
有些 app 也用文字的方式，這里也提供了一種，文字外面的圓圈可以取消。顏色什么的自行定義。
輪播功能配置
那么，想要使用上面那幾個樣式配置呢？很簡單，你需要三步：
step1：
配置數(shù)據(jù)，這里把 url 或者本地的 resid 的封裝到list中，因為我們一般是解析了gson之后，獲取圖片和文字說明的，所以，這里就用 list 吧。
List<LoopBean> loopBeens = new ArrayList<>();for (int i = 0; i < TEXT.length; i++) {LoopBean bean = new LoopBean();bean.url = RESURL[i];bean.text = TEXT[i];loopBeens.add(bean);}12345678復(fù)制代碼step2：
配置PageBean，這里主要是為了viewpager的指示器的作用，注意記得寫上泛型.這里為上面的LoopBean，如果你只是 String，就上鞋 url，如果是res，就協(xié)商 integer。
設(shè)置viewpager的動畫，這里提供了三種，分別是MzTransformer，ZoomOutPageTransformer, 和DepthPageTransformer，前者會魅族商城的方式，后者為 google 提供默認(rèn)的兩種動畫，可以體驗一下,這里可有可無，這里我設(shè)置了魅族的效果，這樣加上弧形的圖片更好看。
mBannerCountViewPager.setPageTransformer(false,new MzTransformer());1復(fù)制代碼step3：
view 的接口提供出來，供大家自行配置，這樣的好處在于，實用性更高，你可以添加gif，或者視頻，或者簡單的圖片，記得寫上 layout 文件。
mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() {@Overridepublic void getItemView(View view, Object data) {ImageView imageView = view.findViewById(R.id.loop_icon);LoopBean bean = (LoopBean) data;new GlideManager.Builder().setContext(LoopActivity.this).setImgSource(bean.url).setLoadingBitmap(R.mipmap.ic_launcher).setImageView(imageView).builder();TextView textView = view.findViewById(R.id.loop_text);textView.setText(bean.text);//如若你要設(shè)置點擊事件，也可以直接通過這個view 來設(shè)置，或者圖片的更新等等}});1234567891011121314151617復(fù)制代碼xml的配置，其實就是一個viewpager 加一個 linearlayout，位置你自己去擺放
<com.zhengsr.viewpagerlib.view.BannerViewPagerandroid:id="@+id/loop_viewpager_arc"android:layout_width="match_parent"android:layout_height="200dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"android:clipChildren="false"zsr:isloop="false"zsr:switchtime="600" /><com.zhengsr.viewpagerlib.indicator.ZoomIndicatorandroid:id="@+id/bottom_zoom_arc"android:layout_width="match_parent"android:layout_height="30dp"android:layout_gravity="bottom|right"android:layout_marginRight="20dp"android:gravity="center"zsr:zoom_alpha_min="0.5"zsr:zoom_leftmargin="10dp"zsr:zoom_max="1.5"zsr:zoom_selector="@drawable/bottom_circle" />123456789101112131415161718192021復(fù)制代碼這樣就完成了輪播功能，是不是封裝之后，媽媽再也不用擔(dān)心我寫輪播效果了呢
2、Tab指示器
說完輪播圖，再說說 viewpager + fragment 這種更加常用的方式， 這里也提供了三種比較常用的樣式。
第一種，無恥抄襲鴻洋大神的三角形版本
其實你會了輪播圖的移動版本，那么這個對你來說，就是 a piece of cake。所以，就不解釋啦
第二種，條形狀的版本
沒啥好說的，就是把上面的三角形改成條狀的，機智如我，代碼全靠抄！！！！果然一個項目的質(zhì)量，取決于你復(fù)制粘貼的技巧!!
第三種，文字顏色漸變的方式
像我們常用的今日頭條，就是用這種方式，而它的原理也是非常簡單，就是用額 clipRect 這個屬性，先繪制一遍正常顏色的，再繪制一遍其他顏色的，就可以了。我建議你先自己用 clipRect 試一下不同的顏色，再自己寫一下，你會發(fā)現(xiàn)，臥槽，這么簡單的。。。。。
這里的配置就更簡單了，viewpager 就是普通的，關(guān)鍵就是這個 TabIndicator 了，因為我把這三種效果都裝進去了.
三角形的xml
<com.zhengsr.viewpagerlib.indicator.TabIndicatorandroid:id="@+id/line_indicator"android:layout_width="match_parent"android:layout_height="50dp"android:background="@color/black_ff"app:tab_color="@color/white"app:tab_width="25dp"app:tab_height="5dp"app:tab_text_default_color="@color/white_ff"app:tab_text_change_color="@color/white"app:tab_show="true"app:tab_text_type="normaltext"app:tab_textsize="16sp"app:visiabel_size="3"app:tap_type="tri"></com.zhengsr.viewpagerlib.indicator.TabIndicator>1234567891011121314151617復(fù)制代碼可以看到你可以設(shè)置的它大小，里面的textview 的顏色變化，是否顯示，和可視個數(shù)，如果你想改成圓條的，把 tab_type=”tri” 的 tri 改成 rect 即可，然后如果想使用 textview 顏色變化的，只需要把 tab_text_type=”normaltext” 中的 normaltext 改成 colortext 即可。
然后在代碼中這樣配置：
/*** 把 TabIndicator 跟viewpager關(guān)聯(lián)起來*/TabIndicator tabIndecator = (TabIndicator) findViewById(R.id.line_indicator);// 設(shè)置 viewpager的切換速度，這樣點擊的時候比較自然tabIndecator.setViewPagerSwitchSpeed(viewPager,600);tabIndecator.setTabData(viewPager,mTitle, new TabIndicator.TabClickListener() {@Overridepublic void onClick(int position) {//頂部點擊的方法公布出來viewPager.setCurrentItem(position);}});12345678910111213復(fù)制代碼這樣，一個比較好用的viewpager 加指示器的方式就完成了。
app 首次啟動引導(dǎo)頁
還有就是引導(dǎo)頁了，這樣跟 輪播圖的配置差不多，因為用的也是那幾個指示器。先看效果：
這里提供了三種樣式，其實還有個文字，不沒貼出來了，可以看輪播的；
引導(dǎo)圖的配置非常簡單，取一個底部為放大的來說：
這里可以看到，我把 view 提供出來，供大家自行配置，這樣的好處在于，實用性更高，你可以添加gif，或者視頻，或者簡單的圖片。
xml 的配置如下：
這樣就基本講完了，雖然不難，確實經(jīng)常用到的，封裝起來，總比做無用功來得好。
奉上 github 鏈接：github.com/LillteZheng… 里面有一些自定義屬性的說明。
如果你有想要的效果，而本項目中沒有的，你可以在 issue 中提出來，作者看到了，會抽空去實現(xiàn)的，如果有發(fā)現(xiàn)問題了或者需要提供哪些接口出來，也可以在 issue 中提出來。當(dāng)然，喜歡請 start 或 fork 來一波。
代碼是最好的老師，可以download，改成自己喜歡的。?
轉(zhuǎn)載于:https://juejin.im/post/5a09007b5188253d681712ed
總結(jié)
以上是生活随笔為你收集整理的少年郎，你需要封装好的ViewPager工具类的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ConVirt 2.0.1中文汉化版
- 下一篇： 1013: C语言程序设计教程（第三版）