目前情况

在不修改源码的情况下,当ViewPager滑动到最后一个item的时候,他就无法再往右滑动;当ViewPager滑动到第一个item的时候,他也无法再往前滑动。(以上全是废话)

设想

我们可以这样想,当滑动最后一个的时候,我们让他跳转到第一个,这样他就可以继续往后滑动了,这样做行程了我们想要的循环滑动。

如果这样作,虽然功能上是循环了,但是实际显示的时候会在最后一个和第一个之间自动跳转。

优化

我们可以在原来的链表中首尾各增加一个假的item,用多余的两个item来作跳转的动作,这样就可以避免出现自动跳转的错误画面了。请看下面演示。

我们要显示的是下面A、B、C画面,位置分别是0、1、2.

实际上,我们添加数据的时候,多添加了2个。在位置0添加了最后一个界面C,在位置4添加了第一个界面A。

当界面滑动到位置3的时候,他还可以往右滑动,这样给人的感觉就是循环的。但,当滑动到位置4的时候,他右边没有了,这样岂不是露馅了?所以,当滑动到位置4的时候,立刻跳转到位置1。因为他们是同样的数据,所以从显示效果是看不出跳转了的,这样实际上我们就变成了位置1,这样就又可以继续往右滑动了。

重复上面条件的判断,这样就实现了往右的循环,往左也是同样的道理。

代码分析

在onPageSelected里面做条件判断,在onPageScrollStateChanged里面做跳转。关键代码如下:

初始化,首尾各增加一个item。

  1. // 增加第1个界面,实际上他显示的是最后一个界面
  2. addTextView(POINT_LENGTH - 1);
  3. // 增加实际显示的2、3、4界面
  4. for (int i = 0; i < 3; i++) {
  5. addTextView(i);
  6. addPoint(i);
  7. }
  8. // 增加最后的第5个界面,实际上他显示的是第一个界面
  9. addTextView(0);

条件判断:

  1. @Override
  2. public void onPageSelected(int pPosition) {
  3. mIsChanged = true;
  4. if (pPosition > POINT_LENGTH) {
  5. mCurrentPagePosition = FIRST_ITEM_INDEX;
  6. } else if (pPosition < FIRST_ITEM_INDEX) {
  7. mCurrentPagePosition = POINT_LENGTH;
  8. } else {
  9. mCurrentPagePosition = pPosition;
  10. }
  11. Log.i(TAG,"当前的位置是"+mCurrentPagePosition);
  12. setCurrentDot(mCurrentPagePosition);
  13. }

跳转:

  1. @Override
  2. public void onPageScrollStateChanged(int pState) {
  3. if (ViewPager.SCROLL_STATE_IDLE == pState) {
  4. if (mIsChanged) {
  5. mIsChanged = false;
  6. mViewPager.setCurrentItem(mCurrentPagePosition, false);
  7. }
  8. }
  9. }

完整的逻辑如下:

  1. package com.ahacool.circleviewpager;
  2. import java.util.ArrayList;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.support.v4.view.PagerAdapter;
  6. import android.support.v4.view.ViewPager;
  7. import android.support.v4.view.ViewPager.OnPageChangeListener;
  8. import android.util.Log;
  9. import android.view.Gravity;
  10. import android.view.View;
  11. import android.view.ViewGroup;
  12. import android.widget.ImageView;
  13. import android.widget.LinearLayout.LayoutParams;
  14. import android.widget.TextView;
  15. /**
  16. * @ClassName MainActivity
  17. * @Description 循环滑动viewpager的一种方法,滑动很流畅。实现方法:在实际显示的界面头和尾分别增加一个界面。
  18. * @author Moto
  19. * @date 2014 2014-7-18
  20. *
  21. */
  22. public class MainActivity extends Activity implements OnPageChangeListener {
  23. private ViewPager mViewPager;
  24. private ViewGroup mPointViewGroup;
  25. private ArrayList<View> mViewPagerList;
  26. private boolean mIsChanged = false;
  27. private int mCurrentPagePosition = FIRST_ITEM_INDEX;
  28. private int mCurrentIndex;
  29. private static final int POINT_LENGTH = 3;
  30. private static final int FIRST_ITEM_INDEX = 1;
  31. private static final String TAG = "MOTO";
  32. @Override
  33. protected void onCreate(Bundle savedInstanceState) {
  34. super.onCreate(savedInstanceState);
  35. setContentView(R.layout.activity_main);
  36. initUI();
  37. }
  38. private void initUI() {
  39. mViewPager = (ViewPager) findViewById(R.id.viewpager);
  40. mPointViewGroup = (ViewGroup) findViewById(R.id.point_layout);
  41. mViewPagerList = new ArrayList<View>();
  42. // 增加第1个界面,实际上他显示的是最后一个界面
  43. addTextView(POINT_LENGTH - 1);
  44. // 增加实际显示的2、3、4界面
  45. for (int i = 0; i < 3; i++) {
  46. addTextView(i);
  47. addPoint(i);
  48. }
  49. // 增加最后的第5个界面,实际上他显示的是第一个界面
  50. addTextView(0);
  51. PagerAdapter pagerAdapter = new CustomPagerAdapter(mViewPagerList);
  52. mViewPager.setAdapter(pagerAdapter);
  53. mViewPager.setOnPageChangeListener(this);
  54. mViewPager.setCurrentItem(mCurrentPagePosition, false);
  55. }
  56. private void addTextView(int pIndex) {
  57. TextView textview = new TextView(this);
  58. textview.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
  59. textview.setGravity(Gravity.CENTER);
  60. textview.setText("这是第" + (pIndex + 1) + "个页面");
  61. textview.setTextSize(50);
  62. mViewPagerList.add(textview);
  63. }
  64. private void addPoint(int pIndex) {
  65. ImageView pointImageView = new ImageView(this);
  66. LayoutParams layoutParams = new LayoutParams(20, 20);
  67. layoutParams.setMargins(10, 0, 10, 0);
  68. pointImageView.setLayoutParams(layoutParams);
  69. pointImageView.setBackgroundResource(R.drawable.point_style);
  70. if (0 == pIndex) {
  71. pointImageView.setEnabled(false);
  72. }
  73. mPointViewGroup.addView(pointImageView);
  74. }
  75. private void setCurrentDot(int positon) {
  76. // 界面实际显示的序号是第1, 2, 3。而点的序号应该是0, 1, 2.所以减1.
  77. positon = positon - 1;
  78. if (positon < 0 || positon > mViewPagerList.size() - 1 || mCurrentIndex == positon) {
  79. return;
  80. }
  81. mPointViewGroup.getChildAt(positon).setEnabled(false);
  82. mPointViewGroup.getChildAt(mCurrentIndex).setEnabled(true);
  83. mCurrentIndex = positon;
  84. }
  85. @Override
  86. public void onPageScrollStateChanged(int pState) {
  87. if (ViewPager.SCROLL_STATE_IDLE == pState) {
  88. if (mIsChanged) {
  89. mIsChanged = false;
  90. mViewPager.setCurrentItem(mCurrentPagePosition, false);
  91. }
  92. }
  93. }
  94. @Override
  95. public void onPageScrolled(int arg0, float arg1, int arg2) {
  96. }
  97. @Override
  98. public void onPageSelected(int pPosition) {
  99. mIsChanged = true;
  100. if (pPosition > POINT_LENGTH) {
  101. mCurrentPagePosition = FIRST_ITEM_INDEX;
  102. } else if (pPosition < FIRST_ITEM_INDEX) {
  103. mCurrentPagePosition = POINT_LENGTH;
  104. } else {
  105. mCurrentPagePosition = pPosition;
  106. }
  107. Log.i(TAG,"当前的位置是"+mCurrentPagePosition);
  108. setCurrentDot(mCurrentPagePosition);
  109. }
  110. }

源码下在地址:https://github.com/bird7310/Demos.git

总结

希望对大家有帮助,多提意见。近段时间项目很赶,很长时间没看书写博客了。赶项目赶得都麻木了,放松放松,偷偷懒,写写博客吧。

无限循环的ViewPager的更多相关文章

  1. android 无限循环的viewpager

    思路 例如存在 A -B -C 需要在viewpager滑动时无限循环 1.我们可以设计 C' A B C A'  C'与C相同,A'与A相同 2.滑动到A'时,则index回到1 3.滑动到C'时, ...

  2. [android] 轮播图-无限循环

    实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int ...

  3. 详细分析Android viewpager 无限循环滚动图片

    由于最近在忙于项目,就没时间更新博客了,于是趁着周日在房间把最近的在项目中遇到的技术总结下.最近在项目中要做一个在viewpager无限滚动图片的需求,其实百度一下有好多的例子,但是大部分虽然实现了, ...

  4. 一行代码引入 ViewPager 无限循环 + 页码显示

    (出处:http://www.cnblogs.com/linguanh) 前序: 网上的这类 ViewPager 很多,但是很多都不够好,体现在 bug多.对少页面不支持,例如1~2张图片.功能整合不 ...

  5. ViewPager,实现真正的无限循环(定时+手动)

    利用定时器,实现循环轮播,很简单:只需在定时器的消息里加如下代码即可: int count = adapter.getCount(); if (count > 1) { // 多于1个,才循环 ...

  6. 扩展ViewFlow避免和ViewPager滑动冲突,同时支持无限循环,并完美和CircleFlowIndicator结合

    首先,为了避免滑动冲突,我们要继承ViewFlow,重写onInterceptTouchEvent public class MyViewFlow extends ViewFlow { private ...

  7. 自定义完美的ViewPager 真正无限循环的轮播图

    网上80%的思路关于Android轮播图无限循环都是不正确的,不是真正意义上的无限循环, 其思路大多是将ViewPager的getCount方法返回值设置为Integer.MAX_VALUE, 然后呢 ...

  8. android 自定义无限循环播放的viewPager。轮播ViewPager。实现循环播放 广告,主题内容,活动,新闻内容时。

    前言 实际项目需要一个 播放广告的控件,可能有多个广告图片.每个一段时间更换该图片.简单来说,就是一个 “循环播放图片”的控件. 间隔时间更换图片 一般来说,图片切换时需要有动画效果 需要支持手势,用 ...

  9. ViewPager 无限循环

    Overview 我们在使用ViewPager来制作图片轮播的时候,常常为ViewPager不能一直无限循环的问题所苦恼.对于这个问题,目前从网上找到了两个思路来解决: 将 ViewPager 的Co ...

随机推荐

  1. MySQL UPDATE

    MySQL UPDATE 查询 如果我们需要修改或更新MySQL中的数据,我们可以使用 SQL UPDATE 命令来操作.. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用SQL语 ...

  2. js单条新闻向上滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  4. 【NEERC 2003】有向图破坏

    [题目描述] Alice和Bob正在玩如下的游戏.首先Alice画一个有N个顶点,M条边的有向图.然后Bob试着摧毁它.在一次操作中他可以找到图中的一个点,并且删除它所有的入边或所有的出边. Alic ...

  5. css命名为何不推荐使用下划线_

    一直习惯了在命名CSS样式名时使用下划线“_”做为单词的分隔符,这也是在写JS时惯用的写法. 用过CSS hack的朋友应该知道,用下划线命名也是一种hack,如使用“_style”这样的命名,可以让 ...

  6. 用Guava辅助Throwable异常处理

    Guava的 Throwables 工具常常可以让exception处理更方便. Propagation 有时候,你会想把捕获的exception抛到上一个try/catch块.对于 RuntimeE ...

  7. VBoxManage命令详解

    转自:http://zhang-ly520.iteye.com/blog/300606 由于最近工作对vbox有一定涉猎,发现这个写的比较好,先转来,稍有空时再根据自己的心得整理一下. VBoxMan ...

  8. 『重构--改善既有代码的设计』读书笔记----Split Temporary Variable

    继续开始我们重构手法的系列,今天介绍的是Split Temporary Variable---分解临时变量. 在我们平常写的程序中肯定有某些临时变量被赋予了超过一个的责任.如果他们不是那种收集结果(t ...

  9. js 求两个日期之间相差天数

    //求两个日期之间的相差天数 function daysBetween(DateOne, DateTwo) { var OneMonth = DateOne.substring(5, DateOne. ...

  10. css阴影

    文字阴影:text-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]... 区域阴影:box-shadow:[颜色 x轴 y轴 模糊半径],[颜色 x轴 y轴 模糊半径]. ...