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模式的图库就完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 使用bash编写Linux shell脚本--复合命令
- 【web必知必会】—— 使用DOM完成属性填充
- 进程控制实验--fork()
- 编写兼容性JS代码
- msysGit管理GitHub代码
- 【web必知必会】—— DOM:四个常用的方法
- TortoiseSVN与VisualSVN Server搭建SVN版本控制系统
- 【SVN多用户开发】代码冲突&解决办法
- 【AngularJS】—— 13 服务Service
- 【AngularJS】—— 12 独立作用域
- 【AngularJS】—— 11 指令的交互
- 使用DOM动态创建标签
- Eclipse配置Tomcat,访问404错误
- 【AngularJS】—— 9 自定义过滤器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 缓冲区溢出
- 指针变量的传值和传址
- 又被限速,我决定用 Serverless 搭建一款私人网盘
- C语言与C++常见面试题
- delete 和 delete [] 的真正区别
- C语言最大难点揭秘:编程的祸根!
- 【漏洞修复】MongoDB未授权访问漏洞复现和修复
- 在 Istio 中实现 Redis 集群的数据分片、读写分离和流量镜像
- 实现Android 滑动退出Activity的功能
- Android开发中播放声音的两种方法分析
- Android UI设计与开发之实现应用程序只启动一次引导界面
- Android编程实现两点触控功能示例
- Android RecycleView添加head配置封装的实例
- Android编程实现捕获程序异常退出时的错误log信息功能详解
- Android开发之Socket通信传输简单示例