Banner 轮播图之简单使用

一：Banner库简介

项目地址：https://github.com/youth5201314/banner。该库是基于RecyclerView和ViewPager来实现的。在之前要实现轮播图需要先自定义一简单RecyclerView，然后使用Timer来转动其坐标位置，对初学者而言十分不友好。由于官网上讲的详细，所以本文是本着“最通俗、最易懂、最简单”而来。

二：使用方法

由于该库是基于RecyclerView的，也就是说只要有RecyclerView的基础，上手该库没有任何难度且快速。

1：添加依赖

implementation 'com.youth.banner:banner:2.1.0'

2：定义布局（Banner和其子项布局）

Banner布局：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.youth.banner.Banner
            android:id="@+id/banner"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            app:banner_radius="15dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            app:banner_loop_time="2000" />

    </LinearLayout>

说明：
banner_radius用来设置其图片圆角的半径，单位dp
banner_loop_time用来设置其每张图片展示的事件，单位毫秒

子项布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/image_view_item"/>

</LinearLayout>

说明：这里的ImageView的width与height大小必须为match_parent

3：创建Bean

public class ImageBean {
    private int imageViewID;

    public ImageBean(int imageViewID){
        this.imageViewID = imageViewID;
    }

    public void setImageViewID(int imageViewID) {
        this.imageViewID = imageViewID;
    }

    public int getImageViewID() {
        return imageViewID;
    }
}

说明：这里展示的话只展示图片信息，所以只有imageViewID这个属性

4：创建适配器

这里的适配器与 RecyclerView的适配器并无二意，不在赘述。

public class ImageAdapter extends BannerAdapter<ImageBean, ImageAdapter.ImageHolder> {
    Context context;

    @Override
    public ImageHolder onCreateHolder(ViewGroup parent, int viewType) {
        return new ImageHolder(LayoutInflater.from(context).inflate(R.layout.banner_item, parent, false));
    }

    @Override
    public void onBindView(ImageHolder holder, ImageBean data, int position, int size) {
        holder.imageView.setImageResource(data.getImageViewID());
        holder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context,"Test", Toast.LENGTH_SHORT).show();
            }
        });
    }

    public class ImageHolder extends RecyclerView.ViewHolder{
        ImageView imageView;
        public ImageHolder(@NonNull View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.image_view_item);
        }

    }

    public ImageAdapter(Context context, List<ImageBean> mList) {
        super(mList);
        this.context = context;
    }


}

5：在活动中使用

public class MainActivity extends AppCompatActivity {
    private Banner mBanner;
    private List<ImageBean> mList = new ArrayList<>();

    private void initView(){
        mBanner = (Banner) findViewById(R.id.banner);
        mBanner.setAdapter(new ImageAdapter(MainActivity.this, mList));
        
        // Set Banner is auto to loop.
        mBanner.isAutoLoop(true);
        
        // Set an indicator for Banner.
        mBanner.setIndicator(new CircleIndicator(this));
        mBanner.start();
    }

    private void initData(){
        mList.add(new ImageBean(R.drawable.a));
        mList.add(new ImageBean(R.drawable.b));
        mList.add(new ImageBean(R.drawable.c));
        mList.add(new ImageBean(R.drawable.d));
        mList.add(new ImageBean(R.drawable.e));
    }

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

        initData();

        initView();

    }

}

6：如果仅仅是展示图片而不附加任何信息，可以直接调用系统提供的Adapter。

public class MainActivity extends AppCompatActivity {
    private Banner mBanner;
    private List<Integer> mList = new ArrayList<>();

    private void initView(){
        mBanner = (Banner) findViewById(R.id.banner);
        Banner banner = mBanner.setAdapter(new BannerImageAdapter<Integer>(mList) {
            @Override
            public void onBindView(BannerImageHolder holder, Integer data, int position, int size) {
                holder.imageView.setImageResource(data);
            }

        });
        mBanner.isAutoLoop(true);
        mBanner.setIndicator(new CircleIndicator(this));
        mBanner.start();
    }

    private void initData(){
        mList.add(R.drawable.a);
        mList.add(R.drawable.b);
        mList.add(R.drawable.c);
        mList.add(R.drawable.d);
        mList.add(R.drawable.e);
    }

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

        initData();

        initView();

    }

}

三：效果图

可以看到图片中央下部有Indicator，重影的原因是从某宝首页直接截屏把Indicator也截了下来。

四：基本属性

方法很多，这里只例举其常用的。

方法	作用
getRealCount()	返回banner真实总数
setUserInputEnabled(boolean)	禁止手动滑动Banner;true 允许，false 禁止
sAutoLoop(boolean)	是否允许自动轮播
setDelayTime(long)	设置轮播间隔时间（默认3000毫秒）
setScrollTime(long)	置轮播滑动的时间（默认800毫秒）
start()	开始轮播
stop()	停止轮播(主要配合生命周期使用)，或者你需要手动暂停
setOnBannerListener(this)	设置点击事件，下标是从0开始

另外需要补充说明的是，Banner也可以在生命周期回调方法里面设置其周期，例如暂停，开启等。如下所示：

   @Override
    protected void onStart() {
        super.onStart();
        banner.start();
    }
    
    @Override
    protected void onStop() {
        super.onStop();
        banner.stop();
    }
    
    @Override
    protected void onDestroy() {
        super.onDestroy();
        banner.destroy();
    }

附：Demo
demo地址 github