public class CustomBanner<T> extends FrameLayout {
private ViewPager mBannerViewPager;
private LinearLayout mIndicatorLayout;
//添加轮播图ViewPager
private void addBannerViewPager(Context context) {
mBannerViewPager = new ViewPager(context);
this.addView(mBannerViewPager);
}
//添加轮播图指示器容器
private void addIndicatorLayout(Context context) {
mIndicatorLayout = new LinearLayout(context);
LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp.gravity = analysisGravity(mIndicatorGravity);
lp.setMargins(0, 0, 0, DensityUtils.dp2px(context, 8));
mIndicatorLayout.setGravity(Gravity.CENTER);
this.addView(mIndicatorLayout, lp);
}
}
//ViewPager的实际长度是他的数据的长度+2
@Override
public int getCount() {
return mDatas == null || mDatas.isEmpty() ? 0 : mDatas.size() + 2;
}
//通过实际的position计算用户所理解的position
private int getActualPosition(int position) {
if (position == 0) {
//如果是头节点,返回最后一个数据的position
//因为头节点的数据和最后一个数据是一样的。
return mDatas.size() - 1;
} else if (position == getCount() - 1) {
//如果是尾节点,返回第一个数据的position
//因为尾节点的数据和第一个数据是一样的。
return 0;
} else {
//除了头尾以外,position节点的数据是mDatas中的第position - 1的下标的数据
return position - 1;
}
}
3、设置ViewPager的滚动速度
ViewPager有自己的mScroller属性,负责控制ViewPager的滚动速度。但是ViewPager的默认滚动速度太快了,而且ViewPager并没有提供方法设置mScroller的滚动速度也没有提供方法设置mScroller,所以我们需要通过反射用自己的mScroller替换掉ViewPager的mScroller,使我们可以完全控制和操作ViewPager的mScroller属性。这不仅仅是实现我们自定义ViewPager的滚动速度,也是实现第2步中ViewPager无缝跳转的关键。
//通过反射替换掉mBannerViewPager的mScroller属性
private void replaceViewPagerScroll() {
try {
Field field = ViewPager.class.getDeclaredField("mScroller");
field.setAccessible(true);
mScroller = new ViewPagerScroller(mContext,
new AccelerateInterpolator());
field.set(mBannerViewPager, mScroller);
} catch (Exception e) {
}
}
/**
* 设置轮播图的滚动速度
*
* @param scrollDuration
*/
public CustomBanner<T> setScrollDuration(int scrollDuration) {
mScroller.setScrollDuration(scrollDuration);
return this;
}
public class ViewPagerScroller extends Scroller {
private int mScrollDuration = 550;
//是否无缝跳转
private boolean sudden;
public ViewPagerScroller(Context context) {
super(context);
}
public ViewPagerScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}
public ViewPagerScroller(Context context, Interpolator interpolator,
boolean flywheel) {
super(context, interpolator, flywheel);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy) {
super.startScroll(startX, startY, dx, dy, sudden ? 0 : mScrollDuration);
}
public int getScrollDuration() {
return mScrollDuration;
}
public void setScrollDuration(int scrollDuration) {
this.mScrollDuration = scrollDuration;
}
public boolean isSudden() {
return sudden;
}
public void setSudden(boolean zero) {
this.sudden = zero;
}
}
4、实现ViewPager的自动轮播
这个实现起来非常的简单。直接利用Handler延迟发送消息的功能来进行轮播滚动的计时,在消息的处理中改变ViewPager显示的Item,达到ViewPager的自动滚动效果,然后再Handler发送一个延迟消息,形成循环。
private Handler mTimeHandler = new Handler();
private Runnable mTurningTask = new Runnable() {
@Override
public void run() {
if (isTurning && mBannerViewPager != null) {
int page = mBannerViewPager.getCurrentItem() + 1;
mBannerViewPager.setCurrentItem(page);
mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
}
}
};
/**
* 启动轮播
* @param intervalTime 轮播间隔时间
* @return
*/
public CustomBanner<T> startTurning(long intervalTime) {
isTurning = true;
mIntervalTime = intervalTime;
mTimeHandler.postDelayed(mTurningTask, mIntervalTime);
return this;
}
5、添加和更新指示器
指示器的指示点用指示器容器mIndicatorLayout来承载,当ViewPager滚动的时候,指示器也要相应的做更新
//根据轮播图的数量来添加指示器的点
//指示器的点用ImageView来表示,样式由使用者自定义
private void initIndicator(int count) {
mIndicatorLayout.removeAllViews();
if (count > 0) {
for (int i = 0; i < count; i++) {
ImageView imageView = new ImageView(mContext);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
0, DensityUtils.dp2px(mContext, 2), 0);
mIndicatorLayout.addView(imageView, lp);
}
}
}
/**
* 更新指示器
*/
private void updateIndicator() {
int count = mIndicatorLayout.getChildCount();
//获取ViewPager当前显示的Item。
int currentPage = getCurrentItem();
if (count > 0) {
for (int i = 0; i < count; i++) {
ImageView view = (ImageView) mIndicatorLayout.getChildAt(i);
if (i == currentPage) {
//设置选中样式
view.setImageResource(mIndicatorSelectRes);
} else {
//设置未选中样式
view.setImageResource(mIndicatorUnSelectRes);
}
}
}
}
6、设置轮播图数据
把轮播图的基本功能都实现了之后,接下来就是填充数据了。下面先看设置数据的方法:
/**
* 设置轮播图数据
* @param creator 创建和更新轮播图View的接口
* @param data 轮播图数据
* @return
*/
public CustomBanner<T> setPages(ViewCreator<T> creator, List<T> data) {
mAdapter = new BannerPagerAdapter<T>(mContext, creator, data);
mBannerViewPager.setAdapter(mAdapter);
return this;
}
代码非常的简单,其实就是给mBannerViewPager设置了一个Adapter。上面的setPages方法接收两个参数:
1、creator:这是一个ViewCreator对象,ViewCreator是负责创建和更新轮播图的接口。
2、data:这是轮播图的数据。
他们的泛型T是轮播图的数据类型,轮播图的数据类型可以是任何的类型。
下面是ViewCreator接口代码
/**
* 创建和更新轮播图View的接口
* @param <T>
*/
public interface ViewCreator<T> {
//创建轮播图的每个项的View
View createView(Context context, int position);
//更新轮播图
void updateUI(Context context, View view, int position, T data);
}
createView方法的返回值是View而不是ImageView,所以CustomBanner可以支持轮播所有的布局,而不仅仅是ImageView,虽然我们大部分情况使用的都是ImageView。
如果你现在还不清楚ViewCreator是干什么的,那么请看下面的代码。下面是轮播图适配器BannerPagerAdapter的核心代码,通过这段代码,你应该就能很清晰的理解ViewCreator的作用了。
@Override
public Object instantiateItem(ViewGroup container, final int position) {
View view = views.get(position);
if (view == null) {
//mCreator就是调用者传入的ViewCreator对象
//通过mCreator创建轮播图的布局,所以轮播图的布局是由调用者创建的
view = mCreator.createView(mContext, position);
views.put(position, view);
}
final int item = getActualPosition(position);
final T t = mData.get(item);
//通过mCreator把更新轮播图数据的操作交给调用者去实现
mCreator.updateUI(mContext, view, item, t);
container.addView(view);
return view;
}
演示.gif