需要做一个仿淘宝客户端ViewPager滑动到最后一页,再拖动的时候跳到详情的功能,刚开始我也迷糊了,通过查阅相关资料发现有好多种实现方法,下面小编给大家分享实例代码,感兴趣的朋友一起看看吧

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@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具体的代码是怎么样的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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滑动到最后一张图片跳转的功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

原文链接:http://blog.csdn.net/wangkaichenjuan/article/details/62037947

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

  1. Android仿淘宝、京东Banner滑动查看图文详情

    文章目录 写在前面 效果图 原理分析 核心代码 源码地址 写在前面 本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...

  2. Android 仿淘宝详情视频图片混合轮播

    implementation 'com.github.bumptech.glide:glide:4.11.0' implementation 'androidx.recyclerview:recycl ...

  3. swiper 仿淘宝详情页面 视频图片切换

    1.好兄弟,看一下是否是你需要的 2.废话不多说 直接上代码,复制粘贴一下 自己引用一下swiper.js和css 然后就可以开始玩儿了 <!DOCTYPE html> <html& ...

  4. uniapp仿淘宝详情页页面滑动tab切换

    uniapp仿淘宝详情页页面滑动tab切换 建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...

  5. 自定义View之仿淘宝详情页

    自定义View之仿淘宝详情页 转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...

  6. 仿淘宝详情页 直接上代码

    仿淘宝详情页 直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...

  7. Android模仿淘宝详情页界面

    话不多说-先上效果图: 图1中主要需要实现的效果: 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 Android模仿淘宝详情页界面文件:url80. ...

  8. Android仿淘宝首页UI(附代源代码及示例图片)

    Android仿淘宝首页UI(附代源代码及示例图片) 可以收获 运行出来的效果 部分代码 源代码 可以收获 更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...

  9. Android仿淘宝淘口令实现

    先复制信息到剪切板,然后再打开淘宝,.既然是复制,肯定是复制到系统的剪切板了,我们可以通过下边的代码来把口令给复制到系统的剪切板里 1 2 3 4 5 6 //获取剪贴板管理器: ClipboardM ...

最新文章

  1. 一文读懂产业互联网的前世今生!
  2. [转]移动应用统一化的谎言:一次编译,到处运行不可能
  3. Centos-挂载和卸载分区-mount
  4. java 不存在就创建_Java 判断多级路径是否存在,不存在就创建
  5. android 获取通讯录全选反选_Xamarin.Forms读取并展示Android和iOS通讯录 TerminalMACS客户端...
  6. stm32倒计时秒表proteus_单片机课程设计倒计时秒表教程文件
  7. Cisco 2960密码恢复
  8. 3.1 Zabbix企业级分布式监控系统 --- zabbix 安装
  9. linux内核移植imx8,iMX8模块Ubuntu移植
  10. Linux 串口termios.h分析
  11. 对比7种分布式事务方案,还是偏爱阿里开源的Seata,真香!(原理+实战)
  12. “打印机安装失败,请检查打印服务”问题解决方案
  13. 使用MATLAB计算个人所得税
  14. matlab中提取公因子化简,利用MATLAB化简表达式或者多项式 | 望天博客
  15. Python+KinectV2——PyKinect
  16. 电脑开不了机启动不了|开机黑屏只有光标再闪
  17. kaldi - Online Audio Server(服务器客户端建立方法-旧版在线解码)
  18. nginx安装教程(centos系统)
  19. Java程序设计基础【4】
  20. 在IntelliJ IDEA中,开发一个摸鱼看书插件

热门文章

  1. IDB数据桥提供方用oracle,WinCC与第三方系统数据交互IndustrialDataBridge(54页)-原创力文档...
  2. 红楼梦人物出场顺序统计
  3. 计算机win7卡顿如何解决方法,win7电脑玩2D游戏经常发生卡顿六大解决方法
  4. 同步机构应遵循哪些基本准则
  5. 密码学系列(一):密码行业、政策介绍
  6. Dice Loss与mIoU
  7. java图片上传同时后台直接给MultipartFile对象添加图片水印或者文字水印,然后直接上传带水印的图片
  8. linux7怎么进桌面,CentOs7无法进入桌面系统怎么办?
  9. Game Plug-ins(1)
  10. cisco ios enable password与enable secret设置详解