ViewPager打造輪播圖Banner/引導(dǎo)頁(yè)Guide

更新時(shí)間：2021年01月02日 09:49:08 作者：Allure丶

這篇文章主要為大家詳細(xì)介紹了ViewPager打造輪播圖Banner和引導(dǎo)頁(yè)Guide，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

去年7月時(shí)，在Github發(fā)布了一個(gè)開(kāi)源的Banner庫(kù)，雖然Star不多，但還是有少部分人使用。

Banner效果：

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

昨天，有使用此庫(kù)的同學(xué)提出需求，想在引導(dǎo)頁(yè)的時(shí)候用這個(gè)庫(kù)并且最后一頁(yè)有進(jìn)入按鈕如何實(shí)現(xiàn)，為滿足他的需求，也方便更多開(kāi)發(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="立即開(kāi)啟"
  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í)行開(kāi)發(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();

   }
});

到此，咱們的banner圖升級(jí)為Guide模式的圖庫(kù)就完成。

GUIDE地址

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: