前言

你是否有遇到這樣的問題芥吟，每次開發(fā)一個新的項目澎灸，在 viewpager 這一塊上蛹头，總是在做重復的東西顿肺，比如app引導頁戏溺，輪播圖， viewpager+fragment 的 tab 指示器等等屠尊，這些雖然簡單旷祸，但卻是每個app都要的，而且很耗時讼昆，有沒有每次在寫這個托享，都很無語的感覺呢？
基于上面這種情況浸赫，推薦給大家一個第三方開源框架ViewPagerHelper,ViewPagerHelper 是一個能快速幫你的完成 app引導頁闰围，輪播，和viewpager 指示器的工具既峡， 內面內置了常用屬性羡榴，滿足你日常對油膩的師姐的一切幻想，解放你的雙手运敢，釋放你的靈魂傳送門

在app引導頁使用

1.xml文件配置 你可以通過在xml文件中設置不同的指示器從而達到不同的效果,我這以ZoomIndicator為 例

  <com.zhengsr.viewpagerlib.view.GlideViewPager
    android:id="@+id/splase_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<Button
    android:id="@+id/splase_start_btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginLeft="100dp"
    android:layout_marginRight="100dp"
    android:layout_marginBottom="50dp"
    android:background="@drawable/glide_bottom_btn_bg"
    android:textColor="@color/white"
    android:text="@string/start"
    android:textSize="18sp"
    android:visibility="gone"
    />

 <com.zhengsr.viewpagerlib.indicator.ZoomIndicator
    android:id="@+id/splase_bottom_layout"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center"
    zsr:zoom_selector="@drawable/bottom_circle"
    zsr:zoom_leftmargin="10dp"
    zsr:zoom_max="1.5"
    zsr:zoom_alpha_min="0.4"
    zsr:zoom_dismiss_open="true"
    android:orientation="horizontal"/>

2.代碼中做如下配置

    GlideViewPager viewPager = (GlideViewPager) findViewById(R.id.splase_viewpager);
    ZoomIndicator zoomIndicator = (ZoomIndicator) findViewById(R.id.splase_bottom_layout);
    Button button = (Button) findViewById(R.id.splase_start_btn);


    //先把本地的圖片 id 裝進 list 容器中
    List<Integer> images = new ArrayList<>();
    for (int i = 0; i < RES.length; i++) {
        images.add(RES[i]);

    }
    //配置pagerbean校仑，這里主要是為了viewpager的指示器的作用，注意記得寫上泛型
    PagerBean bean = new PagerBean.Builder<Integer>()
            .setDataObjects(images)
            .setIndicator(zoomIndicator)
            .setOpenView(button)
            .builder();

    // 把數(shù)據(jù)添加到 viewpager中传惠，并把view提供出來迄沫，這樣除了方便調試，也不會出現(xiàn)一個view卦方，多個
    // parent的問題羊瘩，這里在輪播圖比較明顯
    viewPager.setPagerListener(bean, R.layout.image_layout, new PagerHelperListener() {
        @Override
        public void getItemView(View view, Object data) {
            //通過獲取到這個view，你可以隨意定制你的內容
            ImageView imageView = view.findViewById(R.id.icon);
            imageView.setImageResource((Integer) data);
        }
    });

實現(xiàn)效果:
圖片待上傳...
以上是設置了不同指示器的效果

做輪播圖使用

1.xml文件配置,其實就是一個viewpager 加一個 linearlayout愿汰，位置你自己去擺放

  <com.zhengsr.viewpagerlib.view.BannerViewPager
            android:id="@+id/loop_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:clipChildren="false"
            zsr:banner_isloop="true"
            zsr:banner_looptime="3000"
            zsr:banner_switchtime="600" />

        <com.zhengsr.viewpagerlib.indicator.ZoomIndicator
            android:id="@+id/bottom_scale_layout"
            android:layout_width="wrap_content"
            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" />

2.在代碼中設置

//設置viewpager的動畫(可不設)困后，這里提供了三種，分別是MzTransformer衬廷，ZoomOutPageTransformer,        
  和DepthPageTransformer摇予，可以體驗一下,這里可有可無，這里我設置了魅族的效果吗跋，這樣加上弧形的圖      
  片更好看侧戴。
mBannerCountViewPager.setPageTransformer(false,new MzTransformer());
mBannerCountViewPager.setPagerListener(bean, R.layout.loop_layout, new PageHelperListener() {
        @Override
        public 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);

            //如若你要設置點擊事件，也可以直接通過這個view 來設置跌宛，或者圖片的更新等等
        }
    });

實現(xiàn)效果:
圖片待上傳...

做Tab配合ViewPager使用

1.xml配置

//你可以通過這些屬性酗宋，自由配置三角形，條狀疆拘，或者只使用文字顏色變化蜕猫，自定義屬性的名字跟它的功能一樣。
<com.zhengsr.viewpagerlib.indicator.TabIndicator
    android: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>

<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2.代碼中設置

 /**
 * 把 TabIndicator 跟viewpager關聯(lián)起來
 */
TabIndicator tabIndecator = (TabIndicator) findViewById(R.id.line_indicator);
// 設置 viewpager的切換速度哎迄，這樣點擊的時候比較自然
tabIndecator.setViewPagerSwitchSpeed(viewPager,600);
tabIndecator.setTabData(viewPager,mTitle, new TabIndicator.TabClickListener() {
    @Override
    public void onClick(int position) {
        //頂部點擊的方法公布出來
        viewPager.setCurrentItem(position);
    }
});

這樣回右，一個比較好用的viewpager 加指示器的方式就完成了隆圆。
實現(xiàn)效果:
圖片待上傳...

最后,將自己寫的Demo放上來

下面可以看一下自定義的屬性，方便大家在用的時候調用：

一些自定義屬性：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!--放大縮小的 indicator-->
    <declare-styleable name="ZoomIndicator">
        <attr name="zoom_selector" format="reference"/> <!--selecotr翔烁，一般就一個圓點即可-->
        <attr name="zoom_leftmargin" format="dimension"/><!--兩個圓點之間的間距-->
        <attr name="zoom_max" format="float"/> <!--小圓點放大的倍數(shù)-->
        <attr name="zoom_alpha_min" format="float"/><!--小圓點縮小的倍數(shù)-->
        <attr name="zoom_dismiss_open" format="boolean"/><!--做引導頁的最后一頁渺氧，是否隱藏圓點-->
    </declare-styleable>

    <!--與上面同理-->
    <declare-styleable name="NormalIndicator">
        <attr name="normal_selector" format="reference"/>
        <attr name="normal_leftmargin" format="dimension"/>
        <attr name="normal_dismiss_open" format="boolean"/>
    </declare-styleable>

    <!--移動indicator indicator-->
    <declare-styleable name="TransIndicator">
        <attr name="trans_width" format="dimension"/> <!--指示器的大小-->
        <attr name="trans_height" format="dimension"/> <!--指示器的大小-->
        <attr name="trans_defaultcolor" format="color|reference"/> <!--指示器默認的顏色-->
        <attr name="trans_leftmargin" format="dimension"/>
        <attr name="trans_movecolor" format="color|reference"/> <!--指示器移動的顏色-->
        <attr name="trans_dismiss_open" format="boolean"/>
        <attr name="trans_round_radius" format="dimension"/>
        <attr name="trans_type">
            <enum name="circle" value="0"/>
            <enum name="round" value="1"/>
        </attr>
    </declare-styleable>

    <!--文字indicator-->
    <declare-styleable name="TextIndicator">
        <attr name="word_show_circle" format="boolean"/> <!--是否顯示外援的圓圈-->
        <attr name="word_circle_color" format="reference"/> <!--圓圈的顏色-->
        <attr name="word_text_color" format="reference"/> <!--文字顏色-->
        <attr name="word_text_size" format="dimension"/> <!--文字大小-->
    </declare-styleable>

    <!--輪播控件的屬性-->
    <declare-styleable name="BannerViewPager">
        <attr name="banner_isloop" format="boolean"/> <!--是否自動輪播-->
        <attr name="banner_looptime" format="integer"/> <!--自動輪播的時間-->
        <attr name="banner_switchtime" format="integer"/> <!--輪播時，viewpager的切換速度-->
    </declare-styleable>

    <!--弧形圖片-->
    <declare-styleable name="ArcImageView">
        <attr name="arc_height" format="dimension"/> <!--弧度的高度-->
    </declare-styleable>

    <!--頂部viewpager指示器-->
    <declare-styleable name="TabIndicator">
        <attr name="visiabel_size" format="integer"/> <!--可視化個數(shù)蹬屹，比如有一排侣背，我們就只要顯示4個-->
        <attr name="tab_color" format="color|reference"/> <!--指示器的顏色-->
        <attr name="tab_width" format="dimension"/>  <!--指示器的寬度-->
        <attr name="tab_height" format="dimension"/> <!--指示器的高度-->
        <attr name="tab_textsize" format="dimension"/> <!--頂部文字的大小-->
        <attr name="tab_text_default_color" format="color|reference"/> <!--頂部文字默認的顏色-->
        <attr name="tab_text_change_color" format="color|reference"/> <!--移動時，頂部文字的顏色-->
        <attr name="tab_show" format="boolean"/>  <!--是否顯示指示器-->
        <attr name="tab_text_type">               <!--頂部文字的類型慨默，nromaltext為普通的textview贩耐，
                                                       corlortext為文件漸變-->
            <enum name="normaltext" value="0"/>
            <enum name="colortext" value="1"/>
        </attr>
        <attr name="tap_type" >           <!--指示器類型，有三角形或者圓條-->
            <enum name="tri" value="0"/>
            <enum name="rect" value="1"/>
        </attr>
    </declare-styleable>

    <!--文件漸變屬性-->
    <declare-styleable name="ColorTextView">
        <attr name="colortext_size" format="dimension"/>
        <attr name="colortext_default_color" format="color|reference"/> <!--默認顏色-->
        <attr name="colortext_change_color" format="color|reference"/> <!--漸變顏色-->
    </declare-styleable></resources>