Banner轮播

组件介绍

这个组件用于android项目中，实现图片轮播的效果，并有对应的指示器。

动态图

banner.gif

使用场景

这个组件可以用于轮播，也可以用于其他的页面切换。轮播功能也可以关闭，并不只是能加载图片，也可以加载其他的控件或布局，如Fragment、混合布局等。下面的指示器也可以自定义使用。

如何使用

第一步：xml布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/framelayout"
    android:layout_width="fill_parent"
    android:layout_height="150dp"
    android:orientation="vertical">
    <com.qr.item.widget.banner.viewflow.ViewFlow
        android:id="@+id/mainhome_fragment_viewflow"
        android:layout_width="match_parent"
        android:layout_height="150dp"/>
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#00000000"
        android:gravity="center"
        android:padding="3dip">
        <com.qr.item.widget.banner.viewflow.CircleFlowIndicator
            android:id="@+id/mainhome_fragment_viewflowindic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:layout_marginBottom="2dp"
            android:paddingLeft="3dp"
            android:paddingTop="2dp"
            android:visibility="gone"
            app:activeColor="#ffffff"
            app:activeType="fill"
            app:circleSeparation="20dp"
            app:inactiveColor="#55ffffff"
            app:inactiveType="fill"
            app:radius="4dp"/>
    </FrameLayout>
    <ImageView
        android:id="@+id/bannerImg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />
</FrameLayout>

第二步：初始化控件

mViewFlow = (ViewFlow) findViewById(R.id.mainhome_fragment_viewflow);
mFlowIndicator = (CircleFlowIndicator) findViewById(R.id.mainhome_fragment_viewflowindic);

第三步：加载数据源

private ArrayList<String> imageUrlList = new ArrayList<String>();// Banner的图片
private ArrayList<String> linkUrlArray = new ArrayList<String>();// Banner所对应的连接
private ArrayList<String> titlelist = new ArrayList<String>();// Banner所对应的标题

第四步：设置适配器

private BannerAdapter setInfiniteLoop;
setInfiniteLoop = new BannerAdapter(this, R.mipmap.banner,imageUrlList, linkUrlArray, titlelist).setInfiniteLoop(true);
setInfiniteLoop.setOnShowBannerListener(new WidgetInterface.OnShowBannerListener() {
            @Override
            public void show(int position, ImageView imageView, String imgUrl) {
                Glide.with(BannerActivity.this).load(imgUrl).placeholder(R.mipmap.banner).error(R.mipmap.banner).into(imageView);
            }
        });

第五步：功能配置

mViewFlow.setAdapter(setInfiniteLoop);
mViewFlow.setmSideBuffer(imageUrlList.size()); // 实际图片张数，
mViewFlow.setFlowIndicator(mFlowIndicator);
mViewFlow.setTimeSpan(3000);
mViewFlow.setSelection(imageUrlList.size() * 1000); // 设置初始位置
mViewFlow.startAutoFlowTimer(); // 启动自动播放
mViewFlow.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
          public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            }
        });```

###注意事项
>第三步中setOnShowBannerListener必须紧接着new BannerAdapter()设置，setOnShowBannerListener为图片设置回调方法。

###版本控制
| 版本号  |  更新内容 | 修改人  | 修改时间 | 
| :-------  | :-------: | :-------: |  -------: | 
|       1.0 |初次发布     | lucky_bear       |  2017/7/6    | 

###项目地址
| 所在文件夹 |  demo位置|
| :-------  | :-------: |
|       widget.Banner |com.qr.demo.widget.BannerActivity|