【原】少年郎，你需要封裝好的 ViewPager 工具類

codingSmart 2021-10-22

展開全文

前言

你是否有遇到這樣的問(wèn)題，每次開發(fā)一個(gè)新的項(xiàng)目，在 viewpager 這一塊上，總是在做重復(fù)的東西，比如 app 引導(dǎo)頁(yè)，輪播圖，viewpager+fragment 的 tab 指示器等等，這些雖然簡(jiǎn)單，但卻是每個(gè) app 都要的，而且很耗時(shí)，有沒(méi)有每次在寫這個(gè)，都很無(wú)語(yǔ)的感覺(jué)呢？

基于上面這種情況，ViewPagerHelper 就誕生了。ViewPagerHelper 是一個(gè)能快速幫你的完成 app 引導(dǎo)頁(yè)，輪播，和viewpager 指示器的工具，內(nèi)面內(nèi)置了常用屬性，滿足你日常對(duì)油膩的師姐的一切幻想，解放你的雙手，釋放你的靈魂。。。。。

How to use

這里用的是 jitpack 這個(gè)網(wǎng)站，所以：

allprojects {
        repositories {
            ...
            maven { url 'https://' }
        }
    }

然后在你的 module 中添加：

compile 'com.github.LillteZheng:ViewPagerHelper:v0.1'

下面上圖。

效果圖

首先，大家最常用到的就是輪播圖了，這里給大家提供了 4 中常用的 Indicator

1、輪播圖

第一個(gè)，仿魅族的輪播圖，加底部放大圓點(diǎn)：

這里解釋一下底部圓點(diǎn)放大的原理，其實(shí)非常簡(jiǎn)單，就是用一個(gè) shade，里面配置成圓點(diǎn)，然后在代碼中去設(shè)置透明度和放大縮小，就是這么簡(jiǎn)單；小伙伴們可以先按照這個(gè)思路自己做一下，或者可以下載代碼驗(yàn)證一下。

第二個(gè)，現(xiàn)在比較流行的弧形圖片

這個(gè)是比較流行的，像淘寶，京東這些，都用了這個(gè)；這個(gè)弧形imageview 呢，也很簡(jiǎn)單，相信學(xué)習(xí)過(guò)拋物線大神的自定義專欄，這個(gè)馬上就能想到了用什么方法了；沒(méi)錯(cuò)，就是用 BitmapShader,對(duì)圖片進(jìn)行裁剪，所以，我們可以用 path 把要繪制的形狀弄出來(lái)，再用 BitmapShader 對(duì)圖片進(jìn)行裁剪即可。

如果你要使用弧形圖片，可以用 ArcImageView 這個(gè)控件，可以這樣配置：

 <!--弧形圖片，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"/>

第三個(gè)，底部指示器是移動(dòng)的，看起來(lái)比較舒服

TransIndicator 提供了兩種，一個(gè)是如圖的橢圓形，還是就是圓點(diǎn)，可以選擇自己喜歡的。它的原理呢，其實(shí)也不難，就是先寫好4個(gè)小圓條，然后再繪制白色的圓條，再根據(jù) viewpager 的 onPageScrolled 獲取距離的變化，改變 canvas.translate 的繪制位置即可。

第四個(gè)，底部指示器文字版本

有些 app 也用文字的方式，這里也提供了一種，文字外面的圓圈可以取消。顏色什么的自行定義。

輪播功能配置

那么，想要使用上面那幾個(gè)樣式配置呢？很簡(jiǎn)單，你需要三步：
step1：

配置數(shù)據(jù)，這里把 url 或者本地的 resid 的封裝到 list 中，因?yàn)槲覀円话闶墙馕隽?gson 之后，獲取圖片和文字說(shuō)明的，所以，這里就用 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);
        }

step2：
配置 PageBean，這里主要是為了 viewpager 的指示器的作用，注意記得寫上泛型.這里為上面的 LoopBean，如果你只是 String，就上鞋 url，如果是 res，就協(xié)商 integer。

PageBean bean = new PageBean.Builder<LoopBean>()
                .setDataObjects(loopBeens)
                .setIndicator(zoomIndicator)
                .builder();

設(shè)置 viewpager 的動(dòng)畫，這里提供了三種，分別是 MzTransformer，ZoomOutPageTransformer, 和 DepthPageTransformer，前者會(huì)魅族商城的方式，后者為 google 提供默認(rèn)的兩種動(dòng)畫，可以體驗(yàn)一下,這里可有可無(wú)，這里我設(shè)置了魅族的效果，這樣加上弧形的圖片更好看。

mBannerCountViewPager.setPageTransformer(false,new MzTransformer());

step3：

view 的接口提供出來(lái)，供大家自行配置，這樣的好處在于，實(shí)用性更高，你可以添加 gif，或者視頻，或者簡(jiǎn)單的圖片，記得寫上 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);
                //如若你要設(shè)置點(diǎn)擊事件，也可以直接通過(guò)這個(gè)view 來(lái)設(shè)置，或者圖片的更新等等
            }
        });

xml 的配置，其實(shí)就是一個(gè) viewpager 加一個(gè) 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" />

這樣就完成了輪播功能，是不是封裝之后，媽媽再也不用擔(dān)心我寫輪播效果了呢

Tab 指示器

說(shuō)完輪播圖，再說(shuō)說(shuō) viewpager + fragment 這種更加常用的方式，這里也提供了三種比較常用的樣式。

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

其實(shí)你會(huì)了輪播圖的移動(dòng)版本，那么這個(gè)對(duì)你來(lái)說(shuō)，就是 a piece of cake。所以，就不解釋啦

第二種，條形狀的版本

沒(méi)啥好說(shuō)的，就是把上面的三角形改成條狀的，機(jī)智如我，代碼全靠抄?。。?！果然一個(gè)項(xiàng)目的質(zhì)量，取決于你復(fù)制粘貼的技巧

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

像我們常用的今日頭條，就是用這種方式，而它的原理也是非常簡(jiǎn)單，就是用額 clipRect 這個(gè)屬性，先繪制一遍正常顏色的，再繪制一遍其他顏色的，就可以了。我建議你先自己用 clipRect 試一下不同的顏色，再自己寫一下，你會(huì)發(fā)現(xiàn)，臥槽，這么簡(jiǎn)單的。。。。。

這里的配置就更簡(jiǎn)單了，viewpager 就是普通的，關(guān)鍵就是這個(gè) TabIndicator 了，因?yàn)槲野堰@三種效果都裝進(jìn)去了.

三角形的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>

可以看到你可以設(shè)置的它大小，里面的 textview 的顏色變化，是否顯示，和可視個(gè)數(shù)，如果你想改成圓條的，把 tabtype="tri" 的 tri 改成 rect 即可，然后如果想使用 textview 顏色變化的，只需要把 tabtext_type="normaltext" 中的 normaltext 改成 colortext 即可。

然后在代碼中這樣配置：

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

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

APP 首次啟動(dòng)引導(dǎo)頁(yè)

還有就是引導(dǎo)頁(yè)了，這樣跟輪播圖的配置差不多，因?yàn)橛玫囊彩悄菐讉€(gè)指示器。先看效果：

這里提供了三種樣式，其實(shí)還有個(gè)文字，不沒(méi)貼出來(lái)了，可以看輪播的；

引導(dǎo)圖的配置非常簡(jiǎn)單，取一個(gè)底部為放大的來(lái)說(shuō)：

 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 裝進(jìn) 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提供出來(lái)，這樣除了方便調(diào)試，也不會(huì)出現(xiàn)一個(gè)view，多個(gè)
        // parent的問(wèn)題，這里在輪播圖比較明顯
        viewPager.setPagerListener(bean, R.layout.image_layout, new PagerHelperListener() {
            @Override
            public void getItemView(View view, Object data) {
                //通過(guò)獲取到這個(gè)view，你可以隨意定制你的內(nèi)容
                ImageView imageView = view.findViewById(R.id.icon);
                imageView.setImageResource((Integer) data);
            }
        });

這里可以看到，我把 view 提供出來(lái)，供大家自行配置，這樣的好處在于，實(shí)用性更高，你可以添加gif，或者視頻，或者簡(jiǎn)單的圖片。
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"/>

這樣就基本講完了，雖然不難，確實(shí)經(jīng)常用到的，封裝起來(lái)，總比做無(wú)用功來(lái)得好。

奉上 github 鏈接：https://github.com/LillteZheng/ViewPagerHelper 里面有一些自定義屬性的說(shuō)明。

如果你有想要的效果，而本項(xiàng)目中沒(méi)有的，你可以在 issue 中提出來(lái)，作者看到了，會(huì)抽空去實(shí)現(xiàn)的，如果有發(fā)現(xiàn)問(wèn)題了或者需要提供哪些接口出來(lái)，也可以在 issue 中提出來(lái)。當(dāng)然，喜歡請(qǐng) start 或 fork 來(lái)一波。

代碼是最好的老師，可以 download，改成自己喜歡的。

贈(zèng)送一個(gè)彩蛋

第 3 次送書中獎(jiǎng)名單（另附一個(gè)彩蛋）

技術(shù)之道

1 來(lái)自大學(xué)生投稿：一個(gè)適合新手上手的商城項(xiàng)目

2 三行代碼實(shí)現(xiàn) TabLayout+ViewPager 的 Tab 滑動(dòng)效果，從封裝到開源

贊助商

優(yōu)秀人才不缺工作機(jī)會(huì)，只缺適合自己的好機(jī)會(huì)。但是他們往往沒(méi)有精力從海量機(jī)會(huì)中找到最適合的那個(gè)。100offer 會(huì)對(duì)平臺(tái)上的人才和企業(yè)進(jìn)行嚴(yán)格篩選，讓「最好的人才」和「最好的公司」相遇。掃描下方二維碼，注冊(cè) 100offer，談?wù)勀銓?duì)下一份工作的期待。一周內(nèi)，收到 5-10 個(gè)滿足你要求的好機(jī)會(huì)！