“京东金融”主页效果 RecyclerView联动
先上效果图吧:
第一个想到的实现方式是上面使用horizontalScrollview,下面使用Viewpager,经过尝试之后发现二者API有限,不能达到理想效果。几经折腾,最后上下都使用了自定义的RecyclerView。效果图如下:
现在来分析技术点,首先是上下联动,思路是在Recycleview的onScrolled回调方法中操作另一个Recycleview的滑动。
@Override
public void onScrolled(int dx, int dy) {
super.onScrolled(dx, dy);
sx = sx +dx;
if (scrollViewListener != null && isMark) {
scrollViewListener.onScrollChanged(this, sx, 0);
}
}
其中onScrollChanged方法在主页面中实现
@Override
public void onScrollChanged(Object scrollView, int x, int y) {
int width1 = CommonUtil.getScreenWidth(this) - DensityUtils.dip2px(this, 60);
int width2 = CommonUtil.getScreenWidth(this);
if (scrollView == rvHead) {
rvFoot.setmark(false);
rvFoot.scrollTo(x * width2 / width1, y);
} else if (scrollView == rvFoot) {
rvHead.setmark(false);
rvHead.scrollTo(x * width1 / width2, y);
}
rvHead.setmark(true);
rvFoot.setmark(true);
}
上下View的滑动速率差即为上下RecyclerView中item的宽度差,上面view中item的宽度为屏幕宽度-60dp,详见对应的adapter。
由于RecyclerView中scrollTo方法没有实现,所以直接想到的是用scroolBy代替,但由于滑动回调返回的是Int值,经过速率差处理后精度丢失,得不到准确值,导致联动效果达不到,痛定思痛,最后还是自己来重写scrollTo方法:
@Override
public void scrollTo(int x, int y) {
scrollBy(x-sx,0);
}
sx为自己在onScrolled方法中记录,具体见文末给出的源码。
滑动之后,还要进行回调处理,以达到像viewPager那样的回弹效果,具体逻辑在自定义的RecyclerView中的回调方法onScrollStateChanged中实现:
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
int mmSelected;
//当控件停止滚动时,获取可视范围第一个item的位置,滚动调整控件以使选中的item刚好处于正中间
int firstVisiblePos = mLayoutManager.findFirstVisibleItemPosition();
if (firstVisiblePos == RecyclerView.NO_POSITION) {
return;
}
Rect rect = new Rect();
mLayoutManager.findViewByPosition(firstVisiblePos).getHitRect(rect);
if (Math.abs(rect.left) > mItemWidth / 2) {
smoothScrollBy(rect.right, 0);
mmSelected = firstVisiblePos + 1;
} else {
smoothScrollBy(rect.left, 0);
mmSelected = firstVisiblePos;
}
if (Math.abs(rect.left) == 0 && mOnSelectListener != null && mmSelected != mSelected) {
mSelected = mmSelected;
mOnSelectListener.onSelect(mSelected);
}
}
}
}
为了让滑动效果更为自然且支持fling效果,本项目还重写了RecyclerView的fling方法,使得每次fling都恰好能滑动整数个item,大致思路为调整fling初始速率,代码如下:
@Override
public boolean fling(int velocityX, int velocityY) {
int v;
int touchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
if (Math.abs(velocityX) <= 3*touchSlop) {
return false;
}
mPhysicalCoeff = SensorManager.GRAVITY_EARTH // g (m/s^2)
* 39.37f // inch/meter
* getContext().getResources().getDisplayMetrics().density * 160.0f // pixels per inch
* 0.84f;
int firstVisiblePos = mLayoutManager.findFirstVisibleItemPosition();
if (firstVisiblePos == RecyclerView.NO_POSITION) {
return false;
}
Rect rect = new Rect();
mLayoutManager.findViewByPosition(firstVisiblePos).getHitRect(rect);
double n = getSplineFlingDistance(velocityX) / mItemWidth;
int num = Double.valueOf(n).intValue();
if (velocityX > 0)
v = Double.valueOf(getVelocityByDistance(num * mItemWidth + Math.abs(rect.right)- DensityUtils.dip2px(getContext(), 20))).intValue();
else
v = Double.valueOf(getVelocityByDistance(num * mItemWidth + Math.abs(rect.left)+ DensityUtils.dip2px(getContext(), 20))).intValue();
if (velocityX < 0) {
v = -v;
}
return super.fling(v, velocityY);
}
“京东金融”主页效果 RecyclerView联动的更多相关文章
- 【转】京东金融App端链路服务端全链路压测策略
京东金融移动端全链路压测历时三个月,测试和服务端同学经过无数日日夜夜,通宵达旦,终于完成了移动端链路的测试任务.整个测试有部分涉及到公司敏感数据,本文只对策略部分进行论述. 1.系统架构与策略 在聊性 ...
- 双重ScrollView,RecyclerView联动实例
最近收到一个需求,如图,大家一看,不就是一个简单的表格吗,RecyclerView就搞定了 我一开始也是这么想的,但是当我继续听下去 需求是左边党支部栏目只能上下滑动,之后联动右边下方表格一起上下滑动 ...
- RecyclerView联动滑动失败
RecyclerView联动滑动失败 我们在做Recyclerview联动滑动的时候,就是左边一个RecyclerView右边一个RecyclerView 我们希望左边的RecyclerView可以和 ...
- 自己编写的仿京东移动端的省市联动选择JQuery插件
概述 什么是插件,插件就是即插即用叫插件,很少的配置,很少的代码就可以用都项目里,之所以做这个插件,是因为做了一个省市区的联动,其他项目如果要用怎么办,难道在ctrl+c,ctrl+v?那样做太low ...
- 鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)
鼠标点击输入框文字消失 value实现方法 placeholder实现方法 以及JQ实现placeholder效果 <input type="text" value ...
- JS实现操作成功定时回到主页效果
效果图: 页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- jquery实现城市选择器效果(二级联动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- View Controller Transition:京东加购物车效果
冬天已经过去了,阳光越来越暖洋洋的了.还记得上学的时候,老师总说"春天是播种的季节",而我还没在朋友圈许下什么愿望.一年了,不敢想象回首还能看到点什么,所以勇往直前.当被俗世所扰, ...
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- Javascript高级编程学习笔记(5)—— JS操作符
话不多说,开始今天的码字之旅. 突然有种日更小说的感觉,emm... 操作符 ECMAScript(JS核心)描述了一组用于操作数据值的操作符,也包括算术操作符等等 而JS中这些操作符最鲜明的特点就是 ...
- Python环境搭建详解(Window平台)
前言 Python,是一种面向对象的解释型计算机程序设计语言,是纯粹的自由软件,Python语法简洁清晰,特色是强制用空白符作为语句缩进,具有丰富和强大的库,它常被称为胶水语言. Python是一种解 ...
- 用redux-thunk异步获取数据
概述 最近学习redux,打算用redux-thunk给todo添加异步获取数据组件.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 在todo下方,我异步获取我的react博客的标题,点击 ...
- Swift5 语言指南(十六) 初始化
初始化是准备要使用的类,结构或枚举的实例的过程.此过程涉及为该实例上的每个存储属性设置初始值,并执行在新实例准备好使用之前所需的任何其他设置或初始化. 您可以通过定义实现这个初始化过程初始化,这就像特 ...
- Redis简明教程
redis是什么: Redis is an open source, BSD licensed, advanced key-value store. It is often referred to a ...
- HTML里面form表单name,action,method,target,enctype等属性用法
HTML里面的form表单里面的name,target,enctype,method以及action的用法 HML表单HTML里面的表单是HTML页面与浏览器交互的重要手段,表单主要提交一些客户端的数 ...
- IDEA里五种目录类型简介(Mark Directory as)
通过File -> Settings-project Structure-Modules 或者右键Mark Directory as可以找到这五种类型. Sources 一般用于标注类似 sr ...
- PostgreSQL事务实现
事务简介 事务管理器:有限状态机 日志管理器 CLOG:事务的执行结果 XLOG:undo/redo日志 锁管理器:实现并发控制,读阶段采用MVCC,写阶段采用锁控制实现不同的隔离级别 Postgre ...
- python redis模块详解
前言 现在越来越觉得知识的沉淀尤为重要,最近打算慢慢的把一些知识点做个记录,如果长期不用生疏了也可以快速回顾.下面我会依次介绍在python中常用组件redis,rabbitmq,mongodb,E ...
- JavaScript之破解数独(附详细代码)
在上一篇分享中,我们用Python和Django来破解数独,这对不熟悉Python和Django的人来说是非常不友好的.这次,笔者只用HTML和JavaScript写了破解数独的程序,对于熟悉前端 ...