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控件ViewPager实现带有动画的引导页

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

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

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

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

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

Android启动引导页使用ViewPager实现

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

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 UI设计与开发之ViewPager介绍和简单实现引导界面

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

Android UI设计与开发之ViewPager仿微信引导界面以及动画效果

基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧.好的,话不多说,回归正题. 这篇要实现的是一个仿微信的动画效果,虽然这种效果的实现在网上到处都有,但是我还是想站在中低端开发者的角度去告诉大家是如何实现的,当然实现的方式有很多,我也只是列出了我认为实现起来比较方便的一种方法,希望大家能够受用. 一.实现的效果图 有图才有真相,上图先: 点击按钮后

Android UI设计与开发之PopupWindow仿腾讯新闻底部弹出菜单

前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来个简单的栗子,效果如下: 只有两个布局文件,一个是弹窗布局(只有一张图片),一个是主界面布局(只有一个按钮). 然后在主界面代码中实例 PopupWindow ,指定弹出的界面,在按钮点击事件中显示或隐藏弹窗就可以了,代码如下: package com.yanis.demo; import andr

Android开发之android_gps定位服务简单实现

前言 gps定位服务的学习是这段时间gps课程的学习内容,之前老师一直在将概念,今天终于是实践课(其实就是给了一个案例,让自己照着敲).不过在照着案列敲了两遍之后,发现老师的案例是在是太老了,并且直接照着案例敲,也无法理解其中很多类,方法的作用. 于是自己在网上查看了其他实现的方法,并尝试敲案列,期间的挫折一言难尽. (网上找的案例也并不信息,使得我在给予权限,和权限检查方面一直报错,因为我使用的是最新的As和java11,在经过数遍从基础理解到实例编写的过程和不知多少遍google之后,终于完

Android开发之sqlite3命令行简单使用方法

本文实例讲述了Android开发之sqlite3命令行简单使用方法.分享给大家供大家参考,具体如下: 首先需要定位到database所在的目录里面,然后使用命令 sqlite3 databasename(数据库的名字)进入 常用命令: 1. .table     列取该数据库下面的数据表名 2. .schema 或者 .schema + 表名       获取整个或者是单个表的表结构 3. .database 显示该数据库所在的位置 4. .dump 显示数据库的所有信息(包括表结构,表数据)

Android UI设计系列之自定义ListView仿QQ空间阻尼下拉刷新和渐变菜单栏效果(8)

好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客:Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7) ,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效果.于是花点时间动手试了试,基本上达到了QQ空间的效果,截图如下: 通过观察QQ空间的运行效果,发现当往上滚动时菜单

Android UI设计系列之自定义ViewGroup打造通用的关闭键盘小控件ImeObserverLayout(9)

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51598682 我们平时开发中总会遇见一些奇葩的需求,为了实现这些需求我们往往绞尽脑汁有时候还茶不思饭不香的,有点夸张了(*^__^*)--我印象最深的一个需求是在一段文字中对部分词语进行加粗显示.当时费了不少劲,不过还好,这个问题最终解决了,有兴趣的童靴可以看一下:Android UI设计之<六>使用HTML标签,实现在TextView中对部分文字进行加粗显示. 之前产品那边提了这样

Android UI设计系列之自定义Dialog实现各种风格的对话框效果(7)

虽然Android给我们提供了众多组件,但是使用起来都不是很方便,我们开发的APK都有自己的风格,如果使用了系统自带的组件,总是觉得和应用的主题不着边际并且看起来也不顺心,那我们就需要自定义了,为了方便大家对自定义组件的学习,我接下来准备了几遍有关自定义的Dialog的文章,希望对大家有帮助. 在开发APK中最常见的估计就数弹出对话框了,这种对话框按照按钮数量来分大致是三种:一个按钮,两个按钮,三个按钮.现在要讲的就是按照按钮数量分为以上三类吧(当然了可以有更多的按钮,只要你愿意). 自定义Di

Android UI设计与开发之使用ViewPager实现欢迎引导页面

本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载地址,几乎源码的每一行都有注释,写的通俗易懂,非常清晰,如有不懂的可以留言,本博主一定尽心尽力,为大家答题解惑,希望大家多多支持,好的,话不多说,让我们回归到今天的正题. 一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实

Android UI设计与开发之实现应用程序只启动一次引导界面

这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引导界面,以后在启动程序的时候就不再显示了. 其实要想实现这样的效果,只要使用SharedPreferences类,就会让程序变的非常简单,下面来详细介绍一下这个类的使用方法 一.SharedPreferences的详