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

需要做一个仿淘宝客户端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滑动到最后一张图片跳转的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • android ViewPager实现滑动翻页效果实例代码

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

  • Android 使用ViewPager实现图片左右循环滑动自动播放

    ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_

  • Android App中使用ViewPager+Fragment实现滑动切换效果

    在android应用中,多屏滑动是一种很常见的风格,没有采用viewpager的代码实现会很长,如果采用ViewPager,代码就会短很多,但是使用ViewPager也有弊端:需要导入android-support-v4.jar.细节无法控制.不过现在情况已经不一样了,android-support-v4中提供了很多实用的功能,以至于现在新建一个android工程默认都会导入这个jar包.那我们就也采用viewpager来做滑动吧.另外一个概念就是Fragment和FragmentActivit

  • Android利用ViewPager实现可滑动放大缩小画廊效果

    画廊在很多的App设计中都有,如下图所示: 该例子是我没事的时候写的一个小项目,具体源码地址请访问https://github.com/AlexSmille/YingMi. 该画廊类似封面的效果,滑到中间的图片会慢慢变大,离开的View会慢慢的缩小,同时可设置滑动监听和点击监听. 网上有很多例子都是通过Gallery实现的,而上例的实现是通过ViewPager实现,解决了性能优化的问题,今天特此把它抽出来,封装一下,以便以后的方便使用.最终实现的效果如下: 使用方式 布局中添加该自定义控件 <R

  • Android 修改viewpage滑动速度的实现代码

    1.自定义Scroller public class ViewPageFixedSpeedScroller extends Scroller { private int mDuration = 300; public ViewPageFixedSpeedScroller(Context context) { super(context); // TODO Auto-generated constructor stub } public ViewPageFixedSpeedScroller(Con

  • Android中Viewpager禁止滑动的实现

    前言 现在很多app,首页不允许滑动切换(因为页面加载吧),但是又用viewpage来管理frgament.因为方便嘛. 以前在网上找的例子: public class NoScrollViewPager extends ViewPager { public NoScrollViewPager(Context context, AttributeSet attrs) { super(context, attrs); } public NoScrollViewPager(Context conte

  • Android ViewPager无限循环实现底部小圆点动态滑动

    页面拖动到最后一页 再向下滑动回复到 第一页,第一页向前滑动回到 最后一页 同时,底部红色小圆点随着页面的滑动距离比例随时改变位置 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas

  • Android 利用ViewPager实现图片可以左右循环滑动效果附代码下载

    首先给大家展示靓照,对效果图感兴趣的朋友可以继续往下阅读哦. ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,上面是效果图,用美女图片是我一贯的作风,呵呵  1.    首先看一些layout下的xml <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width=&qu

  • Android开发之使用ViewPager实现图片左右滑动切换效果

    Android中图片的左右切换随处可见,今天我也试着查阅资料试着做了一下,挺简单的一个小Demo,却也发现了一些问题,话不多说,上代码~: 使用了3个xml文件作为ViewPager的滑动page,布局都是相同的,如下只展示其中之一: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android使用ViewPager实现无限滑动效果

    前言 其实仔细想一下原理还是挺简单的.无非是当我们滑动到最后一页,再向后滑动时定位到第一页;当我们滑动到第一页,再向前滑动时定位到最后一页. 但是,相信很多朋友都遇到过这个问题:视图的过度效果不自然. 小编也是通过百度和谷歌查找了很多解决方案,实验了很多方法,总结了一个相对不错的方法,接下来给各位分享下滑动效果.实现细节以及一些踩过的坑. 1.无限滑动效果(左右无限滑动) 事先准备好2张滑动图片(有想试验的小伙伴,自备图片啊,小编就不提供了...) 运行效果图(左右无限循环): 为了显示更加直观

  • Android viewpage实现禁止滑动的功能

    Android viewpage实现禁止滑动 由于最近做项目有一个Android viewpage实现禁止滑动这样的功能,开始觉得很是不好实现,但是项目经理分配的任务,客户需求啊,硬着头皮做出来了,这里记录下如何实现. 方法很简单   重写viewpager就可以了,现在将代码贴出. import Android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet;

随机推荐