Xbanner

最新推荐文章于 2022-08-11 14:41:58 发布
最新推荐文章于 2022-08-11 14:41:58 发布
阅读量3.1k 收藏
点赞数

一、XBanner简介

        XBanner是一个非常优秀的无限自动轮播框架，也是一个控件。这里是XBanner的GitHub地址

        XBanner的主要功能如下：

  • 根据传入的数据条数自动调整广告页数
  • 当图片数量大于一张时，可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮播
  • 可以自定义指示器的位置：左下角、下侧中间、右下角
  • 自定义指示点：正常状态和选中状态
  • 监听Item的点击事件
  • 支持设置图片轮播时间间隔
  • 可以设置指示器的背景及其显示/隐藏
  • 可以显示提示性文字并设置其颜色、大小
  • 支持改变图片切换动画，框架中默认支持10中动画
  • 可以设置图片切换动画的时长

二、XBanner用法

1、导入依赖

        使用XBanner框架之前，需要先导入其引用：在build.gradle文件中加入依赖，代码如下：

[html]  view plain  copy
  1. compile 'com.xhb:xbanner:1.2.2'  
  2. compile 'com.nineoldandroids:library:2.4.0'  
        由于XBanner中有可能从网络加载图片，因此也需要导入一些图片加载框架的依赖，如Glide，代码如下：

[html]  view plain  copy
  1. compile 'com.github.bumptech.glide:glide:3.7.0'  
  2. compile 'jp.wasabeef:glide-transformations:1.0.6'  

        如果是从网络加载数据，还需要在Manifest文件中注册网络访问权限，代码如下：

[html]  view plain  copy
  1. <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

        本DEMO中布局文件中的代码如下：

[html]  view plain  copy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  3.     android:id="@+id/activity_main"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical">  
  7.   
  8.     <com.stx.xhb.xbanner.XBanner  
  9.         android:id="@+id/banner"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="200.0dip"  
  12.         app:AutoPlayTime="3000"  
  13.         app:pointNormal="@drawable/shape_pointer_normal"  
  14.         app:pointSelect="@drawable/shape_pointer_selected"  
  15.         app:pointsContainerBackground="#44AAAAAA"  
  16.         app:pointsPosition="RIGHT"  
  17.         app:tipTextColor="#FFFFFFFF"  
  18.         app:tipTextSize="16.0sp" />  
  19.   
  20.     <!-- 翻页动画单选按钮组 -->  
  21.     <RadioGroup  
  22.         android:id="@+id/transforms"  
  23.         android:layout_width="match_parent"  
  24.         android:layout_height="wrap_content"  
  25.         android:orientation="vertical">  
  26.   
  27.         <RadioButton  
  28.             android:id="@+id/rb_default"  
  29.             android:layout_width="wrap_content"  
  30.             android:layout_height="wrap_content"  
  31.             android:checked="true"  
  32.             android:text="Default"  
  33.             android:textSize="16.0sp" />  
  34.   
  35.         <RadioButton  
  36.             android:id="@+id/rb_alpha"  
  37.             android:layout_width="wrap_content"  
  38.             android:layout_height="wrap_content"  
  39.             android:text="Alpha"  
  40.             android:textSize="16.0sp" />  
  41.   
  42.         <RadioButton  
  43.             android:id="@+id/rb_rotate"  
  44.             android:layout_width="wrap_content"  
  45.             android:layout_height="wrap_content"  
  46.             android:text="Rotate"  
  47.             android:textSize="16.0sp" />  
  48.   
  49.         <RadioButton  
  50.             android:id="@+id/rb_cube"  
  51.             android:layout_width="wrap_content"  
  52.             android:layout_height="wrap_content"  
  53.             android:text="Cube"  
  54.             android:textSize="16.0sp" />  
  55.   
  56.         <RadioButton  
  57.             android:id="@+id/rb_flip"  
  58.             android:layout_width="wrap_content"  
  59.             android:layout_height="wrap_content"  
  60.             android:text="Flip"  
  61.             android:textSize="16.0sp" />  
  62.   
  63.         <RadioButton  
  64.             android:id="@+id/rb_accordion"  
  65.             android:layout_width="wrap_content"  
  66.             android:layout_height="wrap_content"  
  67.             android:text="Accordion"  
  68.             android:textSize="16.0sp" />  
  69.   
  70.         <RadioButton  
  71.             android:id="@+id/rb_zoomfade"  
  72.             android:layout_width="wrap_content"  
  73.             android:layout_height="wrap_content"  
  74.             android:text="ZoomFade"  
  75.             android:textSize="16.0sp" />  
  76.   
  77.         <RadioButton  
  78.             android:id="@+id/rb_zoomcenter"  
  79.             android:layout_width="wrap_content"  
  80.             android:layout_height="wrap_content"  
  81.             android:text="ZoomCenter"  
  82.             android:textSize="16.0sp" />  
  83.   
  84.         <RadioButton  
  85.             android:id="@+id/rb_zoomstack"  
  86.             android:layout_width="wrap_content"  
  87.             android:layout_height="wrap_content"  
  88.             android:text="ZoomStack"  
  89.             android:textSize="16.0sp" />  
  90.   
  91.         <RadioButton  
  92.             android:id="@+id/rb_depth"  
  93.             android:layout_width="wrap_content"  
  94.             android:layout_height="wrap_content"  
  95.             android:text="Depth"  
  96.             android:textSize="16.0sp" />  
  97.   
  98.         <RadioButton  
  99.             android:id="@+id/rb_stack"  
  100.             android:layout_width="wrap_content"  
  101.             android:layout_height="wrap_content"  
  102.             android:text="Stack"  
  103.             android:textSize="16.0sp" />  
  104.     </RadioGroup>  
  105. </LinearLayout>  

3、绑定数据

        在Activity中通过XBanner控件在布局文件中的id属性找到控件，代码如下：

[java]  view plain  copy
  1. banner = (XBanner) findViewById(R.id.banner);  
        初始化XBanner中需要展示的数据，分为一个图片URL的集合和一个提示性文字的集合：

[java]  view plain  copy
  1. // 初始化XBanner中展示的数据  
  2. images = new ArrayList<>();  
  3. titles = new ArrayList<>();  
  4. images.add("http://img3.fengniao.com/forum/attachpics/913/114/36502745.jpg");  
  5. titles.add("这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片这是第1张图片");  
  6. images.add("http://imageprocess.yitos.net/images/public/20160910/99381473502384338.jpg");  
  7. titles.add("这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片这是第2张图片");  
  8. images.add("http://imageprocess.yitos.net/images/public/20160910/77991473496077677.jpg");  
  9. titles.add("这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片这是第3张图片");  
  10. images.add("http://imageprocess.yitos.net/images/public/20160906/1291473163104906.jpg");  
  11. titles.add("这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片这是第4张图片");  
        XBanner绑定数据并适配：

[java]  view plain  copy
  1. // 为XBanner绑定数据  
  2. banner.setData(images, titles);  
  3. // XBanner适配数据  
  4. banner.setmAdapter(new XBanner.XBannerAdapter() {  
  5.     @Override  
  6.     public void loadBanner(XBanner banner, View view, int position) {  
  7.         Glide.with(MainActivity.this).load(images.get(position)).into((ImageView) view);  
  8.     }  
  9. });  
        设置XBanner默认的页面切换动画及动画时长：

[java]  view plain  copy
  1. // 设置XBanner的页面切换特效  
  2. banner.setPageTransformer(Transformer.Default);  
  3. // 设置XBanner页面切换的时间，即动画时长  
  4. banner.setPageChangeDuration(1000);  
        当选中RadioGroup中的某个RadioButton时，切换XBanner的页面切换动画：

[java]  view plain  copy
  1. // RadioGroup中选中某个RadioButton时回调的方法  
  2. transforms.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {  
  3.     @Override  
  4.     public void onCheckedChanged(RadioGroup group, int checkedId) {  
  5.         switch (checkedId) {  
  6.             case R.id.rb_default:  
  7.                 banner.setPageTransformer(Transformer.Default);  
  8.                 break;  
  9.             case R.id.rb_alpha:  
  10.                 banner.setPageTransformer(Transformer.Alpha);  
  11.                 break;  
  12.             case R.id.rb_rotate:  
  13.                 banner.setPageTransformer(Transformer.Rotate);  
  14.                 break;  
  15.             case R.id.rb_cube:  
  16.                 banner.setPageTransformer(Transformer.Cube);  
  17.                 break;  
  18.             case R.id.rb_flip:  
  19.                 banner.setPageTransformer(Transformer.Flip);  
  20.                 break;  
  21.             case R.id.rb_accordion:  
  22.                 banner.setPageTransformer(Transformer.Accordion);  
  23.                 break;  
  24.             case R.id.rb_zoomfade:  
  25.                 banner.setPageTransformer(Transformer.ZoomFade);  
  26.                 break;  
  27.             case R.id.rb_zoomcenter:  
  28.                 banner.setPageTransformer(Transformer.ZoomCenter);  
  29.                 break;  
  30.             case R.id.rb_zoomstack:  
  31.                 banner.setPageTransformer(Transformer.ZoomStack);  
  32.                 break;  
  33.             case R.id.rb_stack:  
  34.                 banner.setPageTransformer(Transformer.Stack);  
  35.                 break;  
  36.             case R.id.rb_depth:  
  37.                 banner.setPageTransformer(Transformer.Depth);  
  38.                 break;  
  39.         }  
  40.     }  
  41. });  

4、点击事件

        当点击XBanner中的某一项时触发的事件：

[java]  view plain  copy
  1. // XBanner中某一项的点击事件  
  2. banner.setOnItemClickListener(new XBanner.OnItemClickListener() {  
  3.     @Override  
  4.     public void onItemClick(XBanner banner, int position) {  
  5.         Toast.makeText(MainActivity.this, "点击了第" + (position + 1) + "张图片", Toast.LENGTH_SHORT).show();  
  6.     }  
  7. });  

5、点击按钮跳到某一张图片

        获取viewpager然后调用viewpager的方法来切换图片

       banner.getViewPager.setCurrentItem(i);

6、与Activity生命周期联动

        当Activity失去焦点时立即停止自动轮播；当Activity获得焦点时才开始自动轮播。代码如下：

[java]  view plain  copy
  1. @Override  
  2. protected void onResume() {  
  3.     super.onResume();  
  4.     banner.startAutoPlay();  
  5. }  
  6.   
  7. @Override  
  8. protected void onStop() {  
  9.     super.onStop();  
  10.     banner.stopAutoPlay();  
  11. }  



        转载于：http://blog.youkuaiyun.com/itgungnir/article/details/53175436



逆流成河_
关注
自带小点轮播之XBanner
chilijie0120的博客
03-31 1187
一、XBanner简介         XBanner是一个非常优秀的无限自动轮播框架，也是一个控件。这里是XBanner的GitHub地址         XBanner的主要功能如下： 根据传入的数据条数自动调整广告页数当图片数量大于一张时，可以无限循环自动播放、手指按下停止轮播、抬起手指继续轮播可以自定义指示器的位置：左下角、下侧中间、右下角自定义指示点：正常状态和
XBanner(Demol类型的jar包)
10-16
可以实现一页多显示，这个是从github上下载的，听好用的
XBanner
未来很长，但我会努力的走下去。
09-14 1832
XBanner
卡片式轮播图（XBanner）
10-10
在本案例中，我们关注的是"卡片式轮播图"，也称为XBanner，它通常以一种优雅的方式展示内容，每一页内容如同卡片一般可以翻动。这种设计风格在移动应用中广泛使用，特别是在电商、新闻、社交等应用中，用于展示商品...
XBanner：【图片轮播】支持图片无限轮播，支持AndroidX，自定义指示点，显示提示文字，切换动画，自定义布局，一屏显示多个等功能
02-01
XBanner 主要功能： 支持一屏显示多个 支持根据服务端返回的数据动态设置广告条的总页数 支持大于等于1页时的无限循环自动轮播，手指点击暂停轮播，抬起手指开始轮播 支持自定义状态指示点位置左，中，右 支持自定义...
XBanner-master.zip
05-13
《XBanner：打造极致轮播图体验》 在移动应用开发中，轮播图是一种常见的UI元素，用于展示多张图片或信息，如广告、推荐内容等。它能有效地利用有限的屏幕空间，吸引用户的注意力。本文将深入探讨XBanner项目，这是...
XBanner,功.zip
10-13
《XBanner开源项目详解》 在当今的移动应用开发中，广告展示是常见的盈利模式之一，而轮播图（Banner）则是广告展示的一种常见形式。本文将深入探讨名为“XBanner”的开源项目，该项目专注于提供高效、易用且功能...
Android代码-XBanner
08-06
XBanner 主要功能： 支持一屏显示多个 支持根据服务端返回的数据动态设置广告条的总页数 支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播 支持自定义状态指示点位置 左 、中 、右 ...
xbanner
GUODONG7的博客
09-29 417
private XBanner mBanner; private List imgesUrl; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); m
XBanner使用保姆级教学（AndroidX环境下）
张子羽的安卓bug开发日记
08-11 4693
最近在练习使用Kotlin，调用了玩安卓的API，其中一个功能是实现首页的banner效果，开始我准备使用了Banner来完成，但不知道什么情况，我的Banner一直导入不成功，在查找资料的过程中发现了XBanner这一开源项目，研究后发现效果很不错，下面是使用的过程。...
Android_xbanner的使用方法
kybkq1314的博客
01-02 845
基本使用： 1.添加Gradle依赖 dependencies { compile 'com.xhb:xbanner:1.1.2' } 2.在清单文件中添加网络权限 &lt;uses-permission android:name="android.permission.INTERNET" /&gt; 3.在布局文件中添加XBanner &lt;com.stx.xhb.xba...
android 第三方banner,Android 轮播控件第三方(XBanner)使用
weixin_36391252的博客
05-26 832
现在都知道Android界大部分应用都少不了一样东西，那就是轮播图，对于轮播图大家也不陌生，就是一个图片翻到另一个图片中间可以设置轮播的时间，还可以设置轮播图的点击。以前我做轮播图是使用ViewPage做轮播，但现在发现这个XBanner以后发现这个轮播图第三方非常简单，而又容易懂，代码也非常少。好了接下在进入正题。1.既然是第三方那肯定会有第三方依赖：implementation 'com.gi...
安卓Xbanner
最新发布
05-14
<think>好的，我现在需要帮助用户找到关于Android XBanner的使用教程或示例代码。首先，我得回忆一下用户提到的引用内容。引用1提到了使用ViewPager实现轮播图，引用3提到了折叠Banner的实现，这可能和XBanner相关，但不确定。用户现在明确询问XBanner的使用方法，可能需要具体的集成步骤和代码示例。 首先，我应该确认XBanner是什么。XBanner可能是一个第三方库，用于Android上的轮播图效果，可能比原生的ViewPager更强大或者有更多功能。用户可能已经知道这个库，但需要指导如何集成和使用。 接下来，我需要检查用户提供的引用内容是否有相关信息。引用1中的代码是使用ViewPager的基本示例，引用3提到折叠Banner的原理，但都没有直接提到XBanner。不过，用户的问题是关于XBanner的，所以可能需要依赖这些引用中的部分信息，比如项目依赖和布局设置，但主要需要查找XBanner的官方文档或常见用法。 由于用户需要教程或示例代码，我应该按照一般第三方库的集成步骤来回答：添加依赖、布局文件、初始化配置、设置适配器、处理逻辑等。可能还需要注意一些常见问题，比如图片加载库的配合使用，或者点击事件的处理。 另外，用户可能遇到的困难包括如何集成库、如何自定义样式、如何处理自动轮播等。需要确保步骤清晰，代码示例正确，并且符合最新的Android开发实践，比如使用ViewBinding或Kotlin如果适用的话，但用户的问题没有指定语言，所以默认使用Java和XML可能更稳妥。 还需要验证XBanner的最新版本，确保依赖语句正确。例如，在build.gradle中添加implementation 'com.github.xiaohaibin:XBanner:版本号'。可能还需要添加仓库地址，比如jcenter或mavenCentral，或者jitpack，如果库托管在那里的话。 在布局文件中，用户需要添加XBanner的自定义视图，可能需要指定宽高和一些属性。然后在Activity或Fragment中初始化，设置数据源，可能用适配器或者直接设置图片URL。还要处理自动轮播的开关、指示器的样式、图片加载方式（可能需要Glide或Picasso）。 最后，可能需要处理生命周期，比如在onResume中开始轮播，onPause中停止，以节省资源。同时，考虑点击事件的处理，用户点击某张图片后的跳转逻辑。 检查是否有常见的错误，比如依赖冲突、版本不兼容、图片加载库未初始化等。如果有，应该在注意事项里提到。比如，如果使用Glide，需要确保已经正确初始化和配置。 总结回答结构：分步骤说明集成XBanner的过程，每个步骤给出代码示例，包括XML和Java/Kotlin代码，注意事项，以及可能的相关问题。</think>以下是Android XBanner集成使用的详细教程（基于常见实现方式整理）： ### 一、添加项目依赖 在app模块的build.gradle中添加： ```groovy dependencies { implementation 'com.github.xiaohaibin:XBanner:2.0.5' // 检查最新版本 implementation 'com.github.bumptech.glide:glide:4.12.0' // 图片加载库 } ``` ### 二、布局文件配置 ```xml <com.stx.xhb.androidx.XBanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="200dp" app:isAutoPlay="true" app:indicatorGravity="right" app:indicatorMargin="10dp" app:indicatorNormalColor="#88ffffff" app:indicatorSelectedColor="#ff0000"/> ``` ### 三、Java代码实现 ```java // 初始化 XBanner banner = findViewById(R.id.banner); // 设置数据源 List<String> imageUrls = Arrays.asList( "https://img.zcool.cn/community/01.jpg", "https://img.zcool.cn/community/02.jpg" ); // 绑定数据 banner.setBannerData(R.layout.banner_item, imageUrls); banner.loadImage(new XBanner.XBannerAdapter() { @Override public void loadBanner(XBanner banner, Object model, View view, int position) { ImageView imageView = view.findViewById(R.id.iv_image); Glide.with(MainActivity.this) .load((String)model) .into(imageView); } }); // 生命周期控制 @Override protected void onResume() { super.onResume(); banner.startAutoPlay(); } @Override protected void onPause() { super.onPause(); banner.stopAutoPlay(); } ``` ### 四、自定义轮播项布局 新建banner_item.xml： ```xml <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/iv_image" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop"/> </FrameLayout> ``` ### 五、高级配置（可选） ```java // 设置切换间隔 banner.setPageChangeDuration(1000); // 设置指示器样式 banner.setmIndicatorRadius(5); // 设置页面切换动画 banner.setPageTransformer(new DepthPageTransformer()); // 设置点击事件 banner.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(); } }); ``` [^1][^3]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值