Android仿淘宝详情页面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滑动到最后一张图片跳转的功能相关推荐
- Android仿淘宝、京东Banner滑动查看图文详情
文章目录 写在前面 效果图 原理分析 核心代码 源码地址 写在前面 本文基于 ViewPager2 实现的 Banner 效果,进而实现了仿淘宝.京东Banner滑动至最后一页时继续滑动来查看图文详情 ...
- Android 仿淘宝详情视频图片混合轮播
implementation 'com.github.bumptech.glide:glide:4.11.0' implementation 'androidx.recyclerview:recycl ...
- swiper 仿淘宝详情页面 视频图片切换
1.好兄弟,看一下是否是你需要的 2.废话不多说 直接上代码,复制粘贴一下 自己引用一下swiper.js和css 然后就可以开始玩儿了 <!DOCTYPE html> <html& ...
- uniapp仿淘宝详情页页面滑动tab切换
uniapp仿淘宝详情页页面滑动tab切换 建立util文件夹放一个Tool.js: export default{getRect(selector){return new Promise((reso ...
- 自定义View之仿淘宝详情页
自定义View之仿淘宝详情页 转载请标明出处: http://blog.csdn.net/lisdye2/article/details/52353071 本文出自:[Alex_MaHao的博客] 项 ...
- 仿淘宝详情页 直接上代码
仿淘宝详情页 直接上代码 package com.example.liketitledemo;import android.content.Context; import android.graphi ...
- Android模仿淘宝详情页界面
话不多说-先上效果图: 图1中主要需要实现的效果: 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 Android模仿淘宝详情页界面文件:url80. ...
- Android仿淘宝首页UI(附代源代码及示例图片)
Android仿淘宝首页UI(附代源代码及示例图片) 可以收获 运行出来的效果 部分代码 源代码 可以收获 更改Layout中的文字和drawble中的图片即可生成适应于不同情景的APP,帮助开发者完 ...
- Android仿淘宝淘口令实现
先复制信息到剪切板,然后再打开淘宝,.既然是复制,肯定是复制到系统的剪切板了,我们可以通过下边的代码来把口令给复制到系统的剪切板里 1 2 3 4 5 6 //获取剪贴板管理器: ClipboardM ...
最新文章
- 一文读懂产业互联网的前世今生!
- [转]移动应用统一化的谎言:一次编译,到处运行不可能
- Centos-挂载和卸载分区-mount
- java 不存在就创建_Java 判断多级路径是否存在,不存在就创建
- android 获取通讯录全选反选_Xamarin.Forms读取并展示Android和iOS通讯录 TerminalMACS客户端...
- stm32倒计时秒表proteus_单片机课程设计倒计时秒表教程文件
- Cisco 2960密码恢复
- 3.1 Zabbix企业级分布式监控系统 --- zabbix 安装
- linux内核移植imx8,iMX8模块Ubuntu移植
- Linux 串口termios.h分析
- 对比7种分布式事务方案,还是偏爱阿里开源的Seata,真香!(原理+实战)
- “打印机安装失败,请检查打印服务”问题解决方案
- 使用MATLAB计算个人所得税
- matlab中提取公因子化简,利用MATLAB化简表达式或者多项式 | 望天博客
- Python+KinectV2——PyKinect
- 电脑开不了机启动不了|开机黑屏只有光标再闪
- kaldi - Online Audio Server(服务器客户端建立方法-旧版在线解码)
- nginx安装教程(centos系统)
- Java程序设计基础【4】
- 在IntelliJ IDEA中,开发一个摸鱼看书插件
热门文章
- IDB数据桥提供方用oracle,WinCC与第三方系统数据交互IndustrialDataBridge(54页)-原创力文档...
- 红楼梦人物出场顺序统计
- 计算机win7卡顿如何解决方法,win7电脑玩2D游戏经常发生卡顿六大解决方法
- 同步机构应遵循哪些基本准则
- 密码学系列(一):密码行业、政策介绍
- Dice Loss与mIoU
- java图片上传同时后台直接给MultipartFile对象添加图片水印或者文字水印,然后直接上传带水印的图片
- linux7怎么进桌面,CentOs7无法进入桌面系统怎么办?
- Game Plug-ins(1)
- cisco ios enable password与enable secret设置详解