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了.这里就不粘贴代码了.里面的内容比较的简单.这样就实现了图片的无线轮播,并且支持点击停止，松开继续播放的功能,还有的图片点击事件.最后放一个源代码：