ViewPager如何實(shí)現(xiàn)輪播圖Banner/引導(dǎo)頁(yè)Guide

小編給大家分享一下ViewPager如何實(shí)現(xiàn)輪播圖Banner/引導(dǎo)頁(yè)Guide，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Banner效果：

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

昨天，有使用此庫(kù)的同學(xué)提出需求，想在引導(dǎo)頁(yè)的時(shí)候用這個(gè)庫(kù)并且最后一頁(yè)有進(jìn)入按鈕如何實(shí)現(xiàn)，為滿足他的需求，也方便更多開發(fā)者是快速實(shí)現(xiàn)。進(jìn)行了簡(jiǎn)單的擴(kuò)展支持Guide模式的使用。

Guide效果圖：

OK，效果如圖所以，咱們此庫(kù)滿足了既可在Banner上使用也可以快速在第一次安裝應(yīng)用的時(shí)候引導(dǎo)頁(yè)使用。

Banner與Guide有什么區(qū)別？

引導(dǎo)頁(yè)的最后一頁(yè)有按鈕，Banners沒(méi)有

引導(dǎo)頁(yè)的底部原點(diǎn)距離較大，Banners可以幾乎固定

Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第一步：添加按鈕

<?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>

相比于原來(lái)咱們新增了按鈕，這時(shí)候咱們按照這個(gè)布局運(yùn)行在每一個(gè)界面都包含了Button,而引導(dǎo)頁(yè)模式只有在最后一頁(yè)需要展示按鈕。

Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第二步：按鈕的控制與模式支持

模式的支持

attrs.xml下新增自定義屬性

 <!--是否為引導(dǎo)頁(yè)-->
    <attr name="isGuide" format="boolean"></attr>
    <attr name="indicatorBottomPadding" format="integer"></attr>

按鈕的控制

在ViewPager中咱們控制按鈕可以在ViewPager.OnPageChangeListener的接口方法中onPageScrolled進(jìn)行控制

 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引導(dǎo)頁(yè)模式，直接設(shè)置按鈕不顯示，并且跳出程序。
如果是Guide引導(dǎo)頁(yè)模式，咱們針對(duì)倒數(shù)第二頁(yè)與最后的控制的滑動(dòng)距離來(lái)判斷了按鈕的顯示。

核心點(diǎn)：

positionOffset：表示滑動(dòng)的距離
向左滑動(dòng)1—->>0.5>>0
向右滑動(dòng)0—->>0.5>>1
根據(jù)滑動(dòng)的距離進(jìn)行按鈕的一個(gè)漸變顯示。

Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第三步：按鈕的點(diǎn)擊回調(diào)

點(diǎn)擊按鈕需要執(zhí)行開發(fā)者的自身邏輯跳轉(zhuǎn)，咱們用接口回調(diào)完成

 public interface onStartListener {
    void startOpen();
  }

Banner基礎(chǔ)上擴(kuò)展實(shí)現(xiàn)第四步：Guide模式使用方式

對(duì)比banner只需要增加以下代碼，如果需要其他屬性可以自己設(shè)置（如，不自動(dòng)滾動(dòng)，不設(shè)置循環(huán)播放等等）

//設(shè)置為全屏
    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() {
        //回調(diào)跳轉(zhuǎn)的邏輯
        Toast.makeText(MainActivity.this,"我要進(jìn)入主界面",1).show();

      }
    });

以上是“ViewPager如何實(shí)現(xiàn)輪播圖Banner/引導(dǎo)頁(yè)Guide”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！