Android - 小红书优化 - 仿小红书滑动列表中双指触摸缩放图片的效果

开发者 2024-9-6 15:02:10 46 0 来自 中国
一、小红书缩放图片效果


       效果:在列表上双指触摸某个ImageView后,可直接对其举行手势缩放的效果,而且缩放的View可全屏延伸至状态栏,相比先点击图片进入大图页再对图片举行双指缩放的流程更加直接高效。如下视频效果:

小红书


但通过以上视频可发现小红书一些非常交互题目:
1. 缩放中心不是触摸时两指中心,而是图片中心,达不到指哪缩哪的效果;
2. 松开双指,半透明配景没有随图片缩小而变透明,而是图片缩放到正常巨细后突现变为透明;
3. 松开双指,图片缩放到正常巨细时,(大概率)偶现忽然变黑闪一下;
4. 双指缩放图片图片的过程中,配景下层还能触发触摸效果(如点底层头像会进个人页)。
5. 不能缩放视频或其他View
以上题目给小红书连续反馈了1年多不停没有得到办理,以是索性自己高仿一个,而且已经在公司数百万DAU的项目中上线验证过,有须要的可放心拿去用。
二、仿照的效果


小红书优化
1.双指触摸可指哪缩哪,缩放中心点为触摸时双指中心点,而非图片中心点;
2.支持缩放任何View(将要缩放的View放在TouchToScaleLayout即可);
3.松开双指,半透明配景随回弹动画渐渐变透明;
三、干系代码

Github链接:https://github.com/axkza/TouchToScaleLayout
APK所在:https://xkz-1252121784.cos.ap-chengdu.myqcloud.com/TouchToScaleLayout.apk
用法:在须要双指触摸缩放的View外层嵌套TouchToScaleLayout即可,结构如下:
1.png 四、实现思路

以上代码非常简单,下面就大概讲一下思路:
怎样将列表中触摸到的View表现到列表的上层,而且可以拖动延伸到状态栏?
双指触摸该View时:
- 记载该View的宽高并通过getLocationOnScreen() 获取其相对屏幕极点的top和left,用于确定View的位置;
- 将该View从父结构中removeView;
- new一个陶醉式的dialog,团结上面获取到的宽高和top、left,将该View addView到Dialog中表现;(也可addView到DecorView中,都是为了是能将该View平移的表现到本来UI的上层,而且可延伸到状态栏的效果)
怎样实现指哪缩哪的效果?
1.双指触摸该View时:
- 记载【初次触摸时双指距离】、【初次触摸屏幕时两指中心点的x坐标】、【初次触摸屏幕时两指中心点的y坐标】


2.ACTION_MOVE时:
盘算以下数值,用于缩放和位移,到达指哪缩哪的效果:
- 缩放比 = (当前双指距离 - 初次触摸时双指距离) / 初次触摸时双指距离
- 缩放中心点 (0,0)
- leftMargin = 当前两指中心点的x坐标 - 初次触摸屏幕时两指中心点的x坐标 * 缩放比 + 初次触摸时的原始leftMargin
- topMargin = 当前两指中心点的y坐标 - 初次触摸屏幕时两指中心点的y坐标 * 缩放比 + 初次触摸时的原始leftMargin
双指触摸后,怎样办理和父控件滑动冲突的题目?
- 双指触摸该View时,调用requestDisallowInterceptTouchEvent(true)屏蔽父结构的事件拦截;
- 手指抬起时,调用requestDisallowInterceptTouchEvent(false)规复父结构的事件拦截
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2024-11-23 20:52, Processed in 0.170210 second(s), 35 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表