在淘宝等电商的APP首页经常能看到大幅的广告位,通常有多幅经常更新的图片用于展示促销信息,如下图所示:

通常会自动滚动,也可以根据手势滑动。我没有研究过人家的APP是通过什么实现的,可能有第三方已经封装好的控件可以直接使用,也可能通过webview来实现,毕竟在网页上也有很多类似的内容。如果有高手经验丰富不妨指点一二。不管别人怎样,今天我准备自己动手做一个,其实也不是特别复杂的。

我主要使用的实现方法是Android自带的ViewPager控件,这个控件主要用于实现屏幕水平切换,有自带的动画效果。Android官网上有使用教程:http://developer.android.com/training/animation/screen-slide.html,当然下文会有相一致的说明。

然后就开始动手实现这个图片滑动效果吧。

1. 首先解释一下ViewPager的使用过程,通常来说ViewPager可以和Fragment结合起来用,每次ViewPager滑动,也就是展示一个新的Fragment。Fragment里面就是我们需要展现的内容。而这滑动的动画就交给ViewPager来实现。所以第一步我们需要设置好Fragment的内容,新建一个布局文件,这里只需要展示一张图即可,当然可以根据自己的需要进行改变:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><ImageViewandroid:id="@+id/iv_main_pic"android:layout_width="match_parent"android:layout_height="match_parent"android:contentDescription="@string/main_image"android:scaleType="fitXY" /></RelativeLayout>

2. 然后建立Fragment类。

import android.support.v4.app.Fragment;
......public class PictureSlideFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View v = inflater.inflate(R.layout.fragment_picture_slide, container, false);return v;}}

3. 在Activity布局文件的合适位置加入ViewPager控件。

        <android.support.v4.view.ViewPagerandroid:id="@+id/pager"android:layout_width="match_parent"android:layout_height="match_parent" />

4. 在Activity中得到这个ViewPager并且为其设置Adapter:

private ViewPager mPager;

@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mPager = (ViewPager) findViewById(R.id.pager);mPagerAdapter = new PictureSlidePagerAdapter(getSupportFragmentManager());mPager.setAdapter(mPagerAdapter);
}    

5. 这个Adapter继承自FragmentStatePagerAdapter,其中getCount()返回的值是一共需要显示的内容数,是个常数:

    private class PictureSlidePagerAdapter extends FragmentStatePagerAdapter {public PictureSlidePagerAdapter(FragmentManager fm) {super(fm);// TODO Auto-generated constructor stub
        }@Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn new PictureSlideFragment();}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn NUM_PIC;}}

6. 到目前为止所有的内容都和官方的教程一致。如果你在Fragment中的那个ImageView通过android:src属性设置图片,会实现数张静态图片滑动的效果。这离我们的目标还有一些区别:

(1)图片需要能够动态改变,而不是固定的内容;

(2)每张图片需要有点击的响应;

(3)一般情况下需要实现循环滚动,即滑到最后一张图时继续滑动会回到第一张图;

(4)图片要能够自动滚动;

(5)图片下方需要有显示第几张图的指示(小圆点)。

7. 接下来我们朝着目标继续努力。首先是图片的变化。观察上述Adapter的实现方法,可以发现getItem()方法每次返回的都是一个Fragment的实例,需要显示多少个Fragment这个方法就会执行多少遍。但我们发现每次创建新的Fragment都没有区别,直接new一个了事,因此我们需要改写这个创建新Fragment实例的方法,以实现每次新建的Fragment实例都不一样。在我们的Fragment类中补充如下内容:

    private int mIndex;public static PictureSlideFragment newInstance(int index) {PictureSlideFragment f = new PictureSlideFragment();Bundle args = new Bundle();args.putInt("index", index);f.setArguments(args);return f;}@Overridepublic void onCreate(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onCreate(savedInstanceState);mIndex = getArguments() != null ? getArguments().getInt("index") : 1;}

这个叫做newInstance的方法主要功能也是创建一个Fragment实例,和直接new的区别是传递进来一个index参数,这个参数在onCreate()方法中被获得。然后我们将Adapter的getItem()改写为如下:

        @Overridepublic Fragment getItem(int arg0) {// TODO Auto-generated method stubreturn PictureSlideFragment.newInstance(arg0);}

每次getItem都将Item的序号传递到新建的Fragment,然后再Fragment中根据需要设定不同的内容。真正实现的时候,可以在Fragment中加入从网络获取图片的操作。

8. 图片的点击响应。这个比较简单,在Fragment中获得ImageView控件,然后设置onClick监听器即可。就不给出代码了。

9. 图片的循环滚动。一般的ViewPager不能实现内容的循环滚动,即第一张向左滑或者最后一张向右滑都会到顶,显示到顶的效果。如果要从ViewPager自身入手加入这功能需要对这个控件进行改写,比较麻烦,这里我从stackoverflow上找到了一种比较聪明的办法。

  要实现几张图的循环滚动,其实只需要满足视觉效果就可以了。比如有三张图A,B,C,要实现A->B->C->A->B......以及C->B->A->C->B...这样的循环,实际上可以这样实现:

  提供5张图,分别是C'  A  B  C  A',其中C'和C,A'和A完全相同,当滑到C'时,自动切换到C,当滑到A'时,自动切换到A,并且这个切换过程没有动画,于是,使用者体验出来的感觉就是A B C三张图在循环滚动了。

  于是我们为ViewPager添加setOnPageChangeListener方法:

        mPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub
                }@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub
                }@Overridepublic void onPageScrollStateChanged(int state) {// 当到第一张时切换到倒数第二张,当到最后一张时切换到第二张if (state == ViewPager.SCROLL_STATE_IDLE) {int curr = mPager.getCurrentItem();int lastReal = mPager.getAdapter().getCount() - 2;if (curr == 0) {mPager.setCurrentItem(lastReal, false);} else if (curr > lastReal) {mPager.setCurrentItem(1, false);}}}});

覆写的onPageScrollStateChanged方法在滑动内容改变时调用,在其中实现C'和C,A'和A的切换。

10. 图片的自动滚动,这里我使用了timer启动线程来实现,定时器线程每隔5秒发送消息,UI线程捕获消息并调用ViewPager.setCurrentItem(currentItem+1, true)方法,滚动到下一张图片。代码就不赘述了。这里有个体验细节,就是当使用者用手指滑动时,定时器需要取消,防止自动滑动和手指滑动发生冲突。这个我在Fragment的ImageView的onTouchListener中实现:

        mMainImage.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event) {if (event.getAction() == MotionEvent.ACTION_DOWN) {((MainActivity)getActivity()).getTimer().cancel();} else if (event.getAction() == MotionEvent.ACTION_CANCEL) {((MainActivity)getActivity()).startSwitchImage();}return false;}});

11. 图片序号的指示,也就是图片下方的几个小圆点,这个实现比较简单,首先在Activity的布局文件中添加几个图片,因为这几个小圆点本身不能随ViewPager移动,因此不能放在Fragment布局中。切换内容也就是切换显示不同颜色小圆点的位置,这个方法同样可以在onPageScrollStateChanged方法中调用。注意一些细节,因为之前为了实现循环滚动而多用了两个Fragment,而显示的小圆点数量不能增加,因此需要调整好对应的序号。代码也不再赘述了。

  最终的效果如下图所示,美食有木有。总结一下,整个过程并不复杂,就是一些细节需要仔细推敲。虽然做法可能有非主流的地方,但实现的效果跟别人的几乎完全一致,这样就行啦~

  另外,这样的实现方法也不是完全没有值得改进的地方,比如图片自动滚动的延时还不能自定义。ViewPager没有现成的方法用来自改变自动滚动延时,如果需要自定义,就要自己改写这个控件啦,有兴趣的可以研究一下~

转载于:https://www.cnblogs.com/lcyty/p/3648679.html

[Android]使用ViewPager实现图片滑动展示相关推荐

  1. JavaScript 图片滑动展示效果javascript

    javascript 图片滑动展示效果 更新版本:slideview 图片滑动(扩展/收缩)展示效果 看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...

  2. Android使用ViewPager实现图片轮播和手势滑动

    ViewPager常用来实现图片的轮播,比如淘宝首页,会把一些促销的商品的图片和描述信息来回的播放,这就是典型的使用ViewPager实现的. ViewPager属于布局管理器,允许用户通过页面翻转查 ...

  3. [Android实例] ViewPager多页面滑动切换以及动画效果(精)

    一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式,白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了, ...

  4. Android仿今日头条图片滑动退出效果

    资源下载(2C币) 逛CSDN的时候,看到几篇写仿今日头条图片滑动退出效果的文章,闲着无聊便想着也给自己项目加上,实现的思路有很多种,本着就近原则选了一篇与自己思路相近的文章结合自己的实践总结一下. ...

  5. Android利用ViewPager实现图片浏览,解决内存问题

    在Android开发中,我们经常遇到利用Viewpager实现图片浏览的需求,这个很好实现,也没什么技术难点,但是最近我在实现这个功能的时候,遇到了一些问题,当图片数量稍微多点时,一直滑动浏览,会导致 ...

  6. Android禁止ViewPager的左右滑动

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/40744287 有时候在开发中会遇到一些"诡异"的要求,比方在V ...

  7. Android使用viewpager实现图片轮播效果

    自定义View实现图片轮播,实现了图片自动轮播,手动滑动,轮播标题,以及点击事件. 里面有很多注释 一.文件布局 二.代码 ImageBannerViewGroup类 /*** Created by ...

  8. Android之ViewPager实现图片无限循环轮播

    很久没有写博客了,之前花时间写了一个Viewpager实现的无限图片轮播,个人感觉还是很好用的QAQ,源码和思路都还算清晰 实现的效果图如下: 这里要补充一下,在这个项目中我把图片轮播写进了一个Vie ...

  9. 初学Android之viewPager+imageLoader+图片圆角(类似qq头像)+xListView+DrawLayout

    有adapter.application.bean.view这几个包 接下来就按照顺序去写一下 首先是adapter public class MyPagerAdapter extends Pager ...

最新文章

  1. 如何设计一个支撑数亿用户的系统
  2. Windows7 最重要的70个技巧和窍门
  3. 香帅的北大金融学课笔记 -- 金融学专题
  4. HttpClient v4.5 简单抓取主页数据
  5. Lync Server 2010的部署系列_第七章 部署边缘服务器(上)
  6. php 开启,PHP服务的开启详细步骤
  7. 怎样成为一名更优秀的程序员?我总结出 7 条建议
  8. mysql查询数据不变_mysql之delete删除记录后数据库大小不变
  9. 统计学硕士考计算机博士,统计学国家重点学科博士点硕士点最全博研堂考研究生.pdf...
  10. hostingEnvironment与宿主环境
  11. 【网络安全面试题】——文件目录穿越实现特权文件读取
  12. iphone-common-codes-ccteam源代码 CCCommon.h
  13. python zip函数小结
  14. shell一周学习心得
  15. windows关闭端口方法
  16. java String字符串去除()里的内容
  17. 18个最受欢迎的低代码开发平台【开源】
  18. java图片打包下载_java 批量下载图片,批量打包文件并下载
  19. 点击文件实现WPS工具预览功能
  20. 批量将多个 Excel 工作簿文件拆分成单个 Excel 工作簿文件

热门文章

  1. 文档容器iOS网络编程-iCloud文档存储编程实例
  2. android各个版本的名称和更新(转)
  3. group count聚集函数无法直接统计出分组后的总记录数
  4. IDEA 修改JavaWeb的访问路径
  5. 阿里巴巴旗下平台口碑推出无人收银技术,改造便利店市场;重庆法院运用 AI 探索“智能判案”...
  6. linux 用户创建、管理、权限分配
  7. linux新起之秀-linux文件属性
  8. event对象获取方法
  9. MySql创建一个存储过程
  10. 【翻译】Ext JS 4——Ajax和Rest代理处理服务器端一场和消息的方法