ViewPager实现图片自动轮播无限循环(完美流畅版)
来源:互联网 发布:新型网络诈骗手段莆田 编辑:程序博客网 时间:2024/05/17 22:20
Viewpager图片自动轮播无限循环是Android开发中经常用到的功能,功能实现起来也比较简单。虽然如此,但是很多情况下做出来的效果并不太让人满意,甚至有些上线的项目自动轮播上也会出现一些bug。比如切换过程中出现空白页面,有些甚至在滑动过程中造成程序崩溃。本篇文章将实现ViewPager图片自动轮播无限循环,而且页面切换效果非常流畅。
还是先看效果图:
页面循环切换最容易出现问题的地方就是在最后一页向第一页切换或者第一页向最后一页切换时,在这个切换过程中很容易出现空白页面。怎么解决这个问题?
下面说下本程序的实现的思路。在第一张图片前和最后一张图片后分别添加一个ImageView,最前边的ImageView背景设置为最后一张图片,最后一个ImageView背景设置第一张图片。当我们判断滑动到最后一个ImageView时则设置ViewPager.setCurrentItem(1),让其自动切换到第一张图片,这样在从最后一页切换到第一页时由于图片是用的同一张图片,所以就会使切换效果显得很流畅自然。同理,当滑动到第0个ImageView时用ViewPager.setCurrentItem(length)自动切换到倒数第二张图片,第0个ImageView和倒数第二个ImageView图片相同,这样就使滑动效果显得很自然。
看下代码实现:
下面为初始化控件的方法,其中有一个LinearLayout是包含五个小圆点的布局,在后边的代码中可以通过判断图片的张数,动态的添加小圆点。
private void initView() { mViewPager= (ViewPager) findViewById(R.id.vp_main); mLinearLayoutDot= (LinearLayout) findViewById(R.id.ll_main_dot); }
初始化数据的方法,mImageViewList为存放图片的ImageView的集合,
mImageViewDotList为存放小圆点的ImageView的集合。images是一个整形数组,里边存放了ViewPager的五张图片。下边的for循环是为了动态的创建ImageView,之所以循环images.length+2次是因为我们在前后各加了一个ImageView。
private void initData() { mImageViewList=new ArrayList<>(); mImageViewDotList=new ArrayList(); ImageView imageView; for(int i=0;i<images.length+2;i++){ if(i==0){ //判断当i=0时为该处的ImageView设置最后一张图片作为背景 imageView=new ImageView(this); imageView.setBackgroundResource(images[images.length-1]); mImageViewList.add(imageView); }else if(i==images.length+1){ //判断当i=images.length+1时为该处的ImageView设置第一张图片作为背景 imageView=new ImageView(this); imageView.setBackgroundResource(images[0]); mImageViewList.add(imageView); }else{ //其他情况则为ImageView设置images[i-1]的图片作为背景 imageView=new ImageView(this); imageView.setBackgroundResource(images[i-1]); mImageViewList.add(imageView); } } }
动态的添加小圆点,共有images.length个页面,因此应该添加images.length个小圆点
// 设置轮播小圆点 private void setDot() { // 设置LinearLayout的子控件的宽高,这里单位是像素。 LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(15,15); params.rightMargin=20; // for循环创建images.length个ImageView(小圆点) for(int i=0;i<images.length;i++){ ImageView imageViewDot=new ImageView(this); imageViewDot.setLayoutParams(params); // 设置小圆点的背景为暗红图片 imageViewDot.setBackgroundResource(R.drawable.red_dot_night); mLinearLayoutDot.addView(imageViewDot); mImageViewDotList.add(imageViewDot); } //设置第一个小圆点图片背景为红色 mImageViewDotList.get(dotPosition).setBackgroundResource(R.drawable.red_dot); }
设置ViewPager,并为ViewPager设置页面切换的监听事件。
private void setViewPager() { MyPagerAdapter adapter=new MyPagerAdapter(mImageViewList); mViewPager.setAdapter(adapter); mViewPager.setCurrentItem(currentPosition); //页面改变监听 mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if(position==0){ //判断当切换到第0个页面时把currentPosition设置为images.length,即倒数第二个位置,小圆点位置为length-1 currentPosition=images.length; dotPosition=images.length-1; }else if(position==images.length+1){ //当切换到最后一个页面时currentPosition设置为第一个位置,小圆点位置为0 currentPosition=1; dotPosition=0; }else{ currentPosition=position; dotPosition=position-1; } // 把之前的小圆点设置背景为暗红,当前小圆点设置为红色 mImageViewDotList.get(prePosition).setBackgroundResource(R.drawable.red_dot_night); mImageViewDotList.get(dotPosition).setBackgroundResource(R.drawable.red_dot); prePosition=dotPosition; } @Override public void onPageScrollStateChanged(int state) { //当state为SCROLL_STATE_IDLE即没有滑动的状态时切换页面 if(state==ViewPager.SCROLL_STATE_IDLE){ mViewPager.setCurrentItem(currentPosition,false); } } }); }
用Handler控制页面每隔3秒自动切换
// 设置自动播放 private void autoPlay() { new Thread(){ @Override public void run() { super.run(); while(true){ SystemClock.sleep(3000); currentPosition++; handler.sendEmptyMessage(1); } } }.start(); }
Handler handler=new Handler(){ @Override public void handleMessage(Message msg) { super.handleMessage(msg); if(msg.what==1){ mViewPager.setCurrentItem(currentPosition,false); } } };
源码下载:http://download.csdn.net/detail/qq_20521573/9586986
- ViewPager实现图片自动轮播无限循环(完美流畅版)
- ViewPager实现图片的自动轮播和无限循环
- ViewPager图片无限自动轮播
- ViewPager实现无限自动轮播
- ViewPager无限自动轮播
- ViewPager无限自动轮播
- ViewPager 实现图片自动轮播
- Viewpager实现图片自动轮播
- ViewPager实现自动轮播图片
- android viewPager网络加载图片无限自动轮播
- ViewPager 无限轮播 自动轮播
- ViewPager 无限轮播自动轮播
- Android使用ViewPager实现图片轮播(高度自适应,左右循环,自动轮播)
- Viewpager图片自动轮播
- ViewPager图片自动轮播
- ViewPager图片自动轮播
- 自定义通用viewpager(左右无限滑动,自动轮播)
- ViewPager无限自动轮播+动画
- Android UI系列-----长度单位和内外边距
- GitHub 中国区前 100 名到底是什么样的人?
- org.apache.ibatis.builder.IncompleteElementException: Could not find result map
- 图片间有空隙的解决方法
- 在 Laravel 5 中集成 Pjax 实现无刷新加载页面的扩展包 —— Laravel Pjax
- ViewPager实现图片自动轮播无限循环(完美流畅版)
- 合并(序列)流
- 糍粑大叔的独游之旅-u3d中2D轮廓的生成(中)
- Android自定义SurfaceView——实现画板功能
- Spark源码解读(3)——从集群启动到Job提交
- Emag eht htiw Em Pleh
- C#的枚举转换、应用例子
- Python机器视觉编程常用数据结构与示例
- SpringBoot的常用系统变量