前言
首先我们来看一下运行的效果，如下所示：
这是在我们的项目中经常会用到的图片轮播效果，一般用于广告图片的展示。
它要求主要实现以下功能：
1）自动播放；
2）无限滑动；
3）手指拖拽图片时暂停自动轮播，松开后继续自动轮播；
4）含动画效果的小圆点指示器。
本文将介绍利用ViewPager实现无限轮播图片，图片下方加上小圆点指示器标记当前位置，并利用Handler实现自动轮播图片。
正文
1、实现自动播放
思路：没隔一段时间让ViewPager更换一次页卡，使用Handler来实现。
1）标记是否自动播放
private boolean isAutoPlay;
2）每隔一段时间使用Handler发送一次更换页卡的任务
// 如果少于2张就不用自动播放了
if (count < 2) {
isAutoPlay = false;
} else {
isAutoPlay = true;
handler = new Handler();
handler.postDelayed(task, delay);
}
3）在任务中每隔一段时间再次发送任务，这样循环发送就实现了自动播放的效果。
private Runnable task = new Runnable() {
@Override
public void run() {
if (isAutoPlay) {
// 位置循环
currentItem = currentItem % (count + 1) + 1;
// 正常每隔3秒播放一张图片
vpImageTitle.setCurrentItem(currentItem);
handler.postDelayed(task, delay);
} else {
// 如果处于拖拽状态停止自动播放，会每隔5秒检查一次是否可以正常自动播放。
handler.postDelayed(task, 5000);
}
}
};
2、实现无限滑动
思路：设置页卡视图列表时，在前后额外各加一个页卡。最前面加最后一张图片，最后面加第1张图片。然后每当切换到最前的页卡时，就替换成倒数第2个页卡；每当切换到最后的页卡时，就替换成第2个页卡。这样一来就形成了连贯，自然实现了无限滑动的功能。
1）设置ViewPager的视图列表时，在前后各加一个页卡。
for (int i = 0; i < count + 2; i++) {
if (i == 0) {// 将最前面一页设置成本来最后的那页
Glide.with(context).
load(imageTitleBeanList.get(count - 1).getImageUrl()).into(ivImage);
tvTitle.setText(imageTitleBeanList.get(count - 1).getTitle());
} else if (i == count + 1) {// 将最后面一页设置成本来最前的那页
Glide.with(context).
load(imageTitleBeanList.get(0).getImageUrl()).into(ivImage);
tvTitle.setText(imageTitleBeanList.get(0).getTitle());
} else {
Glide.with(context).
load(imageTitleBeanList.get(i - 1).getImageUrl()).into(ivImage);
tvTitle.setText(imageTitleBeanList.get(i - 1).getTitle());
}
// 将设置好的View添加到View列表中
viewList.add(view);
}
2）在监听ViewPager的页卡状态改变中，当滑动到第1个页卡时替换成倒数第2个页卡；当滑动到最后一个页卡时替换成第2个页卡。
@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
// 闲置中
case ViewPager.SCROLL_STATE_IDLE:
// “偷梁换柱”
if (vpImageTitle.getCurrentItem() == 0) {
vpImageTitle.setCurrentItem(count, false);
} else if (vpImageTitle.getCurrentItem() == count + 1) {
vpImageTitle.setCurrentItem(1, false);
}
currentItem = vpImageTitle.getCurrentItem();
break;
}
}
3、手指滑动图片时停止自动播放
思路：使用一个标记来控制是否自动播放。
1）声明一个boolean变量，用来标记是否播放。
private boolean isAutoPlay;
2）默认是自动播放，但当图片少于2张时不自动播放。
private void starPlay() {
// 如果少于2张就不用自动播放了
if (count < 2) {
isAutoPlay = false;
} else {
isAutoPlay = true;
handler.postDelayed(task, delay);
}
}
3）根据标记判断是否切换页卡
private Runnable task = new Runnable() {
@Override
public void run() {
if (isAutoPlay) {
// 正常每隔3秒播放一张图片
vpImageTitle.setCurrentItem(currentItem);
handler.postDelayed(task, delay);
} else {
// 如果处于拖拽状态停止自动播放，会每隔5秒检查一次是否可以正常自动播放。
handler.postDelayed(task, 5000);
}
}
};
4）在监听ViewPager的页卡状态改变中，如果是拖动状态就不切换页卡。
@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
// 闲置中
case ViewPager.SCROLL_STATE_IDLE:
isAutoPlay = true;
break;
// 拖动中
case ViewPager.SCROLL_STATE_DRAGGING:
isAutoPlay = false;
break;
// 设置中
case ViewPager.SCROLL_STATE_SETTLING:
isAutoPlay = true;
break;
}
}
4、自定义指示器
思路：使用一个LinearLayout作为容器，然后根据图片的数量向容器中不断添加绘制的小圆点，另外再设置变大变小的属性动画用于动画效果。监听ViewPager的页卡，每当切换到一个页卡时就将切换对应状态的小圆点，并且设置相应的动画效果。
1）绘制小圆点
未选中状态，灰色的圆。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="32dp"
android:height="32dp"/>
<solid android:color="#9e9e9e"/>
</shape>
选中状态，白色的圆。
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="32dp"
android:height="32dp"/>
<solid android:color="#ecf0f1"/>
</shape>
2）属性动画
变大
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleX"
android:valueFrom="1.0"
android:valueTo="1.5"
android:valueType="floatType"/>
<objectAnimator
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleY"
android:valueFrom="1.0"
android:valueTo="1.5"
android:valueType="floatType"/>
</set>
变小
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleX"
android:valueFrom="1.5"
android:valueTo="1.0"
android:valueType="floatType"/>
<objectAnimator
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleY"
android:valueFrom="1.5"
android:valueTo="1.0"
android:valueType="floatType"/>
</set>
3）设置指示器
先是统一设置属性并添加到容器中，然后默认第1个小圆点为选中状态。选中状态的小圆点颜色由灰色变成白色，并且变大。
private void setIndicator() {
isLarge = new SparseBooleanArray();
// 记得创建前先清空数据，否则会受遗留数据的影响。
llDot.removeAllViews();
for (int i = 0; i < count; i++) {
View view = new View(context);
view.setBackgroundResource(R.drawable.dot_unselected);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(dotSize, dotSize);
layoutParams.leftMargin = dotSpace / 2;
layoutParams.rightMargin = dotSpace / 2;
layoutParams.topMargin = dotSpace / 2;
layoutParams.bottomMargin = dotSpace / 2;
llDot.addView(view, layoutParams);
isLarge.put(i, false);
}
llDot.getChildAt(0).setBackgroundResource(R.drawable.dot_selected);
animatorToLarge.setTarget(llDot.getChildAt(0));
animatorToLarge.start();
isLarge.put(0, true);
}
4）监听页卡
当页卡被选中时，相应的小圆点颜色由灰色变成白色，并且变大；之前的小圆点颜色由白色变成灰色，并且变小。
@Override
public void onPageSelected(int position) {
// 遍历一遍子View，设置相应的背景。
for (int i = 0; i < llDot.getChildCount(); i++) {
if (i == position - 1) {// 被选中
llDot.getChildAt(i).setBackgroundResource(R.drawable.dot_selected);
if (!isLarge.get(i)) {
animatorToLarge.setTarget(llDot.getChildAt(i));
animatorToLarge.start();
isLarge.put(i, true);
}
} else {// 未被选中
llDot.getChildAt(i).setBackgroundResource(R.drawable.dot_unselected);
if (isLarge.get(i)) {
animatorToSmall.setTarget(llDot.getChildAt(i));
animatorToSmall.start();
isLarge.put(i, false);
}
}
}
}
源码地址
ImageSlideshow
网友评论