android开发游记：广告轮播器无限循环滚动 首尾无缝切换解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

1. 使用方法
2. 实现原理
   1. 源码分析

图片轮播器在现在的应用中已经很常见了，已经形成了一种新型的广告展示的标准，网上有很多实现的源码，但是使用之后发现多少是继承viewpager来实现，并没有处理好从最后一页到第一页的切换效果，viewpager本身也没有提供无限循环滚动的功能，那就只能自己实现了，这里我使用了一些网上的源码（感谢wpy的分享），处理了一些滑动问题并封装成一个控件方便使用，效果图如下：

使用方法

下载library库项目，导入工程并关联 ：

library_cycleviewpager下载地址

在布局文件中添加：

<code class="hljs avrasm has-numbering"><<span class="hljs-keyword">com</span><span class="hljs-preprocessor">.wpy</span><span class="hljs-preprocessor">.circleviewpager</span><span class="hljs-preprocessor">.widget</span><span class="hljs-preprocessor">.CycleView</span>        android:id=<span class="hljs-string">"@+id/cycleView"</span>        android:layout_width=<span class="hljs-string">"match_parent"</span>        android:layout_height=<span class="hljs-string">"150dp"</span>        app:scaleType=<span class="hljs-string">"centerCrop"</span>        app:myshape=<span class="hljs-string">"oval"</span>        app:myselected_color=<span class="hljs-string">"#ffffff"</span>        app:myunselected_color=<span class="hljs-string">"#33000000"</span>/></code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><div class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

其中scaleType可选，默认centerCrop
myshape可选，是小点点的形状，默认是oval（圆形）
myselected_color 和 myunselected_color，是选中和未选中状态的颜色，没有设置的话有个默认色
还可以使用 myselected_drawable 和 myunselected_drawable 来使用图片来替代小点点
使用了图片的方式，则上面设置的点点形状和颜色属性就无效了

然后在java代码中调用setItems初始化控件：

<code class="hljs java has-numbering">    CycleView cycleView = (CycleView) findViewById(R.id.cycleView);    <span class="hljs-keyword">int</span>[] imgs = <span class="hljs-keyword">new</span> <span class="hljs-keyword">int</span>[]{R.drawable.banner1, R.drawable.banner2, R.drawable.banner3, R.drawable.banner4};    cycleView.setItems(imgs , getSupportFragmentManager(), <span class="hljs-keyword">new</span> CycleView.OnItemClickListener() {        <span class="hljs-annotation">@Override</span>        <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onItemClick</span>(<span class="hljs-keyword">int</span> position) {            Log.d(<span class="hljs-string">"liao"</span>, position + <span class="hljs-string">""</span>);        }        <span class="hljs-annotation">@Override</span>        <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onLoadImage</span>(ImageView imageView,String url) {        }    });</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul><div class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

setItems第一个参数是图片的集合，这里是本地图片所以保持的是资源id int[]，如果是网络图片传入url的集合就可以了：

<code class="hljs r has-numbering">String[] imgs = new String[]{<span class="hljs-string">"http://.../1.jpg"</span>,<span class="hljs-string">"http://.../2.jpg"</span>};cycleView.setItems(imgs, getSupportFragmentManager(), new CycleView.OnItemClickListener() {<span class="hljs-keyword">...</span>});</code><ul class="pre-numbering"><li>1</li><li>2</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

轮播器没有内置网络图片加载的功能，主要是由于不同的项目使用的加载组件都不一致，所有提供一个listener，自行实现其中的onLoadImage方法来使用自己的加载组件来加载图片，如示例使用的是xutils3的加载方式：

<code class="hljs java has-numbering">        cycleView.setItems(imgs, getSupportFragmentManager(), <span class="hljs-keyword">new</span> CycleView.OnItemClickListener() {            <span class="hljs-annotation">@Override</span>            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onItemClick</span>(<span class="hljs-keyword">int</span> position) {            }            <span class="hljs-annotation">@Override</span>            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onLoadImage</span>(ImageView imageView,String url) {                x.image().bind(imageView, url, <span class="hljs-keyword">new</span> ImageOptions.Builder().build());            }        });</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul><div class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

由于封装成控件，使用方式很简单。

接下来简单了解下实现原理，不想了解的可以跳过了：

实现原理

该示例也是使用viewPager来实现的轮播效果，其实每一个轮播页面都是一个fragment，只是这个fragment种只有1个ImageView，如果有更多需要展示的东西，比如概要文字，可以在fragment中自行添加处理。这个组件主要处理的问题就是第一页左滑回到最后一页和最后一页右滑回到第一页时候的动画效果的处理，下面看张图：

原理如下：假设你的轮播器有1、2、3 这3张图，其实初始化的时候给你生成了5个页面，前后各多生成了一张过度页。最后的追加页(绿1)使用的是第一页(红1)的页面，前面的追加页(绿3)使用的是最后一页(红3)的页面。这样用户在从红3继续往后滑动的时候，其实是滑动到了绿1，然后在滑动结束后的一瞬间页面切换到红1，由于绿1和红1使用的是同一个页面所以切换的时候是看不到效果的。这就隐藏地从最后一页过渡到了第一页，从第一页往前滑也是一样的道理。

看一下library的工程目录：

其中Adapter、Indicator、Listener包下是处理滑动和小点点的源码，widget包下是我拓展的轮播控件CycleView，使用了fragment+viewPager的方式，用户可以自行修改。

解释下，源码中比较重要的地方：

源码分析：

在内置viewPager的Adapter中(BaseCycleFragmentStatePagerAdapter)，重写getCount方法，多追加2个页面：

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> <span class="hljs-title">getCount</span>() {        <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> itemsSize = mItems.size();        <span class="hljs-keyword">return</span> itemsSize > <span class="hljs-number">1</span> ? itemsSize + <span class="hljs-number">2</span> : itemsSize;    }</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><div class="save_code tracking-ad" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

在获取页面的getItem方法中为追加的2个页面分别返回最后一页和第一页相同的页面：

<code class="hljs cs has-numbering">    @Override    <span class="hljs-keyword">public</span> Fragment <span class="hljs-title">getItem</span>(final <span class="hljs-keyword">int</span> position) {        final <span class="hljs-keyword">int</span> itemsSize = mItems.size();        <span class="hljs-keyword">if</span> (position == <span class="hljs-number">0</span>) {            <span class="hljs-keyword">return</span> getItemFragment(mItems.<span class="hljs-keyword">get</span>(itemsSize - <span class="hljs-number">1</span>), (itemsSize - <span class="hljs-number">1</span>));        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (position == itemsSize + <span class="hljs-number">1</span>) {            <span class="hljs-keyword">return</span> getItemFragment(mItems.<span class="hljs-keyword">get</span>(<span class="hljs-number">0</span>), <span class="hljs-number">0</span>);        } <span class="hljs-keyword">else</span> {            <span class="hljs-keyword">return</span> getItemFragment(mItems.<span class="hljs-keyword">get</span>(position - <span class="hljs-number">1</span>), (position - <span class="hljs-number">1</span>));        }    }</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><div class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

为ViewPager内置了一个滑动监听BaseCyclePageChangeListener，重写onPageScrollStateChanged方法，在发现页面从滚动结束的时候，判断其位置，如果是从末到首或者从首到末页则进行页面的假切换：

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onPageScrollStateChanged</span>(<span class="hljs-keyword">int</span> state) {        callOnPageScrollStateChanged(state);        <span class="hljs-keyword">if</span> (state == ViewPager.SCROLL_STATE_IDLE){            handleSetCurrentItem(mViewPager.getCurrentItem());        }    }    <span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">handleSetCurrentItem</span>(<span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> position) {        <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> lastPosition = mViewPager.getAdapter().getCount() - <span class="hljs-number">1</span>;        <span class="hljs-keyword">if</span> (position == <span class="hljs-number">0</span>) {            mViewPager.setCurrentItem(lastPosition == <span class="hljs-number">0</span> ? <span class="hljs-number">0</span> : lastPosition - <span class="hljs-number">1</span>, <span class="hljs-keyword">false</span>);        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (position == lastPosition) {            mViewPager.setCurrentItem(<span class="hljs-number">1</span>, <span class="hljs-keyword">false</span>);        }    }</code><ul class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul><div class="save_code tracking-ad" style="display: none;" data-mod="popu_249"><a target=_blank target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets.png" alt="" /></a></div>

核心代码就这么多，其实实现很简单。

觉得不错的话，下面有个顶可以点一下：)