Android 轮播图Banner切换图片的效果
Android XBanner使用详解
前言:现如今的很多APP都介入了广告,不过,大多数都是以轮播图的形式展现的,我之前使用的是viewpage和自定义控件实现的这些功能,不过,相比于banner来说,效果还显示很逊色的,毕竟,现在的手机,性能都过剩,这些消耗,也不会太影响APP的性能!
之前接入的是Banner,现在突然间很想使用banner的升级版,我借鉴了XBanner的github介绍
一、XBanner简介
支持图片无限轮播的控件,可进行自定义功能。
- 支持根据服务端返回的数据动态设置广告条的总页数
- 支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播
- 支持自定义状态指示点位置 左 、中 、右
- 支持自定义状态指示点
- 支持监听 item 点击事件
- 支持设置图片轮播间隔
- 支持指示器背景的修改及隐藏/显示
- 支持显示提示性文字功能
- 支持图片切换动画,目前支持10种切换动画,具体可看demo
- 支持设置图片切换速度
- 支持设置数字指示器
- 支持Glide/Fresco等主流图片加载框架加载图片
效果图
基本使用
1.添加Gradle依赖
dependencies {
compile 'com.xhb:xbanner:1.3.1'
}
2.在清单文件中添加网络权限
<uses-permission android:name="android.permission.INTERNET" />
3 由于XBanner中有可能从网络加载图片,因此也需要导入一些图片加载框架的依赖,如Glide
`compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'jp.wasabeef:glide-transformations:1.0.6'`
4 在布局文件中添加XBanner
<com.stx.xhb.xbanner.XBanner
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/banner_1"
android:layout_width="match_parent"
android:layout_height="180dp"
app:AutoPlayTime="3000"
app:pointsContainerBackground="#44aaaaaa"
app:pointNormal="@drawable/shape_noraml"
app:pointSelect="@drawable/shape_selected"
app:pointsPosition="RIGHT"
app:tipTextSize="12sp"
app:isShowNumberIndicator="true"
app:isShowIndicatorOnlyOne="true"
app:pageChangeDuration="800"/>
5 XBanner属性
属性名 属性说明 属性值
isAutoPlay 是否支持自动轮播 boolean类型,默认为true
autoPlayTime 图片轮播事件间隔 int类型,默认5000ms
pointNormal 指示器未选中时的状态 drawable类型,不指定的话使用默认状态点
pointSelect 指示器选中时的状态 drawable类型,不指定的话使用默认状态点
pointsVisible 是否显示指示器 boolean类型,默认为true
pointsPosition 指示点位置 CENTER、LEFT、RIGHT,默认CENTER
pointsContainerBackground 指示器条背景 color类型、drawable类型、mipmap类型等
pointContainerPosition 指示器条位置 TOP、BOTTOM,默认BOTTOM
pointContainerLeftRightPadding 指示点容器左右内间距 dimension类型,默认10.0dip
pointTopBottomPadding 指示点上下内间距 dimension类型,默认6.0dip
pointLeftRightPadding 指示点左右内间距 dimension类型,默认3.0dip
tipTextColor 提示文字的颜色 reference类型
tipTextSize 提示文字的大小 dimension类型,默认10.0dp
6.在Activity或者Fragment中配置
banner = (XBanner) findViewById(R.id.banner);
List<String> imgesUrl = new ArrayList<>();
imgesUrl.add("http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg");
imgesUrl.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg");
imgesUrl.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg");
imgesUrl.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg");
// 为XBanner绑定数据
banner .setData(imgesUrl,null);//第二个参数为提示文字资源集合
// XBanner适配数据
banner.setmAdapter(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, View view, int position) {
Glide.with(MainActivity.this).load(imgesUrl.get(position)).into((ImageView) view);
}
});
// 设置XBanner的页面切换特效,选择一个即可,总的大概就这么多效果啦,欢迎使用
banner.setPageTransformer(Transformer.Default);//横向移动
banner.setPageTransformer(Transformer.Alpha); //渐变,效果不明显
banner.setPageTransformer(Transformer.Rotate); //单页旋转
banner.setPageTransformer(Transformer.Cube); //立体旋转
banner.setPageTransformer(Transformer.Flip); // 反转效果
banner.setPageTransformer(Transformer.Accordion); //三角换页
banner.setPageTransformer(Transformer.ZoomFade); // 缩小本页,同时放大另一页
banner.setPageTransformer(Transformer.ZoomCenter); //本页缩小一点,另一页就放大
banner.setPageTransformer(Transformer.ZoomStack); // 本页和下页同事缩小和放大
banner.setPageTransformer(Transformer.Stack); //本页和下页同时左移
banner.setPageTransformer(Transformer.Depth); //本页左移,下页从后面出来
banner.setPageTransformer(Transformer.Zoom); //本页刚左移,下页就在后面
// 设置XBanner页面切换的时间,即动画时长
banner.setPageChangeDuration(1000);
7 监听广告 item 的单击事件
banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, int position) {
Toast.makeText(MainActivity.this, "点击了第"+position+"图片", Toast.LENGTH_SHORT).show();
}
});
8 为了更好的体验,建议j在添加以下代码
/** 为了更好的体验效果建议在下面两个生命周期中调用下面的方法 **/
@Override
protected void onResume() {
super.onResume();
banner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
banner.stopAutoPlay();
}
9 混淆配置
##XBanner 图片轮播混淆配置
-keep class com.stx.xhb.xbanner.**{*;}
Android 轮播图Banner切换图片的效果的更多相关文章
- Android轮播图Banner的实现
从慕课网上学了一门叫做“不一样的自定义实现轮播图效果”的课程,感觉实用性较强,而且循序渐进,很适合初学者.在此对该课程做一个小小的笔记. 实现轮播思路: 1.一般轮播图是由一组图片和底部轮播圆点组成, ...
- android 使用图片轮播图---banner 使用
转自:https://github.com/youth5201314/banner 使用步骤 Step 1.依赖banner Gradle dependencies{ compile 'com.you ...
- 029 Android 轮播图广告Banner开源框架使用
1.Banner介绍 现在的绝大数app都有banner界面,实现循环播放多个广告图片和手动滑动循环等功能. 2.使用环境配置(具体可见github开源项目) (1)添加依赖 在build.gradl ...
- android 轮播图
轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考 目前测试图片为mipmap中的图片 没有写从网络加载 ...
- Android轮播图
轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考目前测试图片为mipmap中的图片 没有写从网络加载图 ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- android轮播图的实现原理
1.轮播图的点:RadioGroup,根据网络请求的数据,解析得到的图片的个数,设置RadioGroup的RadioButton的个数. 2.轮播图的核心技术:用Gallery来存放图片,设置适配器. ...
- [android] 轮播图-滑动图片标题焦点
谷歌提供的v4包,ViewPager 在布局文件中,先添加<android.support.v4.view.ViewPager/>控件,这个只是轮播的区域 在布局文件中,布置标题描述部分 ...
- jquery 焦点轮播图控制每张图片停留不同时间
轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间 *{ padding:0px; border:0px; margin:0px; } ul { list-style: ...
随机推荐
- XQuery 术语
XQuery 术语 节点 在 XQuery 中,有七种节点:元素.属性.文本.命名空间.处理指令.注释.以及文档(根)节点.XML 文档是被作为节点树来对待的.树的根被称为文档节点或者根节点. 请看下 ...
- [SQL]LeetCode181. 超过经理收入的员工 | Employees Earning More Than Their Managers
SQL架构 Create table If Not Exists Employee (Id ), Salary int, ManagerId int) Truncate table Employee ...
- [Swift]LeetCode553. 最优除法 | Optimal Division
Given a list of positive integers, the adjacent integers will perform the float division. For exampl ...
- C#版 - Leetcode 201. 数字范围按位与(bitwise AND) - 题解
C#版 - Leetcode 201. 数字范围按位与(bitwise AND) - 题解 在线提交: https://leetcode.com/problems/bitwise-and-of-num ...
- C++版 - 剑指offer面试题14: 调整数组顺序使奇数位于偶数前面
题目: 调整数组顺序使奇数位于偶数前面 热度指数:11843 时间限制:1秒 空间限制:32768K 本题知识点: 数组 题目描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇 ...
- Sdcard插拔、状态广播监听,Android文件系统,Android存储器相关知识总结
一 SDcard广播监听,注册,取消注册的实现 (1)根据实际需要监听的事件,添加action,并注册,一般在onCreate中添加 //在IntentFilter中选择你要监听的行为 IntentF ...
- Android 开发工具类 19_NetworkStateReceiver
检测网络状态改变类: 1.注册网络状态广播: 2.检查网络状态: 3.注销网络状态广播: 4.获取当前网络状态,true为网络连接成功,否则网络连接失败: 5.注册网络连接观察者: 6.注销网络连接观 ...
- JAVA日志的前世今生
这世界上很多事情,看起来就像彩虹一样炫目而神奇,实际上背后蕴含着随处可见的原理.就好像静儿几年前买过一件超贵的防辐射服,当时销售人员把手机严严实实的包在防辐射服里,然后让我打电话测试,果然没有信号. ...
- [Leetcode]695. Max Area of Island
Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...
- 分享几个有趣的Linux命令
前言 最近工作比较忙,没时间写博客,这次介绍几个有趣的Linux命令. 命令:sl 当你使用这个命令时会看到一辆小火车从你的屏幕经过.亲测! 安装命令如下: yum -y install sl 执行效 ...