轮子系列：一款能用易用好用的Android图片轮播轮子

前言

• Banner功能在Android开发中实在是太常见了，主要用于广告轮播、商品照片轮播等等，如下图：

• 今天我来手把手教你如何使用一个能用易用好用的Android图片轮播轮子。

---

目录

---

1. 实现轮播功能为什么要选择轮子？

主要原因是自己实现的话功能实现和性能优化会耗费太多工期，包括；

耗费原因1：功能实现

常见的Banner的功能主要有：

1. 实现图片 & 标语展示
2. 循环播放
3. 支持手动切换
4. 支持加载本地 & 网络图片

耗费原因2：性能优化

1. 对于实现图片展示：不止一张图片 & 指示器展示
2. 对于循环播放：自动、定时、无限 & 循环播放
3. 对于支持手动切换：滑动流畅 & 无卡顿
4. 对于支持加载本地 & 网络图片：加载速度 & 点击打开图片

好了你终于明白为什么要选择轮子了

2. 如何选择轮子？

选择标准：

1. 实现上述所有功能

   什么动画那些其实暂时我们并不需要，所以只需要能实现上述基本的功能就能满足现在市面上大多数的功能了。

2. 性能的优化

   上面说的一切一切，比如说轮播是用ViewPager实现，但会出现卡顿什么的blabla

3. 配置程度高

   可灵活设置图片数量、循环时间、图片加载的方式、指示器的样式&位置等等

4. 简洁易用
   千万别忘了我们为什么要用轮子！！！！！

按照上面的标准我们就可以开始去网上找轮子了。

好了不用去Google不用去Github不用去Bing找了（对不起我真的不建议你去百度），因为我已经帮你找了一个好轮子了：Android广告图片轮播控件

作者不是我，我也没收钱帮他打广告，因为这个轮子真的能用、易用和好用。

3. 使用步骤

步骤1. 加入依赖包
步骤2. 在需要展示的布局定义Banner布局
步骤3. 在MainActivity布局中定义配置Banner
步骤4. 在Manifest加入网络请求权限

4. Demo实战

没有Demo的代码讲解不是好文章，让我们来一步步学会使用这个好轮子

步骤1. 在gradle加入依赖包

compile 'com.youth.banner:banner:1.1.5'  //指定版本

步骤2. 在需要展示的布局定义Banner布局
main_layout.xml

<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="300dp" />

步骤3. 在MainActivity布局中定义配置Banner（具体请看注释）
MainActivity.java

package com.example.carson_ho.android_banner;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.youth.banner.Banner;

public class MainActivity extends AppCompatActivity {
    private Banner banner;
    //设置图片资源:url或本地资源
    String[] images= new String[] {
            "http://218.192.170.132/BS80.jpg",
            "http://img.zcool.cn/community/0166c756e1427432f875520f7cc838.jpg",
            "http://img.zcool.cn/community/018fdb56e1428632f875520f7b67cb.jpg",
            "http://img.zcool.cn/community/01c8dc56e1428e6ac72531cbaa5f2c.jpg",
            "http://img.zcool.cn/community/01fda356640b706ac725b2c8b99b08.jpg",
            "http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg",
            "http://img.zcool.cn/community/0114a856640b6d32f87545731c076a.jpg"};

    //设置图片标题:自动对应
    String[] titles=new String[]{"十大星级品牌联盟，全场2折起","全场2折起","十大星级品牌联盟","嗨购5折不要停","12趁现在","嗨购5折不要停，12.12趁现在","实打实大顶顶顶顶"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    
        
        banner = (Banner) findViewById(R.id.banner);

        //设置样式,默认为:Banner.NOT_INDICATOR(不显示指示器和标题)
        //可选样式如下:
        //1. Banner.CIRCLE_INDICATOR	显示圆形指示器
        //2. Banner.NUM_INDICATOR	显示数字指示器
        //3. Banner.NUM_INDICATOR_TITLE	显示数字指示器和标题
        //4. Banner.CIRCLE_INDICATOR_TITLE	显示圆形指示器和标题
        banner.setBannerStyle(Banner.CIRCLE_INDICATOR_TITLE);

        //设置轮播样式（没有标题默认为右边,有标题时默认左边）
        //可选样式:
        //Banner.LEFT	指示器居左
        //Banner.CENTER	指示器居中
        //Banner.RIGHT	指示器居右
        banner.setIndicatorGravity(Banner.CENTER);

        //设置轮播要显示的标题和图片对应（如果不传默认不显示标题）
        banner.setBannerTitle(titles);

        //设置是否自动轮播（不设置则默认自动）
        banner.isAutoPlay(true)	;

        //设置轮播图片间隔时间（不设置默认为2000）
        banner.setDelayTime(5000);
        //设置图片资源:可选图片网址/资源文件，默认用Glide加载,也可自定义图片的加载框架
        //所有设置参数方法都放在此方法之前执行
        //banner.setImages(images);

        //自定义图片加载框架
        banner.setImages(images, new Banner.OnLoadImageListener() {
            @Override
            public void OnLoadImage(ImageView view, Object url) {
                System.out.println("加载中");
                Glide.with(getApplicationContext()).load(url).into(view);
                System.out.println("加载完");
            }
        });
        //设置点击事件，下标是从1开始
        banner.setOnBannerClickListener(new Banner.OnBannerClickListener() {//设置点击事件
            @Override
            public void OnBannerClick(View view, int position) {
                Toast.makeText(getApplicationContext(), "你点击了：" + position, Toast.LENGTH_LONG).show();
            }
        });

步骤4：在Manifest.xml加入网络请求权限

AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

效果图

源代码

请移步Carson_Ho的Github-Android_Banner

5. 总结

本文主要对Android轮播的好轮子进行了全面介绍，接下来我会继续讲解其他安卓开发的知识，有兴趣可以继续关注Carson_Ho的安卓开发笔记！！！！

---

欢迎关注Carson_Ho的简书！

不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。