图片轮播(BannerView)

项目GitHub下载地址:https://github.com/CNCFOX/BannerDemo

效果

使用方法

具体代码实现就不进行说明了，如果感兴趣可以看看，代码写的不是很好。如果什么地方写的不好，希望能够指出来，大家一起进步。

到github 上下载工程，将名 bannerlibrary 的依赖包依赖到项目中。

获取BannerView 自定义View

两种获取BannerView 方式

1. 第一种:

BannerView view = new BannerView(this);

注： 使用这种方式，创建 BannerView 记得在 BannerConfig（BannerConfig 会在后面进行详细介绍） 中对BannerView 进行属性设置。

2.第二种：

首先创建BannerView 布局文件：

<?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">

<com.cfox.bannerlibrary.BannerView
android:id="@+id/banner_view"
android:layout_width="match_parent"
android:layout_height="150dp"/>

</LinearLayout>

通过findViewById

View view = LayoutInflater.from(this).inflate(R.layout.item_head,null);
BannerView bannerView = (BannerView) view.findViewById(R.id.banner_view);

BannerView 的数据适配器（DataAdapter）的使用

DataAdapter 类，是一个抽象类（

public abstract class DataAdapter<T>

），在该类中实现数据 bean 和BannerView 的绑定。使用方法示例如下：

DataAdapter<BannerBean> beanDataAdapter = new DataAdapter<BannerBean>(listData) {
@Override
public String setImageUrl(List<BannerBean> datas, BannerBean bannerBean, int position) {
/**
* 在此处是在 bean 中取出图片的 url 返回
* 参数说明：
* 第一个：Banner 中的所有List 数据
* 第二个：当前数据对象
* 第三个：当前对象的位置
*
* 返回值：返回的是轮播图片的url
*/
return bannerBean.getImgeUrl();
}

@Override
public void setImageLoader(ImageView imageView, String url, int position) {
/**
* 在此处将图片url 加载到ImageView 控件中
* 参数说明：
* 第一个：ImageView 控件
* 第二个：要加载到IamgeView 控件上图片的URL
* 第三个：当前对象的位置
*/
Glide.with(mContext).load(url).into(imageView);
}

@Override
public void setTitle(BannerView view, BannerBean bannerBean, int position) {
/**
* 从 bean 中取出 title 设置 banner 中的 title
* 第一个：BannerView 本身
* 第二个：当前数据对象
* 第三个：当前对象的位置
*/
view.setTitleText(bannerBean.getName());
}
};

BannerView 设置 DataAdapter：

BannerView.setDataAdapter(beanDataAdapter);

调用BannerView.setDataAdapter(DataAdapter dataAdapter) 方法，BannerView 将会开始加载数据。可以在程序中的任何位置调用setDataAdapter 方法进行更新显示数据。

BannerView 更新数据API

数据更新方法和设置 DataAdapter 方法实现是一样的,在使用中你也可以通过设置 DataAdapter 方式来实现跟新数据.

updateView(DataAdapter dataAdapter)

通过这个方法传入的参数可不难看出,和 setDataAdapter(DataAdapter dataAdapter)

方法实现是一样的.那么更新的数据要做哪里设置呢?在 DataAdapter 数据适配类中添加了新的 updateData(List datas) 方法用于更新 DataAdapter 数据数据.

updateData(List datas)

更新 DataAdapter 中的数据

private BannerView bv;

private DataAdapter<BannerBean> beanDataAdapter;

.....

listData.add(bean1);
listData.add(bean2);
listData.add(bean2);

.....

beanDataAdapter.updateData(listData);
bv.updateView(beanDataAdapter);

BannerConfig 介绍

BannerConfig 是个非常重要的类，该类中是对 BannerView 属性进行配置的类，在改类中可以对BannerView 中的 点，标题，BannerView 的宽高等属性进行配置。

BannerConfig 中API 说明

setUnselectedPointConfig 未选中点配置 和 setSelectedPointConfig 选中点配置

setWidth(int width) 设置点的宽度

setHeight(int height) 设置点的高度

setMargin(int marginTop,int marginRight,int marginLeft,int marginBottom) 设置点的边距（上、右、左、下）

setBorderWidth(int borderWidth) 设置点外边框的宽度

setBorderColor(int borderColor) 设置点外边框的颜色

setPointColor(int pointColor) 设置点内部颜色

setPointLayoutConfig(PointLayoutConfig config) 点的布局配置

setWidth(int width) 设置点布局的宽度，默认：MATCH_PARENT

setHeight(int height) 设置点布局的高度，默认：WRAP_CONTENT

setIsHide(boolean isHide) 设置点布局是否隐藏（true 隐藏，false 不隐藏。如果设置隐藏，指示的点也将隐藏）

setCirclePoinGravity(int circlePoinGravity) 设置圆点的显示位置,默认是Gravity.RIGHT（eg:Gravity.TOP）

setIsGravityTop(boolean isGravityTop) 设置点布局是否在图片上部显示（TOP），true ：在上部显示。false 在下部显示，默认是false

setLayoutBackgroundColorRes(int layoutBackgroundColorRes) 设置点布局的背景颜色

TitleConfig 标题配置

setWidth(int width) 设置标题布局的宽度，默认：MATCH_PARENT

setHeight(int height) 设置标题布局的高度，默认：WRAP_CONTENT

setIsPointTop(boolean isPointTop) 设置是否紧靠在点的上面显示。（此时，点应该在下方显示）

setIsHide(boolean isHide) 设置标题是否隐藏（true 隐藏，false 不隐藏）

setTextSize(float textSize) 设置标题字体显示大小

setTitleGravity(int titleGravity) 设置标题显示的位置

setTitleColorRes(int titleColorRes) 设置标题字体颜色

setTitleBackgroundColorRes(int titleBackgroundColorRes) 设置标题布局的背景颜色

setPadding(int paddingTop,int paddingRight,int paddingLeft,int paddingBottom) 设置标题布局文字的填充距离（上，右，左，下）

setImageConfig 显示图片配置

setWidth(int width) 设置图片布局的宽度

setHeight(int height) 设置图片布局的高度

setScrollDelay(int scrollDelay) 设置点击抬起后的滚动延迟

setScrollPeriod(int scrollPeriod) 设置图片轮播周期

setScrollerTime(int scrollerTime) 设置图片切换时间

BannerConfig 的一个配置示例

/**
* <br/>************************************************
* <br/>PROJECT_NAME : BannerLibrary
* <br/>PACKAGE_NAME : com.cfox.bannerlibrary.config
* <br/>AUTHOR : CFOX
* <br/>DATA : 2016/6/1 0001
* <br/>TIME : 9:04
* <br/>MSG :
* <br/>************************************************
*/
public class BannerConfig implements BannerConfigInterface{

@Override
public void setUnselectedPointConfig(PointConfig config) {
config.setWidth(50);
config.setHeight(50);
config.setBorderWidth(5);
config.setBorderColor(R.color.colortmf);
config.setPointColor(R.color.colorPrimary);
}

@Override
public void setSelectedPointConfig(PointConfig config) {
config.setWidth(50);
config.setHeight(50);
config.setBorderWidth(5);
config.setBorderColor(R.color.colortmf);
}

@Override
public void setPointLayoutConfig(PointLayoutConfig config) {
config.setLayoutBackgroundColorRes(R.color.colortm);
config.setPadding(0, 0, 20, 0);
config.setCirclePoinGravity(Gravity.CENTER);
}

@Override
public void setTitleConfig(TitleConfig config) {
config.setTitleBackgroundColorRes(R.color.colortm);
config.setIsPointTop(false);
config.setPadding(0, 0, 20,0);
config.setIsGravityTop(true);
}

@Override
public void setImageConfig(ImageConfig config) {
config.setHeight(450);
config.setScrollDelay(1000);
config.setScrollPeriod(1000);
config.setScrollerTime(500);
}
}

项目GitHub下载地址:https://github.com/CNCFOX/BannerDemo