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模式的图库就完成。

guide地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。