Android 图片轮播控件
MilMachado
8年前
<h2>Android图片轮播控件 (如果对你有帮助请star哦！)</h2> <p>现在的绝大数app都有banner界面，实现循环播放多个广告图片和手动滑动循环等功能。因为ViewPager并不支持循环翻页， 所以要实现循环还得需要自己去动手，所以其他的轮播控件大多都是重写viewpager，而且代码很臃肿。 我就把项目中的控件剔了出来，希望大家觉得有用。</p> <h2>效果图</h2> <table> <thead> <tr> <th>模式</th> <th>图片</th> </tr> </thead> <tbody> <tr> <td>指示器模式</td> <td><img src="https://simg.open-open.com/show/325b5a24431a0cae3a3b9eff9af89780.png"></td> </tr> <tr> <td>数字模式</td> <td><img src="https://simg.open-open.com/show/35e41dcb07e134d1adb0480a0860389d.png"></td> </tr> <tr> <td>数字加标题模式</td> <td><img src="https://simg.open-open.com/show/529440edb7cdbd660631ead80642d5d6.png"></td> </tr> <tr> <td>指示器加标题模式</td> <td><img src="https://simg.open-open.com/show/19a12156c416a1dec6d06ffee8f831bc.png"></td> </tr> </tbody> </table> <h3>联系方式</h3> <p><img src="https://simg.open-open.com/show/c193bcbed6206ff6a95cf6c121245e88.png"></p> <ul> <li>如果遇到问题和建议欢迎在给我发送邮件，希望让这个工程越来越完善。</li> </ul> <h2>Gradle</h2> <pre> <code class="language-java">dependencies{ compile 'com.youth.banner:banner:1.1.5' //指定版本 compile 'com.youth.banner:banner:+' //最新版本 }</code></pre> <p>或者引用本地lib</p> <pre> <code class="language-java">compile project(':banner')</code></pre> <h2>常量</h2> <table> <thead> <tr> <th>方法名</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>Banner.NOT_INDICATOR</td> <td>不显示指示器和标题</td> </tr> <tr> <td>Banner.CIRCLE_INDICATOR</td> <td>显示圆形指示器</td> </tr> <tr> <td>Banner.NUM_INDICATOR</td> <td>显示数字指示器</td> </tr> <tr> <td>Banner.NUM_INDICATOR_TITLE</td> <td>显示数字指示器和标题</td> </tr> <tr> <td>Banner.CIRCLE_INDICATOR_TITLE</td> <td>显示圆形指示器和标题</td> </tr> <tr> <td>Banner.LEFT</td> <td>指示器居左</td> </tr> <tr> <td>Banner.CENTER</td> <td>指示器居中</td> </tr> <tr> <td>Banner.RIGHT</td> <td>指示器居右</td> </tr> </tbody> </table> <h2>方法</h2> <table> <thead> <tr> <th>方法名</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>setBannerStyle(int bannerStyle)</td> <td>设置轮播样式（默认为Banner.NOT_INDICATOR）</td> </tr> <tr> <td>setIndicatorGravity(int type)</td> <td>设置轮播样式（没有标题默认为右边,有标题时默认左边）</td> </tr> <tr> <td>isAutoPlay(boolean isAutoPlay)</td> <td>设置是否自动轮播（默认自动）</td> </tr> <tr> <td>setBannerTitle(String[] titles)</td> <td>设置轮播要显示的标题和图片对应（如果不传默认不显示标题）</td> </tr> <tr> <td>setDelayTime(int time)</td> <td>设置轮播图片间隔时间（默认为2000）</td> </tr> <tr> <td>setImages(Object[]/List<?> imagesUrl)</td> <td>设置轮播图片(所有设置参数方法都放在此方法之前执行)</td> </tr> <tr> <td>setImages(Object[]/List<?> imagesUrl,OnLoadImageListener listener)</td> <td>设置轮播图片，并且自定义图片加载方式</td> </tr> <tr> <td>setOnBannerClickListener(this)</td> <td>设置点击事件，下标是从1开始</td> </tr> <tr> <td>setOnBannerImageListener(this)</td> <td>设置图片加载事件，可以自定义图片加载方式</td> </tr> </tbody> </table> <h2>使用步骤</h2> <p>1.在布局文件中添加Banner，可以设置自定义属性</p> <ul> <li>简单使用</li> </ul> <pre> <code class="language-java"><com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="高度自己设置" /></code></pre> <ul> <li>深度自定义</li> </ul> <pre> <code class="language-java"><com.youth.banner.Banner xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="高度自己设置" app:indicator_margin="指示器之间的间距" app:indicator_drawable_selected="指示器选中效果" app:indicator_drawable_unselected="指示器未选中效果" app:indicator_height="指示器圆形按钮的高度" app:indicator_width="指示器圆形按钮的宽度" /></code></pre> <p>2.在Activity或者Fragment中配置Banner</p> <pre> <code class="language-java">private Banner banner; String[] images= new String[] {"url"}; String[] titles=new String[]{"标题"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); banner = (Banner) findViewById(R.id.banner); /** * 需要什么设置，请看着文档在设置图片和标题前完成设置 */ //可以选择设置图片网址，或者资源文件，默认加载框架Glide //banner.setImages(images); //自定义图片加载框架 banner.setImages(images, new Banner.OnLoadImageListener() { @Override public void OnLoadImage(ImageView view, Object url) { Glide.with(getApplicationContext()).load(url).into(view); } }); } //如果你需要考虑更好的体验，可以这么操作 @Override protected void onStart() { super.onStart(); //在页面可见时开始轮播， //默认的是页面初始化时就开始轮播了，如果你不需要可以再onCreate方法里设置banner.isAutoPlay(false); banner.isAutoPlay(true); } @Override protected void onStop() { super.onStop(); //在页面不可见时停止轮播 banner.isAutoPlay(false); }</code></pre> <h2>更新说明</h2> <p>v1.1.5</p> <pre> <code class="language-java">感谢<imexception>朋友的反馈</code></pre> <ul> <li>创建指示器初始化时默认的背景的添加，减少延迟等待更新</li> <li>优化指示器背景更新操作</li> </ul> <p>v1.1.4</p> <pre> <code class="language-java">更新内容</code></pre> <ul> <li>增加setImages传参可以接收list集合</li> <li>优化在添加数据和创建指示器时的对象内存回收</li> </ul> <p>v1.1.3</p> <pre> <code class="language-java">修复了 <2316692710@qq.com> 朋友反馈的bug：</code></pre> <ul> <li>bug① 有标题的时候，向左滑动 ,会数组越界崩溃</li> <li>bug② 指示器为数字的时候，向左滑动时会有一次显示为0/5</li> </ul> <p>v1.1.2</p> <pre> <code class="language-java">感谢 <cssxn@qq.com> 朋友提的意见，做出了如下更改：</code></pre> <ul> <li>增加设置轮播图片，并且自定义图片加载方式:setImages(Object[] imagesUrl,OnLoadImageListener listener)</li> <li>增加设置图片加载事件，可以自定义图片加载方式:setOnBannerImageListener(this)</li> </ul> <p>v1.1.1</p> <pre> <code class="language-java">感谢 <969482412@qq.com> 朋友提的意见，做出了如下更改：</code></pre> <ul> <li>增加圆形指示器的位置方法setIndicatorGravity(int type)</li> <li>增加设置是否自动轮播的方法isAutoPlay(boolean isAutoPlay)</li> </ul> <p>v1.1.0</p> <pre> <code class="language-java">感谢 <997058003@qq.com> 朋友提的意见，做出了如下更改：</code></pre> <ul> <li>修改指示器样式</li> <li>增加5种轮播样式，更加灵活方便的运用轮播控件，满足项目需求</li> </ul> <p> </p> <p> </p>