Android 图片轮播控件

MilMachado 3年前
   <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>