ViewPager打造輪播圖（Banner）\引導頁（Guide）

前言

今年7月時，在Github發佈了一個開源的Banner庫，雖然Star不多，但還是有少部分人使用。

Banner效果：

Github鏈接地址：https://github.com/Allure0/LMBanners

昨天，有使用此庫的同學提出需求，想在引導頁的時候用這個庫並且最後一頁有進入按鈕如何實現，爲滿足他的需求，也方便更多開發者是快速實現。進行了簡單的擴展支持Guide模式的使用。

Guide效果圖：

OK，效果如圖所以，咱們此庫滿足了既可在Banner上使用也可以快速在第一次安裝應用的時候引導頁使用。

Banner與Guide有什麼區別？

• 引導頁的最後一頁有按鈕，Banners沒有

• 引導頁的底部原點距離較大，Banners可以幾乎固定

Banner基礎上擴展實現第一步：添加按鈕

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/layout"
    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <com.allure.lbanners.viewpager.HorizonVerticalViewPager
        android:id="@+id/gallery"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:unselectedAlpha="1"></com.allure.lbanners.viewpager.HorizonVerticalViewPager>

    <LinearLayout
        android:id="@+id/indicatorLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="20dp"></LinearLayout>

    <Button
        android:id="@+id/btn_start"
        android:layout_width="104dp"
        android:layout_height="29dp"
        android:layout_above="@id/indicatorLayout"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        android:background="@drawable/banners_btn_shape"
        android:gravity="center"
        android:text="立即開啓"
        android:textColor="#f24814"
        android:textSize="12sp" />

</RelativeLayout>

相比於原來咱們新增了按鈕，這時候咱們按照這個佈局運行在每一個界面都包含了Button,而引導頁模式只有在最後一頁需要展示按鈕。

Banner基礎上擴展實現第二步：按鈕的控制與模式支持

• 模式的支持
  attrs.xml下新增自定義屬性

 <!--是否爲引導頁-->
        <attr name="isGuide" format="boolean"></attr>
        <attr name="indicatorBottomPadding" format="integer"></attr>

• 按鈕的控制
  在ViewPager中咱們控制按鈕可以在ViewPager.OnPageChangeListener的接口方法中onPageScrolled進行控制

 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.d("LMBanners", "onPageScrolled was invoke()");
        int realPosition = position %= showCount;
        if(!isGuide){
            btnStart.setVisibility(View.GONE);
            return;
        }
        if (realPosition == getItemCount() - 2) {
            if (positionOffset > 0.5f) {
                if (btnStart != null) {
                    ViewHelper.setAlpha(btnStart, positionOffset);
                    btnStart.setVisibility(View.VISIBLE);
                }
            } else {
                btnStart.setVisibility(View.GONE);
            }
        } else if (realPosition == getItemCount() - 1) {
            if (positionOffset < 0.5f) {
                btnStart.setVisibility(View.VISIBLE);
                ViewHelper.setAlpha(btnStart, 1.0f - positionOffset);
            } else {
                btnStart.setVisibility(View.GONE);
            }
        } else {
            btnStart.setVisibility(View.GONE);
        }


    }

以上代碼中isGuide咱們判斷是哪一種模式，如果不是Guide引導頁模式，直接設置按鈕不顯示，並且跳出程序。
如果是Guide引導頁模式，咱們針對倒數第二頁與最後的控制的滑動距離來判斷了按鈕的顯示。

核心點：
positionOffset：表示滑動的距離
向左滑動1—->>0.5>>0
向右滑動0—->>0.5>>1
根據滑動的距離進行按鈕的一個漸變顯示。

Banner基礎上擴展實現第三步：按鈕的點擊回調
點擊按鈕需要執行開發者的自身邏輯跳轉，咱們用接口回調完成

  public interface onStartListener {
        void startOpen();
    }

Banner基礎上擴展實現第四步：Guide模式使用方式

對比banner只需要增加以下代碼，如果需要其他屬性可以自己設置（如，不自動滾動，不設置循環播放等等）

//設置爲全屏
        mLBanners.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
        //true爲Guide模式，false爲banner模式
          mLBanners.isGuide(true);
          mLBanners.setOnStartListener(new LMBanners.onStartListener() {
            @Override
            public void startOpen() {
                //回調跳轉的邏輯
                Toast.makeText(MainActivity.this,"我要進入主界面",1).show();

            }
        });

到此，咱們的banner圖升級爲Guide模式的圖庫就完成。

如果有需要的同學可以自取使用，有BUG或者使用問題疑問請QQ或者Issues反饋
QQ羣：482906631
Github鏈接地址：https://github.com/Allure0/LMBanners