模式 | 效果图 |
---|---|
指示器模式 | |
数字模式 | screenshot6.png |
数字加标题模式 | screenshot5.png |
指示器加标题模式 | |
标题模式 | |
一屏多个模式 |
1.添加 Gradle 依赖(两种方式二选一) 有时Jcenter出现版本更新不上去,会出现版本延后的问题,建议使用Jitpack方式
dependencies {
compile 'com.xhb:xbanner:latestVersion'//将latestVersion替换成上面 download 后面的版本号
}
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
implementation 'com.github.xiaohaibin:XBanner:latestVersion'//将latestVersion替换成上面 jitpack 后面的版本号
}
2.在清单文件中添加网络权限
3.在布局文件中添加 XBanner
4.在 Activity 或者 Fragment 中配置
初始化:直接传入视图集合进行初始化
//获取控件
XBanner mXBanner = (XBanner) findViewById(R.id.xbanner);
//添加轮播图片数据(图片数据不局限于网络图片、本地资源文件、View 都可以),刷新数据也是调用该方法
mXBanner.setBannerData(imgesUrl);//setData()方法已过时,推荐使用setBannerData()方法,具体参照 demo 使用
5.图片加载
可根据自己项目需要使用相应的图片加载工具进行加载图片,此处使用 Glide ,进行加载
//加载广告图片
mXBanner.loadImage(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, Object model, View view, int position) {
//1、此处使用的Glide加载图片,可自行替换自己项目中的图片加载框架
//2、返回的图片路径为Object类型,你只需要强转成你传输的类型就行,切记不要胡乱强转!
Glide.with(MainActivity.this).load(((AdvertiseEntity.OthersBean)
model).getThumbnail()).placeholder(R.drawable.default_image).error(R.drawable.default_image).into((ImageView) view);
}
});
6.监听广告 item 的单击事件
mXBanner.setOnItemClickListener(new XBanner.OnItemClickListener() {
@Override
public void onItemClick(XBanner banner, Object model,View view, int position) {
Toast.makeText(MainActivity.this, "点击了第"+position+"图片", Toast.LENGTH_SHORT).show();
}
});
7.为了更好的体验,建议添加以下代码
/** 为了更好的体验效果建议在下面两个生命周期中调用下面的方法 **/
@Override
protected void onResume() {
super.onResume();
mXBanner.startAutoPlay();
}
@Override
protected void onStop() {
super.onStop();
mXBanner.stopAutoPlay();
}
8.使用 Fresco 加载图片时,需要自定义布局文件
1.自定义布局文件 R.layout.image_fresco
2.使用 setData() 方法进行设置
mXBanner.setData(R.layout.image_fresco,“图片资源集合”,"提示文字集合,没有传null");
9.自定义布局
1.自定义自己需要展示的Banner显示布局,如:R.layout.customelayout
2.使用 setData() 方法进行设置
mXBanner.setData(R.layout.customelayout,“图片资源集合”,"提示文字集合,没有传null");
3.设置数据,通过 loadImage() 方法回传的 View 根据自定义布局设置的Id找到相应的控件进行数据设置,具体请看 CustomViewsActivity
mBanner.loadImage(new XBanner.XBannerAdapter() {
@Override
public void loadBanner(XBanner banner, Object model, View view, int position) {
TextView tvContent = (TextView) view.findViewById(R.id.tv);
tvContent.setText(String.valueOf(position + 1));
view.setBackgroundColor(Color.parseColor((String) model));
}
});
属性名 | 属性说明 | 属性值 | |
---|---|---|---|
isAutoPlay | 是否支持自动轮播 | boolean类型,默认为true | |
isTipsMarquee | 是否支持提示性文字跑马灯效果 | boolean类型,默认为false | |
AutoPlayTime | 图片轮播时间间隔 | int值,默认为5s | |
pointNormal | 指示器未选中时状态点 | drawable,不设置的话为默认状态点 | |
pointSelect | 指示器选中时状态点 | drawable,不设置的话为默认状态点 | |
pointsVisibility | 是否显示指示器 | boolean类型,默认为true | |
pointsPosition | 指示点显示位置 | LEFT、CENTER、RIGHT类型,默认为CENTER | |
pointsContainerBackground | 指示器背景 | 可自定义设置指示器背景 | |
pointContainerPosition | 指示器显示位置 | TOP、BOTTOM类型,默认为BOTTOM | |
pointContainerLeftRightPadding | 指示点容器左右内间距 | dimension,默认为10dp | |
pointTopBottomPadding | 指示点上下内间距 | dimension,默认为6dp | |
pointLeftRightPadding | 指示点左右内间距 | dimension,默认为3dp | |
tipTextColor | 提示文案的文字颜色 | reference | color,默认为white |
tipTextSize | 提示文案的文字大小 | dimension,默认为10dp | |
isShowTips | 是否展示提示文案 | boolean类型,默认为false 默认不展示 | |
isShowNumberIndicator | 是否显示数字指示器 | boolean,默认为false不显示 | |
numberIndicatorBacgroud | 数字指示器背景 | reference | |
isShowIndicatorOnlyOne | 当只有一张图片的时候是否显示指示点 | boolean,默认为false,不显示 | |
pageChangeDuration | 图片切换速度 | int值,默认为1000ms | |
isHandLoop | 是否支持手动无限循环切换图片 | boolean类型,默认为false | |
placeholderDrawable | 设置整体轮播框架占位图 | reference | |
isClipChildrenMode | 是否开启一屏显示多个模式 | boolean类型,默认为false 默认不开启 | |
clipChildrenLeftRightMargin | 一屏显示多个左右间距 | dimension ,默认为30dp | |
clipChildrenTopBottomMargin | 一屏显示多个上下间距 | dimension ,默认为30dp | |
viewpagerMargin | viewpager页面间距 | dimension ,默认为10dp | |
isClipChildrenModeLessThree | 少于三张是否支持一屏多显模式 | boolean类型,默认为false 默认不开启 |
##XBanner 图片轮播混淆配置
-keep class com.stx.xhb.xbanner.**{*;}
1.一屏显示多个模式默认使用ScalePageTransformer切换动画,也可以自定义;
2.一屏显示多个模式默认是会缩放左右两个页面,若想左右页面与中间页面保持一致,把切换动画设置成自己自定义的就可以;
3.图片不显示问题
1)确认是否实现了 loadImage() 方法,需要使用自己的图片加载框架加载图片!!!
2)请把加载图片地址复制到浏览器看看是否打开图片,确认图片地址是否正确!!!
4.自定义布局,ItemOnClck监听失效问题,在根布局加上以下两个属性,且子布局不要包含以下两个属性
android:clickable="true"
android:focusable="true"