“京东金融”主页效果 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 是一个事件对象,当一个事件发生后,和当前事件发 ...
随机推荐
- go语言异常处理
go语言异常处理 error接口 go语言引入了一个关于错误错里的标准模式,即error接口,该接口的定义如下: type error interface{ Error() string } 对于要返 ...
- 第二十一节:Java语言基础-关键字,标识符,注释,常量和变量,运算符
Java语言基础-关键字,标识符,注解,常量和变量,运算符 class Demo { public static void main(String[] args){ System.out.printl ...
- php函数式编程
// 函数式编程 $users = array( array('id' => 1, 'name' => 'abc1', 'age' => 29, '性别' => '男'), a ...
- Liferay7 BPM门户开发之10: 通用流程实现从Servlet到Portlet(Part1)
开发目的: 实现通用流程自动化处理(即实现不需要hardcode代码的bpm统一处理后台,仅需要写少量前端html form代码和拖拽设计BPM定义) 既可独立运行或可依托于Liferay或依托其它门 ...
- linux中grep/egrep的使用
grep也是linux中查找的一个利器,运维.程序员必掌握的 下面针对grep的参数进行说明: --color 重点标记匹配到项grep "a word" datafile -- ...
- [每天解决一问题系列 - 0007] 如何创建Catalog并用其签名
问题描述: 校验一组文件的完整性 解决方法: https://msdn.microsoft.com/en-us/library/windows/desktop/aa386967(v=vs.85).as ...
- GraphX之Pregel(BSP模型-消息传递机制)学习
/* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...
- h5端呼起摄像头扫描二维码并解析
2016年6月29日补充: 最近做了一些与表单相关的项目,使用了h5的input控件,在使用过程中遇到了很多的坑.也包括与这篇文章相关的. 首先我们应该知道使用h5新提供的属性getUserMedia ...
- JAVA基础 <一>
java基础的学习要领,多写多写. 学习方法很简单,了解 到 理解 到 熟悉 到 精通 先讲变量吧: public static void main(String[] args) { int ...
- SpringCloud Eureka服务注册及发现——服务端/客户端/消费者搭建
Eureka 是 Netflix 出品的用于实现服务注册和发现的工具. Spring Cloud 集成了 Eureka,并提供了开箱即用的支持.其中, Eureka 又可细分为 Eureka Serv ...