前言
现在不论是电商还是社交应用都喜欢在列表的头部添加上自动轮播的Banner。这些Banner展示的图片都不大,但是动态的播放效果总是能吸引用户的注意力,在用户不必做任何滑动操作的情况下把所有用户可能感兴趣的产品服务资讯展示给他们,最大限度的提高曝光率。现在就来实现一下这种带有无限轮播效果的Banner。
实现效果
真机上看是没有问题的,录像出来就成这个鬼样了。
实现接口
Android中横向滑动的ViewPager可以很好的实现这种轮播效果,但是ViewPager本身并不支持无限轮播功能,这就需要客户端的实现多做一些处理工作。目前有两种比较流行的实现方式,第一种是Adapter条目无限,然后使用取模操作来实现无限循环;第二种是在第一条之前加上最后一条的数据,在最后一条后面加上第一条的数据,在监听滑动结束,在轮播到索引0和last的时候在直接切换到第一条和最后一条数据。
实现了轮播效果还要展示底部的指示圆点,表明当前横向轮播的总条目数和目前展示的条目索引,这些可以组合ImageView实现,也可以直接在横向展示Banner的Layout.dispatchDraw里画出来。
实现过程
无限条数
首先定义要展示的Adapter,令它返回的条目数是Integer.MAX_VALUE,同时对索引值做取模操作,为了避免总是创建新对象,可以把每次实例化的对象做缓存操作。
// 返回的条目数
@Override
public int getCount() {
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// 对索引值做取模操作获取真实值
int realPosition = position % resArr.length;
if (mList.get(realPosition) == null) {
ImageView imageView = new ImageView(container.getContext());
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setImageResource(resArr[position]);
container.addView(imageView);
// 对创建的对象做缓存操作,避免大量的创建新对象
mList.add(realPosition, imageView);
imageView.getLayoutParams().width = ViewGroup.LayoutParams.MATCH_PARENT;
image