Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能

所属分类: 软件编程 / Android 阅读数: 29
收藏 0 赞 0 分享

需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始没什么思路,后来搜了一下,发现有好几种实现方法,最好的一种就是在ViewPager图片的后面再加一个view,然后滑动viewpager的时候,判断一下就行了。
附一个链接,我写的代码就是参考的这个,稍微改了一点点,先看看效果图。

实现起来比较简单,先写一个滑动加载详情的布局,然后在viewpager的instantiateItem里面判断一下,如果是最后一张,就显示加载详情的那个布局。不过需要注意的是,viewpager的getCount()返回的是list.size()+1,因为多了一个布局。
下面看看代码里面的几个方法。

在PagerAdapter的instantiateItem里面加载布局,判断一下position,如果小于图片数组,就是图片布局,如果大于了数组的长度(为什么会大于,因为前面已经说了,getCount返回的+1了的),就返回那个滑动跳转的布局。

@Override 
public Object instantiateItem(ViewGroup container, int position) { 
 if (position < images.length) { 
  ImageView imageView = new ImageView(MainActivity.this); 
  ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dip2px(300)); 
  imageView.setLayoutParams(lp); 
  imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
  imageView.setImageResource(images[position]); 
  container.addView(imageView); 
  return imageView; 
 } else { 
  View hintView = LayoutInflater.from(container.getContext()).inflate(R.layout.more_view, container, false); 
  slideText = (TextView) hintView.findViewById(R.id.tv); 
  arrowImage = (ImageView) hintView.findViewById(R.id.iv); 
  container.addView(hintView); 
  return hintView; 
 } 
} 

 只要这样写了,就可以看到一个大概的效果了,然后主要就是viewp的OnPageChangeListener里面的东西了。主要思路就是,当在最后一张图片时,只要再次往左滑动,滑动到一定距离,就触发跳转的事件,然后,只要是在最后一张图片,是在向左滑动,松开手时,都要让viewpager选中最后一张图片那里,不能是滑动到了新加的那个布局去了。

在看看ViewPager.OnPageChangeListener具体的代码是怎么样的。

public class ViewPagerOnPageChangeListener implements ViewPager.OnPageChangeListener { 
  int currPosition = 0; // 当前滑动到了哪一页 
  boolean canJump = false; 
  boolean canLeft = true; 
  boolean isObjAnmatitor = true; 
  boolean isObjAnmatitor2 = false; 
  @Override 
  public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 
   if (position == (images.length-1)) { 
    if (positionOffset > 0.35) { 
     canJump = true; 
     if (imageAdapter.arrowImage != null && imageAdapter.slideText != null) { 
      if (isObjAnmatitor) { 
       isObjAnmatitor = false; 
       ObjectAnimator animator = ObjectAnimator.ofFloat(imageAdapter.arrowImage, "rotation", 0f, 180f); 
       animator.addListener(new AnimatorListenerAdapter() { 
        @Override 
        public void onAnimationEnd(Animator animation) { 
         super.onAnimationEnd(animation); 
         imageAdapter.slideText.setText("松开跳到详情"); 
         isObjAnmatitor2 = true; 
        } 
       }); 
       animator.setDuration(500).start(); 
      } 
     } 
    } else if (positionOffset <= 0.35 && positionOffset > 0) { 
     canJump = false; 
     if (imageAdapter.arrowImage != null && imageAdapter.slideText != null) { 
      if (isObjAnmatitor2) { 
       isObjAnmatitor2 = false; 
       ObjectAnimator animator = ObjectAnimator.ofFloat(imageAdapter.arrowImage, "rotation", 180f, 360f); 
       animator.addListener(new AnimatorListenerAdapter() { 
        @Override 
        public void onAnimationEnd(Animator animation) { 
         super.onAnimationEnd(animation); 
         imageAdapter.slideText.setText("继续滑动跳到详情"); 
         isObjAnmatitor = true; 
        } 
       }); 
       animator.setDuration(500).start(); 
      } 
     } 
    } 
    canLeft = false; 
   } else { 
    canLeft = true; 
   } 
  } 
  @Override 
  public void onPageSelected(int position) { 
   currPosition = position; 
  } 
  @Override 
  public void onPageScrollStateChanged(int state) { 
   if (currPosition == (images.length-1) && !canLeft) { 
    if (state == ViewPager.SCROLL_STATE_SETTLING) { 
     if (canJump) { 
      Toast.makeText(MainActivity.this, "跳转啦", Toast.LENGTH_SHORT).show(); 
     } 
     new Handler().post(new Runnable() { 
      @Override 
      public void run() { 
       // 在handler里调用setCurrentItem才有效 
       viewPager.setCurrentItem(images.length-1); 
      } 
     }); 
    } 
   } 
  } 
 } 

 逻辑不算复杂,主要是OnPageChangeListener里面三个方法加的一些判断。

看到参考的那篇文章里面评论很多人在要源码,我在这里把我写的分享一下,欢迎大家指导。源码下载

另外还有一个比较好的viewpager效果就是,同时显示三个item,然后滑动到最后一个图片时,让那个向左滑的小箭头露出了,让用户知道这个viewpager还可以继续滑动,体验稍微好一点。

这个效果实现起来也非常简单,只需要设置viewpager的marginRight和marginLeft,然后给viewpager和它的父控件加上Android:clipChildren="false"就行了。

以上所述是小编给大家介绍的Android仿淘宝详情页面viewPager滑动到最后一张图片跳转的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

更多精彩内容其他人还在看

老生常谈Android HapticFeedback(震动反馈)

下面小编就为大家带来一篇老生常谈Android HapticFeedback(震动反馈)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详谈OnTouchListener与OnGestureListener的区别

下面小编就为大家带来一篇详谈OnTouchListener与OnGestureListener的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android仿知乎悬浮功能按钮FloatingActionButton效果

前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,下面通过本文给大家分享adroid仿知乎悬浮功能按钮FloatingActionButton效果,需要的朋友参考下吧
收藏 0 赞 0 分享

解决Android V7后自定义Toolbar、ActionBar左侧有空白问题

这篇文章主要介绍的Android V7后自定义Toolbar、ActionBar左侧有空白问题的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android常见控件使用详解

这篇文章主要为大家详细介绍了Android常见控件的使用方法,包括ProgressBar进度条控件、AlertDialog对话框控件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android实现简洁的APP更新dialog数字进度条

这篇文章主要为大家详细介绍了Android实现简洁的APP更新dialog数字进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 判断当前语言环境是否是中文环境

本文主要介绍了Android 判断当前语言环境是否是中文环境的方法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

详谈Android中Matrix的set、pre、post的区别

下面小编就为大家带来一篇详谈Android中Matrix的set、pre、post的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现登录界面记住密码的存储

这篇文章主要为大家详细介绍了Android SharedPreferrences实现登录界面记住密码的存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 使用SharedPreferrences储存密码登录界面记住密码功能

Android存储方式有很多种,在这里所用的存储方式是SharedPreferrences, 其采用了Map数据结构来存储数据,以键值的方式存储,可以简单的读取与写入,下面通过实例代码给大家讲解下,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多