前言
首先，我们来看一下执行的效果。
这是我们项目中常用的图像传送带效果，一般用于广告图像的展示。
主要需要实现以下功能：
1 )自动播放
2 )无限滑动
3 )手指拖动图像时暂停自动轮播，松开后继续自动轮播；
4 )包含动画效果的小点指示器。
本文介绍利用ViewPager实现无限圆盘传送带图像，在图像下方加装小圆点指示器标记当前位置，利用Handler实现自动圆盘传送带图像。
正文
1、实现自动播放
想法：暂时不在ViewPager上更换页面卡，而是使用Handler实现。
1 )标记是否会自动播放
private boolean isAutoPlay；
2 )使用Handler发送每隔一定时间交换页面卡的任务
//不足2张的话可以不自动播放
if(count2) {
isAutoPlay=false；
} else {
isAutoPlay=true；
handler=new Handler (；
Handler.postDelayed(task，delay )；
}
3 )通过在任务中每隔一定时间重发一次任务，实现循环发送自动播放的效果。
privaterunnabletask=new runnable {
@Override
公共语音运行(}
if(isAutoplay
//位置环
当前项目=当前项目% (count1) 1；
//通常每隔3秒播放一次图像
vimagetitle.setcurrentitem (current item )；
Handler.postDelayed(task，delay )；
} else {
//如果拖动时停止自动播放，则每5秒检查是否可以正常自动播放。
Handler.postDelayed(task，5000 )；
}
}
(；
2、实现无限折动
思考：设置页面卡视图列表时，前后各添加一个页面卡。 在最前面添加最后一张图像，在最后添加第一张图像。 然后，每当切换到开头页面卡时，置换为倒数第二个页面卡； 每次切换到最后一个页面卡时，将其替换为第二个页面卡。 这样形成了连贯性，自然地实现了无限滑动的功能。
1 )设置ViewPager视图列表时，在设置视图页面之前和之后添加一个页面卡片。
for(intI=0； i count 2； I ) {
if(I==0) )//将第一页乘以成本，使其成为最后一页
gide.with (上下文)。
load (imagetitlebeanlist.get (count-1 ).getImageUrl ) ).into iv image；
TV title.settext (imagetitlebeanlist.get (count-1 ).getTitle ) )；
}elseif(I==count1) (/最后一页乘以成本来到最前一页
gide.with (上下文)。
load(imagetitlebeanlist.get(0).getImageUrl ) ).into ) ivimage；
TV title.settext (imagetitlebeanlist.get (0).getTitle ) )；
} else {
gide.with (上下文)。
load (imagetitlebeanlist.get (I-1 ).getImageUrl ) ).into ) ivimage；
TV title.settext (imagetitlebeanlist.get (I-1 ).getTitle ) )；
}
//将设置的View添加到View列表
viewlist.add(view；
}
2 )在监听ViewPager的页面卡的状态变更中，滑动到第1页的卡上时置换为倒数第2页的卡； 滑动到最后一张分页卡后，更换为第二张分页卡。
@Override
publicvoidonpagescrollstatechanged {
开关(state ) {
//空闲中
caseview pager.scroll _ state _ idle :
//“偷梁换柱”
vpimagetitle.get curren
tItem() == 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)绘制小圆点
未选中状态，灰色的圆。
android:shape="oval">
android:width="32dp"
android:height="32dp"/>
选中状态，白色的圆。
android:shape="oval">
android:width="32dp"
android:height="32dp"/>
2)属性动画
变大
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleX"
android:valueFrom="1.0"
android:valueTo="1.5"
android:valueType="floatType"/>
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleY"
android:valueFrom="1.0"
android:valueTo="1.5"
android:valueType="floatType"/>
变小
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleX"
android:valueFrom="1.5"
android:valueTo="1.0"
android:valueType="floatType"/>
android:duration="150"
android:pivotX="50%"
android:pivotY="50%"
android:propertyName="scaleY"
android:valueFrom="1.5"
android:valueTo="1.0"
android:valueType="floatType"/>
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);
}
}
}
}