少年郎，你須要封裝好的ViewPager工具類

時間  2019-12-01
標籤 少年 須要 封裝 好的 viewpager 工具 欄目 軟件設計 简体版
原文   原文鏈接

做者：夏至，歡迎轉載，也請保留這段申明，謝謝android

blog.csdn.net/u011418943/…git

你是否有遇到這樣的問題，每次開發一個新的項目，在 viewpager 這一塊上，老是在作重複的東西，好比app引導頁，輪播圖，viewpager+fragment 的 tab 指示器等等，這些雖然簡單，但倒是每一個app都要的，並且很耗時，有沒有每次在寫這個，都很無語的感受呢？github

基於上面這種狀況，ViewPagerHelper 就誕生了。ViewPagerHelper 是一個能快速幫你的完成 app引導頁，輪播，和viewpager 指示器的工具，內面內置了經常使用屬性，知足你平常對油膩的師姐的一切幻想，解放你的雙手，釋放你的靈魂。。。。。
這裏寫圖片描述canvas

How to use

這裏用的是 jitpack 這個網站，因此：bash

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }123456複製代碼

而後在你的 module 中添加：app

compile 'com.github.LillteZheng:ViewPagerHelper:v0.1'1複製代碼

褲子也脫了，那麼如今就是看裝逼圖的時候，畢竟這是個看臉的世界。maven

效果圖

首先，你們最經常使用到的就是輪播圖了，這裏給你們提供了 4 中經常使用的 Indicatoride

一、輪播圖

第一個，仿魅族的輪播圖，加底部放大圓點：工具

這裏寫圖片描述

這裏解釋一下底部圓點放大的原理，其實很是簡單，就是用一個 shade，裏面配置成 圓點，而後在代碼中去設置透明度和放大縮小，就是這麼簡單；小夥伴們能夠先按照這個思路本身作一下，或者能夠下載代碼驗證一下。oop

第二個，如今比較流行的弧形圖片

這裏寫圖片描述

這個是比較流行的，像淘寶，京東這些，都用了這個；這個弧形imageview 呢，也很簡單，相信學習過拋物線大神的自定義專欄，這個立刻就能想到了用什麼方法了；沒錯，就是用 BitmapShader,對圖片進行裁剪，因此，咱們能夠用 path 把要繪製的形狀弄出來，再用 BitmapShader 對圖片進行裁剪便可。

若是你要使用弧形圖片，能夠用 ArcImageView 這個控件，能夠這樣配置：

<!--弧形圖片，arc_height 爲弧度的高度-->
    <com.zhengsr.viewpagerlib.view.ArcImageView
        android:id="@+id/arc_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:arc_height="15dp"
        android:scaleType="centerCrop"/>1234567複製代碼

第三個，底部指示器是移動的，看起來比較舒服

這裏寫圖片描述

TransIndicator 提供了兩種，一個是如圖的橢圓形，仍是就是圓點，能夠選擇本身喜歡的。它的原理呢，其實也不難，就是先寫好4個小圓條，而後再繪製白色的圓條，再根據 viewpager 的 onPageScrolled 獲取距離的變化，改變 canvas.translate 的繪製位置便可。

第四個，底部指示器文字版本
這裏寫圖片描述
有些 app 也用文字的方式，這裏也提供了一種，文字外面的圓圈能夠取消。顏色什麼的自行定義。

輪播功能配置

那麼，想要使用上面那幾個樣式配置呢？很簡單，你須要三步：
step1：

配置數據，這裏把 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複製代碼

step2：
配置PageBean，這裏主要是爲了viewpager的指示器的做用，注意記得寫上泛型.這裏爲上面的LoopBean，若是你只是 String，就上鞋 url，若是是res，就協商 integer。

PageBean bean = new PageBean.Builder<LoopBean>()
                .setDataObjects(loopBeens)
                .setIndicator(zoomIndicator)
                .builder();1234複製代碼

設置viewpager的動畫，這裏提供了三種，分別是MzTransformer，ZoomOutPageTransformer, 和DepthPageTransformer，前者會魅族商城的方式，後者爲 google 提供默認的兩種動畫，能夠體驗一下,這裏無關緊要，這裏我設置了魅族的效果，這樣加上弧形的圖片更好看。

mBannerCountViewPager.setPageTransformer(false,new MzTransformer());1複製代碼

step3：

view 的接口提供出來，供你們自行配置，這樣的好處在於，實用性更高，你能夠添加gif，或者視頻，或者簡單的圖片，記得寫上 layout 文件。

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 來設置，或者圖片的更新等等
            }
        });1234567891011121314151617複製代碼

xml的配置，其實就是一個viewpager 加一個 linearlayout，位置你本身去擺放

<com.zhengsr.viewpagerlib.view.BannerViewPager
    android: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.ZoomIndicator
    android: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複製代碼

這樣就完成了輪播功能，是否是封裝以後，媽媽不再用擔憂我寫輪播效果了呢

這裏寫圖片描述

二、Tab指示器

說完輪播圖，再說說 viewpager + fragment 這種更加經常使用的方式， 這裏也提供了三種比較經常使用的樣式。

第一種，無恥抄襲鴻洋大神的三角形版本

這裏寫圖片描述

其實你會了輪播圖的移動版本，那麼這個對你來講，就是 a piece of cake。因此，就不解釋啦

第二種，條形狀的版本

這裏寫圖片描述

沒啥好說的，就是把上面的三角形改爲條狀的，機智如我，代碼全靠抄！！！！果真一個項目的質量，取決於你複製粘貼的技巧!!

第三種，文字顏色漸變的方式

這裏寫圖片描述
像咱們經常使用的今日頭條，就是用這種方式，而它的原理也是很是簡單，就是用額 clipRect 這個屬性，先繪製一遍正常顏色的，再繪製一遍其餘顏色的，就能夠了。我建議你先本身用 clipRect 試一下不一樣的顏色，再本身寫一下，你會發現，臥槽，這麼簡單的。。。。。

這裏的配置就更簡單了，viewpager 就是普通的，關鍵就是這個 TabIndicator 了，由於我把這三種效果都裝進去了.

三角形的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>1234567891011121314151617複製代碼

能夠看到你能夠設置的它大小，裏面的textview 的顏色變化，是否顯示，和可視個數，若是你想改爲圓條的，把 tab_type=」tri」 的 tri 改爲 rect 便可，而後若是想使用 textview 顏色變化的，只須要把 tab_text_type=」normaltext」 中的 normaltext 改爲 colortext 便可。

而後在代碼中這樣配置：

/**
     * 把 TabIndicator 跟viewpager關聯起來
     */
    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);
        }
    });12345678910111213複製代碼

這樣，一個比較好用的viewpager 加指示器的方式就完成了。

app 首次啓動引導頁

還有就是引導頁了，這樣跟 輪播圖的配置差很少，由於用的也是那幾個指示器。先看效果：

image imageimage

這裏提供了三種樣式，其實還有個文字，不沒貼出來了，能夠看輪播的；
引導圖的配置很是簡單，取一個底部爲放大的來講：

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();

        // 把數據添加到 viewpager中，並把view提供出來，這樣除了方便調試，也不會出現一個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);
            }
        });12345678910111213141516171819202122232425262728複製代碼

這裏能夠看到，我把 view 提供出來，供你們自行配置，這樣的好處在於，實用性更高，你能夠添加gif，或者視頻，或者簡單的圖片。
xml 的配置以下：

<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"/>1234567891011121314151617181920212223242526272829303132複製代碼

這樣就基本講完了，雖然不難，確實常常用到的，封裝起來，總比作無用功來得好。
奉上 github 連接：github.com/LillteZheng… 裏面有一些自定義屬性的說明。

若是你有想要的效果，而本項目中沒有的，你能夠在 issue 中提出來，做者看到了，會抽空去實現的，若是有發現問題了或者須要提供哪些接口出來，也能夠在 issue 中提出來。固然，喜歡請 start 或 fork 來一波。 代碼是最好的老師，能夠download，改爲本身喜歡的。 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程