文档章节

AdPlayBanner:功能丰富、一键式使用的图片轮播插件

Ryane
 Ryane
发布于 2017/07/04 20:01
字数 3431
阅读 128
收藏 1
点赞 0
评论 0

AdPlayBanner

AdPlayBanner是一个Android平台基于ViewPager实现的轮播图插件,主要用以自动或者手动地播放轮播图,提供了Fresco、Picasso、Glide等图片加载方式供用户使用,以及多种图片切换动画,设置轮播时间,设置数据源顺序,提供不同分页指示器等功能,实现了一键式、灵活式的控件使用方式。下面是效果图:

目前AdPlayBanner已经开源到了Github上面,大家可以在Github上面查看本控件的Demo,或者直接使用。

Github地址为:https://github.com/ryanlijianchang/AdPlayBanner

一、使用方法

1.添加依赖

首先,在项目级别的build.gradle文件添加依赖:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

然后,在模块目录下的build.gradle文件添加依赖:

dependencies {
	compile 'com.github.ryanlijianchang:AdPlayBanner:v0.2'
}

2.在布局文件中添加控件

在布局文件中添加AdPlayBanner控件,根据自己的需要设置高度,注意,控件需要在一个布局(可以是LinearLayout,RelativeLayout,FrameLayout等)之内。

<com.ryane.banner_lib.AdPlayBanner
    android:id="@+id/game_banner"
    android:layout_width="match_parent"
    android:layout_height="200dp" />

3.在Activity中绑定控件

mAdPlayBanner = (AdPlayBanner) findViewById(R.id.game_banner);

4.添加网络权限

由于加载的是网络图片,所以需要在Manifests文件中添加网络请求权限

<uses-permission android:name="android.permission.INTERNET" />

5.初始化Fresco

默认使用Fresco加载图片,所以按照Fresco官方做法,需要在Application创建时初始化Fresco,常规做法如下:

(1) 创建MyApplication类继承Application,然后在onCreate()方法中初始化Fresco:

public class MyApplication extends Application {
    [@Override](https://my.oschina.net/u/1162528)
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

(2) 在Manifests文件中<application>标签中增加 android:name="你的类名":

<application
    android:name=".MyApplication"
	...>

	...

</application>

当然,如果你不使用Fresco加载,以上步骤可以跳过。

6.一键式使用

AdPlayBanner使用了Builder设计模式,所以可以通过一键式写法来直接装载AdPlayBanner,当然也可以使用常规写法。在使用之前需要先设置数据源,使用ArrayList<AdPageInfo>来封装数据,而AdPageInfo是一个封装好的Bean类,封装如下:

public class AdPageInfo implements Parcelable {
    public String title;    // 广告标题
    public String picUrl;   // 广告图片url
    public String clickUlr; // 图片点击url
    public int order;       // 顺序
}

在设置完数据源mDatas之后,使用Builder模式写法,一句话就可以使用AdPlayBanner了。注意,setUp()方法必须在调用完所有API之后,最后调用

mAdPlayBanner.setInfoList(mDatas).setUp();

当然,你也可以使用常规写法:

mAdPlayBanner.setInfoList(mDatas);
mAdPlayBanner.setUp();

二、功能介绍

1.自定义数据顺序

在调用setUp()方法之前,我们需要设置数据源,每一页的数据使用AdPageInfo来封装,它里面就有一个int型变量order,我们通过给每一个AdPageInfo赋值order,AdPlayBanner就会自动按照order的大小来排序,如:

我们封装了三个数据到ArrayList里面,按顺序是图片1->图片2->图片3

List<AdPageInfo> mDatas = new ArrayList<>();
AdPageInfo info1 = new AdPageInfo("图片1", "http://osjnd854m.bkt.clouddn.com/pic1_meitu_1.jpg", "链接1", 3);
AdPageInfo info2 = new AdPageInfo("图片2", "http://osjnd854m.bkt.clouddn.com/pic1_meitu_2.jpg", "链接2", 2);
AdPageInfo info3 = new AdPageInfo("图片3", "http://osjnd854m.bkt.clouddn.com/pic1_meitu_3.jpg", "链接3", 1);
mDatas.add(info1);
mDatas.add(info2);
mDatas.add(info3);

装载之后运行,可见轮播顺序是按照order的顺序来播放:

2.无限循环轮播

很多轮播插件没有实现无限循环轮播这个功能, 而在AdPlayBanner上得到了实现,如下图可见,当我们无限循环滑动时,插件仍能正常运行:

3.支持三种图片加载方式

目前比较主流的Fresco、Picasso、Glide三种图片加载方式在AdPlayBanner中都支持,至于三者的区别我就不赘述了,默认是使用Fresco方式加载,具体调用方法setImageLoadType(ImageLoaderType type),只需要将传入数据设置为:FRESCOGLIDEPICASSO其中一种即可,同样,也是可以通过代码一键式使用,例如使用Glide方式加载(其他加载方式使用类似),使用方法如下:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setImageLoadType(Glide)	// 设置Glide类型的图片加载方式
        .setUp();

4.支持多种ScaleType

在AdPlayBanner中,可以根据用户需要设置图片的ScaleType,具体效果和ImageView的ScaleType一致,默认是使用FIT_XY,但是在AdPlayBanner中比ImageView少了一种MATRIX类型,在AdPlayBanner中具体支持的ScaleType有如下:FIT_XYFIT_STARTFIT_CENTERFIT_ENDCENTERCENTER_CROPCENTER_INSIDE其中,具体调用方法setImageViewScaleType(ScaleType scaleType),只需要将具体的ScaleType传入即可,同样,也是可以通过代码一键式使用,例如设置ScaleType为FIT_START(其他类似),使用方法如下:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setImageViewScaleType(FIT_START)	// 设置FIT_START类型的ScaleType
        .setUp();

5.支持不同页码指示器

在AdPlayBanner中,提供了数字型点型空型页码指示器,用户可以通过调用setIndicatorType(IndicatorType type),传入NONE_INDICATORNUMBER_INDICATORPOINT_INDICATOR其中一种,即可显示对应的页码指示器,三种页码指示器对应效果如下:

(1) NONE_INDICATOR:空型页码指示器

(2) NUMBER_INDICATOR:数字页码指示器

(3) POINT_INDICATOR:点型页码指示器

使用方法也是非常简单,如我需要使用数字型页码指示器,使用方法如下:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(NUMBER_INDICATOR)		//使用数字页码指示器
        .setUp();

此外,你也可以调用setNumberViewColor(int normalColor, int selectedColor, int numberColor)来修改数字型页码指示器的样式,normalColor为数字没选中时的背景颜色,selectedColor为数字选中时的背景颜色,numberColor为数字的字体颜色,例如我通过调用这个方法,把三个颜色都改变掉(注意:传入int型颜色必须ARGB8888的颜色类型,或者通过资源文件定义颜色再获取才有效),使用方法如下:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(NUMBER_INDICATOR)     //使用数字页码指示器
        .setNumberViewColor(0xff00ffff, 0xffff3333, 0xff0000ff)
        .setUp();

得到如下效果:

6.添加灵活性标题

在AdPlayBanner中,只需要调用addTitleView(TitleView mTitleView),就可以插入标题了,并且该标题的灵活性很强,可以根据用户需要修改标题的背景、位置、字体大小、padding、magin等,先上一个提供的默认效果:

由于是使用了默认的效果,所以用法也是非常简单:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(POINT_INDICATOR)     //使用数字页码指示器
        .addTitleView(TitleView.getDefaultTitleView(getApplicationContext()))  // 使用默认标题
        .setUp();

我们可以看到我们通过调用addTitleView(TitleView mTitleView),传入一个TitleView即可以生成标题,而上面是调用了AdPlayBanner提供的一个默认标题,当然,我们也说了这个标题的灵活性很强,就是我们可以设置TitleView的属性,我们来看一下TitleView提供了哪些API:

  • TitleView setTitleColor(int color):设置标题字体颜色,传入color必须ARGB8888的颜色类型,或者通过资源文件定义颜色再获取才有效。
  • setPosition(Gravity gravity):设置标题在AdPlayBanner中的位置,有PARENT_TOP,PARENT_BOTTOM,PARENT_CENTER三个取值,分别位于父布局顶部,父布局底部,父布局中间。
  • setViewBackground(int color):设置标题的背景颜色,传入int型颜色必须ARGB8888的颜色类型,或者通过资源文件定义颜色再获取才有效。
  • TitleView setTitleSize(int size):设置标题的字体大小,单位是sp。
  • setTitleMargin(int left, int top, int right, int bottom):设置标题的四个方向margin值,单位是dp。
  • setTitlePadding(int left, int top, int right, int bottom):设置标题的四个方向padding值,单位是dp。

同样,TitleView也是支持Builder模式的写法,例如我自定义一个TitleVIew并加到AdPlayBanner中,使用方法如下:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(POINT_INDICATOR)     // 使用数字页码指示器
        .addTitleView(new TitleView(getApplicationContext())    // 创建新的TitleView
                            .setPosition(PARENT_TOP)
                            .setTitleColor(0xffffffff)          // 设置字体颜色
                            .setViewBackground(0x9944ff18)      // 设置标题背景颜色
                            .setTitleSize(18)                   // 设置字体大小
                            .setTitleMargin(0,0,2,0)           // 设置margin值
                            .setTitlePadding(2,2,2,2))          // 设置padding值
        .setUp();

效果如下:

7.支持多样式切换动画

由于AdPlayBanner是基于ViewPager实现的,所以AdPlayBanner和ViewPager一样,同样支持自定义的切换动画,只需要通过调用setPageTransfromer(ViewPager.PageTransformer transformer)方法,传入一个PageTransformer,即可改变它的切换样式,AdPlayBanner中提供了三种现成的切换方式:

  • FadeInFadeOutTransformer:淡入淡出效果

  • RotateDownTransformer:旋转效果

  • ZoomOutPageTransformer: 空间切换效果

使用起来也是非常简单,例如使用ZoomOutPageTransformer切换效果:

mAdPlayBanner
        .setInfoList((ArrayList<AdPageInfo>) mDatas)
        .setIndicatorType(POINT_INDICATOR)     // 使用数字页码指示器
        .setBannerBackground(0xff000000)       // 设置背景颜色
        .setPageTransfromer(new ZoomOutPageTransformer())   // 设置切换效果
        .setUp();

当然,你也可以自定义一个transformer实现ViewPager.PageTransformer接口,并重写transformPage(View view, float position)方法即可实现自定义的切换效果。

8.设置是否自动轮播

通过调用setAutoPlay(boolean autoPlay),传入boolean值控制是否自动播放的开关,传入true为自动,传入false为手动。

9.设置自动滑动间隔时间

通过调用setInterval(int interval),传入int型的时间(单位ms),即可改变AdPlayBanner自动轮播时的切换时间。

10.设置点击事件监听器

AdPlayBanner支持点击事件监听,通过调用setOnPageClickListener(OnPageClickListener l),传入OnPageClickListener,即可完成AdPlayBanner的点击监听,使用方法非常简单:

mAdPlayBanner
    .setInfoList((ArrayList<AdPageInfo>) mDatas)
    .setIndicatorType(POINT_INDICATOR)     // 使用数字页码指示器
    .setOnPageClickListener(new AdPlayBanner.OnPageClickListener() {
        [@Override](https://my.oschina.net/u/1162528)
        public void onPageClick(AdPageInfo info, int postion) {
            // 点击操作
        }
    })
    .setUp();

三、API

AdPlayBanner:实现轮播效果的控件

AdPlayBanner解释备注
addTitleView(TitleView mTitleView)添加一个TitleView可以通过TitleView.getDefaultTitleView(Context context)来使用默认的TitleView或者通过new Title()的方式传入
setBannerBackground(int color)设置AdPlayBanner的背景颜色传入color必须ARGB8888的颜色类型,或者通过资源文件定义颜色再获取才有效
setIndicatorType(IndicatorType type)设置页码指示器类型传入NONE_INDICATORNUMBER_INDICATORPOINT_INDICATOR其中一种
setInterval(int interval)设置自动轮播时的切换时间单位ms
setImageLoadType(ImageLoaderType type)设置图片加载方式传入FRESCOGLIDEPICASSO其中一种
setPageTransfromer(ViewPager.PageTransformer transformer)设置切换动画,如果不设置动画,设置为null提供了FadeInFadeOutTransformerRotateDownTransformerZoomOutPageTransformer三种,也可以传入自定义的TransFormer
setNumberViewColor(int normalColor, int selectedColor, int numberColor)设置数字页码的颜色normalColor 数字正常背景颜色,selectedColor 数字选中背景颜色,numberColor 数字字体颜色
setOnPageClickListener(OnPageClickListener l)设置事件点击监听器传入一个OnPageClickListener
setImageViewScaleType(ScaleType scaleType)设置图片的ScaleType传入FIT_XYFIT_STARTFIT_CENTERFIT_ENDCENTERCENTER_CROPCENTER_INSIDE其中一种
setAutoPlay(boolean autoPlay)设置是否自动播放默认为true 自动播放,传入false为手动
setInfoList(ArrayList<AdPageInfo> pageInfos)设置Banner的数据源传入必须为AdPageInfo类型的ArrayList
setUp()装载AdPlayBanner必须在以上所有方法调用完之后才能调用

TitleView : 标题控件

TitleView解释备注
getDefaultTitleView(Context context)获取一个默认的TitleView传入一个Context
setTitleSize(int size)设置字体大小单位sp
setTitleColor(int color)设置字体颜色传入color必须ARGB8888的颜色类型,或者通过资源文件定义颜色再获取才有效
setViewBackground(int color)设置标题背景传入color必须ARGB8888的颜色类型,或者通过资源文件定义颜色再获取才有效
setPosition(Gravity gravity)设置标题在Banner的位置只能PARENT_TOP,PARENT_BOTTOM,PARENT_CENTER其中一个值
setTitleMargin(int left, int top, int right, int bottom)设置标题的margin值单位dp
setTitlePadding(int left, int top, int right, int bottom)设置标题的padding值单位dp

AdPageInfo:AdPlayView指定的数据源

AdPageInfo解释备注
AdPageInfo(String title, String picUrl, String clickUlr, int order)构造方法
void setTitle(String title)设置标题
String getTitle()获取标题
void setPicUrl(String picUrl)设置图片源地址
String getPicUrl()获取图片链接
void setClickUlr(String clickUlr)设置点击事件地址
String getClickUlr()获取点击事件链接
void setOrder(int order)设置排序的优先级设置了order,AdPlayBanner会根据order的大小由小到大排序
int getOrder()获取排序优先级

四、版本特性

v0.1

  1. 基本框架搭建完成;

V0.2

  1. 支持定义数据顺序;
  2. 无限循环轮播;
  3. 支持Fresco、Glide、Picasso三种图片加载方式;
  4. 支持多种ScaleType;
  5. 支持点型、数字型、空型页码指示器;支持修改数字型页码器的样式;
  6. 支持灵活性标题;支持修改标题的位置、字体大小、颜色、边距值等属性;
  7. 支持多样式切换动画;
  8. 支持设置自动轮播开关;
  9. 自定义自动滑动间隔时间;
  10. 提供点击事件监听器;
  11. 支持修改AdPlayBanner的背景颜色;

五、 Demo

如果大家在使用在仍然有问题,可以通过下载Demo来学习,当然,大家更可以通过查看源代码来学习如何自定义一个轮播控件。

六、后记

AdPlayBanner作为作者的第一个开源控件,作者也是非常用心认真地完成,这个过程也学习到很多东西,可能其中会遇到很多错误,所以希望大家可以多多包涵,然后把错误提到Issues里面,作者会在看到的第一时间进行修正。在后面的时间里,作者也会将更多的特性加到这个控件里面,所以希望大家可以加个star,以作为对作者的小小鼓励。 当然,如果你想第一时间联系到作者,不妨尝试以下联系方式:

© 著作权归作者所有

共有 人打赏支持
Ryane
粉丝 38
博文 22
码字总数 55318
作品 0
程序员
4.22、Bootstrap V4自学之路-----内容---轮播

示例 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="......

Asktao ⋅ 2016/03/25 ⋅ 0

20 个响应式 web 设计的必备 jQuery 插件

日期:2012-9-12 来源:GBin1.com 响应式设计(responsive design)在近些年是非常流行的web设计,能够帮助你有效的针对不同设备的显示屏幕自适应的显示内容,大大的提高了用户的使用体验和web...

gbin1 ⋅ 2012/09/12 ⋅ 4

30款jQuery常用网页焦点图banner图片切换 下载

1、jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2、jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3、jQuery图片层叠旋转类似洗牌翻转图片幻灯片 查看演示 ...

awbeci ⋅ 2013/09/18 ⋅ 0

ECJia 到家 v1.6.0 发布,一款新零售的开源电商系统

EC+(ecjia)到家是一款可开展新零售业务的移动电商系统。它包含:移动端APP,采用原生模式开发,覆盖使用iOS及Android系统的移 动终端;后台系统,针对平台日常运营维护的平台后台,针对入驻...

东方皓 ⋅ 2017/08/09 ⋅ 3

商品促销倒计时效果实现

效果图展示 这里写图片描述 所有的知识点总结如下: 轮播图实现:swiper插件 倒计时功能的实现 倒计时结束,抢购按钮变为可点击状态 轮播图的实现 swiper插件:开源,免费,强大的移动端触摸...

云焱 ⋅ 2017/12/03 ⋅ 0

wordpress服务器安装与响应式网站配置

一、通过使用Dokcer在linux上快速安装Wordpress 1.安装Docker及docker-compose 使用官方安装脚本安装 curl -sSL https://get.docker.com/ | sh 版本查询 docker –v 启动 Docker 引擎 system...

newthink ⋅ 2017/06/16 ⋅ 0

图片轮播--高效版

作为一个专业的前端(笑),图片轮播插件应该是一个很容易实现的功能插件 随着境界的提高,我们编写插件越来越注重它的效率。于是,鉴于工作的关系,我仿照了一下淘宝的插件设计,写了一款我...

临江若仙 ⋅ 2015/10/08 ⋅ 0

2013 年最好的 20 款免费 jQuery 插件

互联网上面有很多 jQuery 插件,这里我们收集的是 2013 年最好的 20 款免费 jQuery 插件,这些插件对设计者和开发者都有很大的帮助,希望大家能够喜欢:) 现今互联网市场上提供很多 jQuery...

oschina ⋅ 2014/01/11 ⋅ 24

一键式集成轮播组件--HYBLoopScrollView

HYBLoopScrollView,一行代码接入轮播组件,自带图片下载、缓存相关功能,无任何第三方依赖、轻量级组件。 特性: 特性1:无缝无限循环滚动 HYBLoopScrollView很好地解决了这个问题。这个库使...

匿名 ⋅ 2016/08/17 ⋅ 0

国产跨屏响应式前端框架--拼图 Pintuer

拼图前端框架介绍 拼图 Pintuer.com:国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系...

红薯 ⋅ 2014/07/09 ⋅ 37

没有更多内容

加载失败,请刷新页面

加载更多

下一页

在java中读取文件(也支持读取jar中的文件)

getClass().getResourceAsStream("文件名.格式"); 这个方法是用于获取当前类所在目录下的文件;需要将文件放到和当前类同一个包下面 比如我有个类在 com.test这个包下, 要读取一个test.jpg的图...

太黑_thj ⋅ 55分钟前 ⋅ 0

CentOS 7 源码编译安装 MySQL 5.7记录

没事瞎折腾,本来可以yum安装,却偏偏去要编译源码。 1. 安装依赖包 1). 安装cmake等依赖 # yum install cmake ncurses ncurses-devel bison bison-devel 2). 安装boost 1.59.0 # wget htt...

admin_qing ⋅ 57分钟前 ⋅ 0

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部