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地址

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

时间: 2017-08-17

Android UI设计与开发之ViewPager介绍和简单实现引导界面

做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受--UI设计开始写起吧,循序渐进,娓娓道来.博主在这里和大家一起学习,希望能多多支持,话不多说,下面就开始讲解UI设计的第一篇. 在讲解如何实现引导界面的效果之前,我想先详细介绍一下ViewPager类的使用和说明,因为这是开发引导界面最重要的类,没有之一. 一.ViewPager实现的效果图 二.

ViewPager实现漂亮的引导页

废话就不多说了,直接上效果图和代码 fry.Activity01 package fry; import java.util.ArrayList; import java.util.Collection; import java.util.Iterator; import java.util.List; import java.util.ListIterator; import com.example.viewPager.R; import android.app.Activity; impor

Android开发实战之漂亮的ViewPager引导页

目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

Android控件ViewPager实现带有动画的引导页

ViewPager实现带有动画的引导页,供大家参考,具体内容如下 好了,又到我们学习基础控件的时候了,其实引导页很简单,就是五张图片而已 一.ViewPager实现传统的引导页 传统的ViewPager实现引导页和ListView是一样道理的,只是把ListView的Item换成图片,把BaseAdapter换成PagerAdapter,我们先来看下传统引导页的效果图 步骤一:编写xml文件 既然用到的是ViewPager,那么xml文件就必须要有ViewPager,细心的你,可能会发现最后一页

Android利用ViewPager实现用户引导界面效果的方法

本文实例讲述了Android利用ViewPager实现用户引导界面效果.分享给大家供大家参考,具体如下: 我相信有很多朋友在装完软件首次打开时,有很多软件都有一个软件功能介绍, 例如刚装完微信打开它,有很多介绍微信功能的图片,并且在屏幕下方有很多小圆点提示你当前图片的位置. 今天我就来实现这么个功能 所实现的功能: 1.可以左右滑动功能图片. 2.图片的索引 看出当前图片所在的位置. 3.可循环滑动. 4.图片的索引带有动画效果. 本次学习主要是利用ViewPager实现用户引导界面 在这里,我

Android启动引导页使用ViewPager实现

我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

Android使用ViewPager实现启动引导页效果

本文实例为大家分享了Android实现启动引导页效果的具体代码,供大家参考,具体内容如下 ViewPagerTwoActivity.java package cn.edu.zufe.app001; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.PagerAdapter; import androidx.vie

Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)

android新特性页面,ViewPager拖拽到最后一页再拖拽打开其他Activity.实现的方式有很多,效果比较好的就是到了最后一页再拖拽出现禁止蓝色条时再跳转activity 方式一:拿到ViewPager的边界条EdgeEffectCompat,判断是否到了边界(获取EdgeEffectCompat通过反射,方法来自网络最后边会给出原文) /** * 初始化view */ private void initView(){ pager = (ViewPager) findViewById(

Android使用ViewPager实现启动引导页

我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果./p> 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0"

Android自定义引导玩转ViewPager的方法详解

ViewPager简介: ViewPager(android.support.v4.view.ViewPager)是android扩展包v4包中的类,这个类可以让用户左右切换当前的view,实现滑动切换的效果. 注意: ViewPager类直接继承了ViewGroup类,也就是说它和我们经常打交道的LinearLayout一样,都是一个容器,需要在里面添加我们想要显示的内容. ViewPager类需要一个PagerAdapter适配器类给它提供数据,这个和ListView类似. ViewPage

iOS实现启动引导页与指纹解锁的方法详解

前言 应用程序启动时有些会有引导页,目的是用户第一次登录时对应用程序的一些简单了解介绍,一般就是几张轮播图片,当引用程序第一次进入时会跳到引导页,以后不再显示,这时就需要将不是第一次登录的标致flag保存到内存中,推荐用户偏好设置NSUserDefaults,第一直接去取值取这个flag取不到(因为是第一次登录)就跳引导页,然后在引导页进入登录页或者首页时将flag值保存到偏好设置中,以后再进来就可以取到不是第一登录的flag就直接跳过引导页.方式有两种:一种是直接切换UIWindow的根控制器

Android实现引导页的圆点指示器

在App引导界面通常有引导界面提示小圆点,我们使用一个集成的类 来整体封装实现: 使用的方法: 首先在 XML布局中引入这个自定义的控件: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent&quo

RxJava两步打造华丽的Android引导页

前言 之前的一篇文章:基于RxJava实现酷炫启动页 中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能. 效果如下图: 思路:思路其实很简单,就是在WelcomeActivity 中setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return:若不是,则直接setContentView(),然后启动动画再启动MainActivity. 一.WelcomeActivity

Android实现过渡动画、引导页 Android判断是否第一次启动App

目前的App在安装后,第一次打开,都会显示两秒左右的logo,然后进入引导页.如果关闭App,再重新打开,则只会显示logo,然后直接进入主页. 最近写了这个,记录一下. 首先是过渡动画,因为它不论App是否第一次启动都会显示. 这里我使用了Handler的postDelayed()方法.把过渡动画的Activity设为默认启动的Activity.在当前Activity中,执行postDelayed()方法,把延时的时长设为两秒即可. 过渡页面如下:transition_view.xml <?x

Android实现渐变启动页和带有指示器的引导页

引导页是项目中很常见的东西了,在用户下载app首次打开后,会进入引导界面,通常都是三四张图片说明,简单介绍下app的功能和使用方法之类,最后一张有着"进入应用"的按钮,点击即可进入主页,之后打开app则不会再次进入启动页,话不多说,以下做个归纳. 效果图: 实现步骤: 1.首先我们做个有渐变动画的启动页面SplashActivity 在onCreate里设置核心方法setAlphaAnimation() public void setAlphaAnimation(){ //生成Alph