XBanner是一个非常优秀的无限自动轮播框架,同时也是一个控件,XBanner的主要功能如下:
- 根据传入的数据条数自动调整广告页数
- 当图片数量大于一张时,可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮播
- 可以自定义指示器的位置:左下角、下侧中间、右下角
- 自定义指示点:正常状态和选中状态
- 监听Item的点击事件
- 支持设置图片轮播时间间隔
- 可以设置指示器的背景及其显示/隐藏
- 可以显示提示性文字并设置其颜色、大小
- 支持改变图片切换动画,框架中默认支持10中动画
- 可以设置图片切换动画的时长
XBanner的用法
一、首先导依赖,需要用到xbanner,还有加载网络图片的依赖,还有在清单文件里面写网络权限。
compile 'com.xhb:xbanner:1.2.2'
compile 'com.nineoldandroids:library:2.4.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'jp.wasabeef:glide-transformations:1.0.6'
二、创建布局。 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="300dp"
android:layout_height="400dp"
android:layout_gravity="center"
app:AutoPlayTime="3000"
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" />
<RadioButton
android:id="@+id/rb_rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rotate"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_cube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cube"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_flip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Flip"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_accordion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Accordion"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_zoomfade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ZoomFade"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_zoomcenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ZoomCenter"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_zoomstack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ZoomStack"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_depth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Depth"
android:textSize="16.0sp" />
<RadioButton
android:id="@+id/rb_stack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stack"
android:textSize="16.0sp" />
</RadioGroup>
</LinearLayout>
三、MainActivity.java
找控件
banner = (XBanner) findViewById(R.id.banner);
transforms = (RadioGroup) findViewById(R.id.transforms);
创建list集合添加图片地址跟图片描述
images = new ArrayList<>();
titles = new ArrayList<>();
images.add("http://img01.sogoucdn.com/app/a/100520024/f4d580ab0d9f5d514c9471b23bba0561");
titles.add("美女1美女1");
images.add("http://img03.sogoucdn.com/app/a/100520024/611aff966911ebb8f61df057f4822dd9");
titles.add("美女2");
images.add("http://img01.sogoucdn.com/app/a/100520024/2ac6c898d7d768e3aabd72b0fbb62e5a");
titles.add("美女3");
images.add("http://img01.sogoucdn.com/app/a/100520024/bc84efff94797560fd239a883712cf71");
titles.add("美女4");
给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的页面切换特效 Default默认的
banner.setPageTransformer(Transformer.Default);
// 设置XBanner页面切换的时间,即动画时长
banner.setPageChangeDuration(1000);
Default是默认的平滑效果,Transformer提供了好几种动画特效。供君选择
public enum Transformer {
Default,
Alpha,
Rotate,
Cube,
Flip,
Accordion,
ZoomFade,
ZoomCenter,
ZoomStack,
Stack,
Depth,
Zoom
}
也可以像我那样为了方便些一排RadioGroup动态的去改变特效
// RadioGroup中选中某个RadioButton时回调的方法
transforms.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_default:
banner.setPageTransformer(Transformer.Default);
break;
case R.id.rb_alpha:
banner.setPageTransformer(Transformer.Alpha);
break;
case R.id.rb_rotate:
banner.setPageTransformer(Transformer.Rotate);
break;
case R.id.rb_cube:
banner.setPageTransformer(Transformer.Cube);
break;
case R.id.rb_flip:
banner.setPageTransformer(Transformer.Flip);
break;
case R.id.rb_accordion:
banner.setPageTransformer(Transformer.Accordion);
break;
case R.id.rb_zoomfade:
banner.setPageTransformer(Transformer.ZoomFade);
break;
case R.id.rb_zoomcenter:
banner.setPageTransformer(Transformer.ZoomCenter);
break;
case R.id.rb_zoomstack:
banner.setPageTransformer(Transformer.ZoomStack);
break;
case R.id.rb_stack:
banner.setPageTransformer(Transformer.Stack);
break;
case R.id.rb_depth:
banner.setPageTransformer(Transformer.Depth);
break;
}
}
});
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();
}
});
还可以与Activity的生命周期关联起来使用,当Activity失去焦点的时候停止自动轮播,当Activity获得焦点的时候才开始自动轮播
//当Activity失去焦点时立即停止自动轮播;当Activity获得焦点时才开始自动轮播
@Override
protected void onResume() {
super.onResume();
banner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
banner.stopAutoPlay();
}
简单的用一下还是可以的
Demo地址