PS：以前也写过关于图片轮播这一块的博客.不过写的很烂,并且很多情况没有考虑到(没有支持无线轮播,和手势点击事件).因此这里写一篇补上.也是当时太年轻了.
注：图片请放大后再看.否则看不清楚.
学习内容：
1.自定义ViewPager
2.图片无限轮播由于ViewPager的预加载机制所导致的问题.
以前也写过关于图片轮播的相关博客,不过总体写的非常的烂,并且不能够无线轮播,而且也无法对手势事件进行相关的处理,因此在这里补上,也是属于自定义View的一篇内容吧.并且通过这个过程发现了无限轮播由于ViewPager的预加载机制所导致的问题.也正赶上项目要上一个新的版本,发现了这个bug.我的同事想到了一个比较不错的方案解决了这个问题.总体还是很不错的.因此在这里记录一下.
总体实现无限轮播的思想,其实和网上大部分的思路都是相同的,设置一个Integer的最大值的一半,然后根据position和图片的数量去计算,来实现向左向右无限滑动这个功能.总体不是特别的难.自定义ViewPager之后,把相关的图片和跟随图片滑动时的小圆点传递到ViewPager当中,然后设置相关的滑动监听,Adapter就可以完美的实现图片的无限轮播了.
i.初始化轮播.
初始化轮播需要线程和Handler配合来完成,设置一个无线循环的线程,让这个线程按照一定的周期一直向Activity发送Message,Handler在接收到消息后会不断的对消息进行处理.改变ViewPager当前显示的CurrentItem就可以实现无限轮播了.
/** * 初始化轮播的线程 */ public void initLoop() { new Thread(new Runnable() { @Override public void run() { while (true) { try { Thread.sleep(3000); if (!stopLoopTag) { Message message = Message.obtain(); message.what = 10; message.arg1 = getCurrentItem() + 1; mHandler.sendMessage(message); } } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } /** * 处理轮播的Handler */ private Handler mHandler = new Handler(new Handler.Callback() { @Override public boolean handleMessage(Message msg) { if (msg.what == 10 && !stopLoopTag) { setCurrentItem(msg.arg1); } else { mHandler.removeMessages(10); } return true; } });
ii.图片轮播时小圆点随之变动
有了一个子线程和一个Handler就可以实现无线循环的一个过程,我们知道一般图片轮播都需要伴随小圆点的移动,小圆点一般是直接布局到ViewPager当中的,因为需要给用户一种更好的体验性,因此在图片轮播的同时伴随着小圆点也随之变动.那么小圆点如何在ViewPager的Item改变的时候也随之变动呢？这就需要addOnPageChangeListener()来实现了.
private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {
@Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { /** * 改变小圆点的状态 * 三种情况: * 1.在初始位置 * 2.向左滑动 * 3.向右滑动 * 不要放在上一个方法中,会有明显的延迟现象出现 * lastPointPosition 上一个点的位置,初始化为0 * lastPointIndex 上一个点在集合中的位置 * currentPointIndex 当前的点在集合中的位置 * */ if (lastPointPosition == 0) { currentPointIndex = 0; lastPointIndex = 0; } else if (lastPointPosition < position) { if (currentPointIndex == getImages().size() - 1) { currentPointIndex = 0; } else { currentPointIndex += 1; } } else if (lastPointPosition > position) { if (currentPointIndex == 0) { currentPointIndex = getImages().size() - 1; } else { currentPointIndex -= 1; } } dots.get(lastPointIndex).setImageResource(R.drawable.dot_normal); dots.get(currentPointIndex).setImageResource(R.drawable.dot_focus); lastPointPosition = position; lastPointIndex = currentPointIndex; } @Override public void onPageScrollStateChanged(int state) { } };
这里我们通过addOnPageChangeListener()绑定Page的改变监听来改变小圆点随着Page改变的同时随之改变.图片的改变需要在适配器里去设置,适配器我留到最后说,因为其中有很多的细节.这样有了无限循环,原点移动,那么就需要说一下当我们手指停留在ViewPager的时候,如何使ViewPager停止播放.因为涉及到了手势事件,因此就要重写相关的方法.
iii.重写手势事件
/** * 手势事件的重写 */ @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: /** * 按下的时候停止轮播 * */ stopLoop(); xDown = (int) event.getX(); yDown = (int) event.getY(); break; case MotionEvent.ACTION_MOVE: /** * 这里不用做任何处理,移动的时候ViewPager内的图片会自动滑动 * */ break; case MotionEvent.ACTION_UP: /** * 记录按下时间 * */ if (timeThread == null) { touchTime = new Date().getTime(); timeTag = true; timeThread = new TimeThread(); timeThread.start(); } else { touchTime = new Date().getTime(); } /** * 判断是否是点击事件 * */ int xUp = (int) event.getX(); int yUp = (int) event.getY(); if (Math.abs(xDown - xUp) < 20 && Math.abs(yDown - yUp) < 20) { if (onImageItemClickListener != null) { onImageItemClickListener.onItemClick(currentPointIndex); } } break; } return super.onTouchEvent(event); }
手势事件的重写就非常的简单了,当点击的时候停止轮播,移动的时候我们不需要做任何的处理,在手指离开之后,我们需要计算离开的时间,离开的时间超过两秒,就再次开启轮播.关闭轮播只需要停止最开始的那个子线程,让标记位StopLoopTag为true,再将消息队列中的消息移除队列.这样Handler也接收不到消息了.这样就停止了轮播的效果.计算手指按下和离开的时间也需要一个子线程去处理.
/** * 时间线程,用于记录手指离开点击ViewPager的时间 * 如果离开的时间 >= 2000毫秒,那么ViewPager继续轮播 */ class TimeThread extends Thread { @Override public void run() { while (timeTag) { long currentTime = new Date().getTime(); if (currentTime - touchTime >= 2000) { openLoop(); timeTag = false; timeThread = null; } } } }
iv.PagerAdapter.
PagerAdapter也是最蛋疼的一块.instantiateItem()方法里的那一大堆代码是关键.很多人都用这样的代码来实现图片的加载过程.
@Override public Object instantiateItem(ViewGroup container, int position) { position %= images.size(); if (position < 0) { position = position + images.size(); } ImageView imageView = images.get(initPosition); ViewParent parent = imageView.getParent(); if (parent != null) { ViewGroup viewGroup = (ViewGroup) parent; viewGroup.removeView(imageView); } container.addView(imageView); return imageView; }
其实这样写是有很大的问题的,因为这里没有考虑到ViewPager的预加载机制的问题,这也是我们项目出现的一个bug,我们是从服务器上获取相关的图片数据,然后保存在集合当中,如果我们在将图片加载到ViewPager中的时候,仅调用image.get(position),position为上面代码计算出的position,这样的话实际上会导致图片错位.虽然显示的是5张图片,但是实际上他们在ViewPager中显示的顺序是不对的.比如说我们在后台定义了这样的顺序, 1,2,3,4,5的顺序发送给我们,但是如果我们按照上面的方法从集合中拿数据的时候,ViewPager显示的不是1,2,3,4,5这样的顺序,这也是我们在项目中发现的问题.因为在点击图片的时候,是需要走不同的链接的,也正是这个原因我们发现了这个bug.因此这里做了很多的处理.
public class PictureAdapter extends PagerAdapter { private List<ImageView> images; /** * initPosition -1为初始化的位置，后面是当前的图片索引位置 * topPosition 记录上一次初始化的索引位，用于计算上次的position和本次position的偏移量 * * */ private int initPosition = -1; private int topPosition = -1; public PictureAdapter(List<ImageView> images) { this.images = images; } @Override public int getCount() { return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public void destroyItem(ViewGroup container, int position, Object object) { } /** * 实例化Item */ @Override public Object instantiateItem(ViewGroup container, int position) { if(images.size() <=1){ ImageView imageView = images.get(topPosition); container.addView(imageView); return imageView; }else{ /** * 初始化状态 * 向左滑动 * 向右滑动 * 由于ViewPager有预加载机制,默认加载一页,因此在第一次初始化的时候,会调用三次这个方法. * (第一次： position=1073741823 第二次： position=1073741822 第三次： position=1073741824) * * 而后续,这个方法仅被执行一次,并且执行的是预加载下一页的请求. * */ Log.e("TAG","position="+position); if (initPosition == -1) { /** * 初始化状态 * topPosition 记录第一次初始化的索引位.用于后续作比较判断下次是向右滑动还是向左滑动 * initPosition 初始化图片集合的索引值 * */ topPosition = position; initPosition = 0; } else if (topPosition < position) { /** * 向左滑动 * 得出偏移量后比较是否超过图片集合的大小 * */ int value = position - topPosition; initPosition += value; if (initPosition == images.size()) { /** * 滑动到了最后一页 * */ initPosition = 0; } else if (initPosition > images.size()) { /** * 如果超出了图片集合的大小,则 initPosition = 超过的数值 * */ initPosition = (initPosition - images.size()); } topPosition = position; } else if (topPosition > position) { int value = topPosition - position; initPosition -= value; if (initPosition == -1) { /** * 滑动到了第一页 * */ initPosition = images.size() - 1; } else if (initPosition < -1) { /** * 当计算后的值小于了集合大小，则用集合大小减去小于的这部分 * */ initPosition = (images.size() - (Math.abs(initPosition))); } topPosition = position; } Log.e("TAG","topPosition="+topPosition); Log.e("TAG","initPosition="+initPosition); /** * 只用这句话应该会出现问题 * */ // position %= images.size(); // if (position < 0) { // position = position + images.size(); // } ImageView imageView = images.get(initPosition); ViewParent parent = imageView.getParent(); if (parent != null) { ViewGroup viewGroup = (ViewGroup) parent; viewGroup.removeView(imageView); } container.addView(imageView); return imageView; } } }
这就是我们定义的PagerAdapter.里面做了很多的逻辑处理.一张图解释一下其中的原理.
这张图说明了一种的道理,上面代码不难发现.会出现 (initPosition > images.size())和initPosition < -1这两种情况.这种原因的导致就是因为position会由于这种预加载机制出现数值跳跃问题.这里大家可以去根据Log信息结合我说的原理,好好的研究一下.相信大家会研究明白的.
最后就是点击事件了.对Activity暴露接口,让Activity去实现就可以了.
/** * 对Activity暴露接口 */ private OnImageItemClickListener onImageItemClickListener; public interface OnImageItemClickListener { void onItemClick(int itemPosition); } public void setOnImageItemClickListener(OnImageItemClickListener onImageItemClickListener) { this.onImageItemClickListener = onImageItemClickListener; }
剩下的就是MainActivity了.这里就不粘贴代码了.里面的内容比较的简单.这样就实现了图片的无线轮播,并且支持点击停止，松开继续播放的功能,还有的图片点击事件.最后放一个源代码：