1.XBanner简介
XBanner是一个非常优秀的无限自动轮播框架,也是一个控件。
XBanner的主要功能如下:
1. 根据传入的数据条数自动调整广告页数
2. 当图片数量大于一张时,可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮 播 可以自定义指示器的位置:左下角、下侧中间、右下角
3. 自定义指示点:正常状态和选中状态
4. 监听Item的点击事件
5. 支持设置图片轮播时间间隔
6. 可以设置指示器的背景及其显示/隐藏
7. 可以显示提示性文字并设置其颜色、大小
8. 支持改变图片切换动画,框架中默认支持10中动画
9. 可以设置图片切换动画的时长
2.XBanner用法
导入依赖(使用XBanner框架之前,需要先导入其引用:在build.gradle文件中加入依赖)
compile 'com.xhb:xbanner:1.2.2'
compile 'com.nineoldandroids:library:2.4.0'
由于XBanner中有可能从网络加载图片,因此也需要导入一些图片加载框架的依赖,如Glide
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'jp.wasabeef:glide-transformations:1.0.6'
如果是从网络加载数据,还需要在Manifest文件中注册网络访问权限
<uses-permission android:name="android.permission.INTERNET" />
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 |
3.绑定数据
在Activity中通过XBanner控件在布局文件中的id属性找到控件,代码如下:
banner = (XBanner) findViewById(R.id.banner);
初始化XBanner中需要展示的数据,分为一个图片URL的集合和一个提示性文字的集合:
// 初始化XBanner中展示的数据 (自己向集合添加数据)
images = new ArrayList<>();
titles = new ArrayList<>();
XBanner绑定数据并适配:
// 为XBanner绑定数据
banner.setData(images, titles);
// XBanner适配数据
banner.setmAdapter(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, View view, int position) {
Glide.with(MainActivity.this).load(images.get(position)).into((ImageView) view);
}
});
设置XBanner默认的页面切换动画及动画时长:
// 设置XBanner的页面切换特效
banner.setPageTransformer(Transformer.Default);
// 设置XBanner页面切换的时间,即动画时长
banner.setPageChangeDuration(1000);
10种动画效果
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);
4、点击事件
当点击XBanner中的某一项时触发的事件:
// XBanner中某一项的点击事件
banner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, int position) {
Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "张图片", Toast.LENGTH_SHORT).show();
}
});
5、与Activity生命周期联动
@Override
protected void onResume() {
super.onResume();
banner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
banner.stopAutoPlay();
}