Banner 简单实现轮播图

今天发现一个好轮子，就是很简单就实现了轮播效果。使用超级简单、方便，效果也很好。Android广告图片轮播控件，支持无限循环和多种主题，可以灵活设置轮播样式、动画、轮播和切换时间、位置、图片加载框架等！首先，来看看效果图：

使用步骤

步骤 1，在 app/build.gradle 文件下添加依赖：

compile 'com.youth.banner:banner:1.4.9'  //暂时最新版本
compile 'com.github.bumptech.glide:glide:3.7.0'

步骤 2，在 AndroidManifest.xml 文件中添加网络权限：

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

步骤 3，在 main_activity.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"/>

步骤 4，在 Activity or Fragment 中配置 Banner

package com.gyq.shuffling;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.Toast;

import com.bumptech.glide.Glide;
import com.youth.banner.Banner;
import com.youth.banner.BannerConfig;
import com.youth.banner.listener.OnBannerListener;
import com.youth.banner.loader.ImageLoader;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private Banner banner;
    //设置图片资源:url或本地资源
    List images;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initData();
        banner = (Banner)findViewById(R.id.banner);

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

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

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

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

        //设置轮播图片间隔时间（不设置默认为2000）
        banner.setDelayTime(3000);
        //设置图片资源:可选图片网址/资源文件，默认用Glide加载,也可自定义图片的加载框架


        //自定义图片加载框架
        banner.setImageLoader(new ImageLoader() {
            @Override
            public void displayImage(Context context, Object path, ImageView imageView) {
                Glide.with(context).load(path).into(imageView);
            }
        });

        //设置图片集合
        banner.setImages(images);

        //设置点击事件，下标是从0开始
        banner.setOnBannerListener(new OnBannerListener() {
            @Override
            public void OnBannerClick(int position) {
                Toast.makeText(getApplicationContext(), "你点击了：" + position, Toast.LENGTH_LONG).show();
            }
        });

        banner.start();
    }

    private void initData() {
        images = new ArrayList<>();
        images.add("http://img.zcool.cn/community/0166c756e1427432f875520f7cc838.jpg");
        images.add("http://img.zcool.cn/community/018fdb56e1428632f875520f7b67cb.jpg");
        images.add("http://img.zcool.cn/community/01c8dc56e1428e6ac72531cbaa5f2c.jpg");
        images.add("http://img.zcool.cn/community/01fda356640b706ac725b2c8b99b08.jpg");
        images.add("http://img.zcool.cn/community/01fd2756e142716ac72531cbf8bbbf.jpg");
        images.add("http://img.zcool.cn/community/0114a856640b6d32f87545731c076a.jpg");
    }


}

步骤 5，（可选）增加体验

//如果你需要考虑更好的体验，可以这么操作
@Override
protected void onStart() {
    super.onStart();
    //开始轮播
    banner.startAutoPlay();
}

@Override
protected void onStop() {
    super.onStop();
    //结束轮播
    banner.stopAutoPlay();
}

这个轮子当然不止这些方法，文末我会贴出轮子的地址，你可以根据不同需求，去找相应的属性、方法和动画等。

Banner 轮播效果