组件介绍
这个组件用于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|