一、XBanner简介
XBanner是一个非常优秀的无限自动轮播框架,也是一个控件。这里是XBanner的GitHub地址
XBanner的主要功能如下:
- 根据传入的数据条数自动调整广告页数
- 当图片数量大于一张时,可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮播
- 可以自定义指示器的位置:左下角、下侧中间、右下角
- 自定义指示点:正常状态和选中状态
- 监听Item的点击事件
- 支持设置图片轮播时间间隔
- 可以设置指示器的背景及其显示/隐藏
- 可以显示提示性文字并设置其颜色、大小
- 支持改变图片切换动画,框架中默认支持10中动画
- 可以设置图片切换动画的时长
二、XBanner用法
1、导入依赖
使用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" />
2、布局
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 |
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.stx.xhb.xbanner.XBanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200.0dip" app:AutoPlayTime="3000" app:pointNormal="@drawable/shape_pointer_normal" app:pointSelect="@drawable/shape_pointer_selected" app:pointsContainerBackground="#44AAAAAA" app:pointsPosition="RIGHT" app:tipTextColor="#FFFFFFFF" app:tipTextSize="16.0sp" /> <!-- 翻页动画单选按钮组 --> <RadioGroup android:id="@+id/transforms" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RadioButton android:id="@+id/rb_default" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" android:text="Default" android:textSize="16.0sp" /> <RadioButton android:id="@+id/rb_alpha" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Alpha" android:textSize="16.0sp"