Android ViewPager无限循环滑动并可自动滚动完整实例

超、凢脫俗 2023-03-01 06:07 33阅读 0赞

对于ViewPager 广告页这个功能很多APP都有这个功能在网上也看过一些资料，我就在这把我自己完整的实现方法写出来吧

基础的ViewPager：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>&lt;?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"utf-8"</code><code>?&gt;</code> <code>&lt;</code><code>LinearLayout</code> <code>xmlns:android</code><code>=</code><code>"<a href="http://schemas.android.com/apk/res/android" rel="nofollow">http://schemas.android.com/apk/res/android</a>"</code> <code>&nbsp;&nbsp;</code><code>android:layout_width</code><code>=</code><code>"match_parent"</code> <code>&nbsp;&nbsp;</code><code>android:layout_height</code><code>=</code><code>"match_parent"</code> <code>&nbsp;&nbsp;</code><code>android:id</code><code>=</code><code>"@+id/top_item"</code> <code>&nbsp;&nbsp;</code><code>android:orientation</code><code>=</code><code>"vertical"</code><code>&gt;</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>android.support.v4.view.ViewPager</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>android:layout_width</code><code>=</code><code>"match_parent"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>android:layout_height</code><code>=</code><code>"180dp"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>android:id</code><code>=</code><code>"@+id/top_vp"</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&gt;&lt;/</code><code>android.support.v4.view.ViewPager</code><code>&gt;</code> &nbsp; <code>&lt;/</code><code>LinearLayout</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

很简单 仅仅是一个ViewPager

接下来简单的设置一下ViewPager的Adapter 添加ImageView

上述是最基础的一个ViewPager 下面我们就在这个基础上改造就可以了

**实现无限循环滑动：**

这里我事先循环滑动的方式很简单 就是把 adapter的count 设置为一个很大的值 这样 让它滑不到头 然后切换图片 就可以实现 虽然方法比较LOW 但是效果还是可以的

代码在基础的ViewPager下修改如下 ：

这样 之后就可以实现无限循环右滑了 但是在程序刚启动 是 无法向左滑动的 要解决 很简单 只需要在开始的时候

`viewPager.setCurrentItem(1000*imageViews.size());`

即可 这样 就可以 实现 无限左右滑了

**自动定时循环滑动：**

下面增加自动定时左右滑动的功能

要实现自动滑动 最主要的是 实现定时器功能我这里使用 Handler+Runnable的方法在上述代码的基础上 修改 如下：

这之后 就可以实现自动滑动了

**添加左下角圆形小按钮：**

接下来添加 左下角的导航小原点

首先 修改布局 :

我们需要的原点 要放在 LinearLayout布局中

主要原理 就是向这个LinearLayout中动态添加 小圆点 即可

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 </td> 
 <td> <code>public</code> <code>class</code> <code>MainActivity </code><code>extends</code> <code>AppCompatActivity { </code> &nbsp; <code>&nbsp;&nbsp;</code><code>private</code> <code>ViewPager topVp;</code> <code>&nbsp;&nbsp;</code><code>private</code> <code>int</code><code>[]images = </code><code>new</code> <code>int</code><code>[]{R.mipmap.ad0, R.mipmap.ad1, R.mipmap.ad3}; </code><code>//模拟存放要展示的图片</code> <code>&nbsp;&nbsp;</code><code>private</code> <code>List&lt;ImageView&gt; imageViews ;</code> <code>&nbsp;&nbsp;</code><code>private</code> <code>List&lt;TextView&gt; txtPoints;</code> <code>&nbsp;&nbsp;</code><code>private</code> <code>LinearLayout lin_points;</code> <code>&nbsp;&nbsp;</code><code>private</code> <code>Handler handler;</code> <code>&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;</code><code>protected</code> <code>void</code> <code>onCreate(Bundle savedInstanceState) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>.onCreate(savedInstanceState);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>setContentView(R.layout.activity_main);</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>lin_points = (LinearLayout) findViewById(R.id.lin_points);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>initImageViews();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>initVp();</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>initCircle();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>* 计时器</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>handler = new Handler();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>handler.postDelayed(new TimerRunnable(),5000);</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* 初始化小圆点</code> <code>&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;</code><code>private void initCircle() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txtPoints = new ArrayList&lt;&gt;();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>int d = 20;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>int m = 7;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for (int i = 0; i &lt; imageViews.size(); i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>TextView txt = new TextView(this);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (i == 0) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txt.setBackgroundResource(R.drawable.point_pink);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} else { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txt.setBackgroundResource(R.drawable.point_grey);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(d, d);</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>params.setMargins(m, m, m, m);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txt.setLayoutParams(params);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txtPoints.add(txt);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>lin_points.addView(txt);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>class TimerRunnable implements Runnable{ </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public void run() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>int curItem = topVp.getCurrentItem();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>topVp.setCurrentItem(curItem+1);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>changePoints((curItem+1)%imageViews.size());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if (handler!=null){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>handler.postDelayed(this,5000);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;</code><code>protected void onDestroy() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super.onDestroy();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>handler = null;</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>/**</code> <code>&nbsp;&nbsp;&nbsp;</code><code>* 初始化图片资源</code> <code>&nbsp;&nbsp;&nbsp;</code><code>*/</code> <code>&nbsp;&nbsp;</code><code>private</code> <code>void</code> <code>initImageViews() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageViews = </code><code>new</code> <code>ArrayList&lt;&gt;();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code><code>(</code><code>int</code> <code>i = </code><code>0</code><code>;i&lt;images.length;i++){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>ImageView imageView = </code><code>new</code> <code>ImageView(</code><code>this</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageView.setScaleType(ImageView.ScaleType.FIT_XY);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageView.setImageResource(images[i]);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>imageViews.add(imageView);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; &nbsp; <code>&nbsp;&nbsp;</code><code>private</code> <code>void</code> <code>initVp() { </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>topVp = (ViewPager) findViewById(R.id.top_vp);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>topVp.setAdapter(</code><code>new</code> <code>PagerAdapter() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>int</code> <code>getCount() { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return imageViews.size(); 修改如下</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>10000</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>boolean</code> <code>isViewFromObject(View view, Object object) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>view==object;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>void</code> <code>destroyItem(ViewGroup container, </code><code>int</code> <code>position, Object object) { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container.removeView(imageViews.get(position%imageViews.size())); 删除此句</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>Object instantiateItem(ViewGroup container, </code><code>int</code> <code>position) { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container.addView(imageViews.get(position));</code> <code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return imageViews.get(position); 修改如下</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>try</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>container.addView(imageViews.get(position%imageViews.size()));</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code><code>catch</code> <code>(Exception e){ </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>imageViews.get(position%imageViews.size());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>topVp.setCurrentItem(imageViews.size()*</code><code>1000</code><code>);</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>topVp.addOnPageChangeListener(</code><code>new</code> <code>ViewPager.OnPageChangeListener() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>void</code> <code>onPageScrolled(</code><code>int</code> <code>position, </code><code>float</code> <code>positionOffset, </code><code>int</code> <code>positionOffsetPixels) { </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>void</code> <code>onPageSelected(</code><code>int</code> <code>position) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>changePoints((position)%imageViews.size());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>@Override</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>public</code> <code>void</code> <code>onPageScrollStateChanged(</code><code>int</code> <code>state) { </code> &nbsp; <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>public</code> <code>void</code> <code>changePoints(</code><code>int</code> <code>pos) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(txtPoints != </code><code>null</code><code>) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for</code> <code>(</code><code>int</code> <code>i = </code><code>0</code><code>; i &lt; txtPoints.size(); i++) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code> <code>(pos == i) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txtPoints.get(i).setBackgroundResource(R.drawable.point_pink);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>else</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>txtPoints.get(i).setBackgroundResource(R.drawable.point_grey);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

给ViewPager添加切换动画：

`topVp.setPageTransformer(true,new CubeOutTransformer());`

调用 此行代码 可以添加 后面的TransFormer类 是自定义的过渡效果类

**控制ViewPager 自动切换的速度**

ViewPager自身的切换速度是写死的，我们无法修改，但是我们可以通过源码看到，ViewPager的切换速度是通过 Scroller类 控制的，而Scroller类中是可以设置过渡的时间的，因此 我们可以通过自己创建一个Scroller类 继承 Scroller 然后 通过反射 把ViewPager中的mScroller属性 设置成我们自己的可以设置时间的Scroller类即可

下面是代码：

反射修改ViewPager属性：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>try</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Field field = ViewPager.</code><code>class</code><code>.getDeclaredField(</code><code>"mScroller"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>field.setAccessible(</code><code>true</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>scroller = </code><code>new</code> <code>FixedSpeedScroller(getActivity());</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>scroller.setmDuration(</code><code>1000</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>field.set(topVp, scroller);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} </code><code>catch</code> <code>(Exception e) { </code> <code>//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; e.printStackTrace();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>System.out.println(</code><code>"aaaaaa错误啦"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

这样就可以控制速度了

好了，Android ViewPager广告页可无限循环滑动并可自动滚动带有小圆点的功能基本就实现了，具体参数大家可以自行设定