xml地图|网站地图|网站标签 [设为首页] [加入收藏]

仿腾讯课堂固定滚动列表ReactNative组件,打造一个

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:109 发布时间:2020-03-13
摘要:近来的须要中,必要选择二个横向、竖向同不时候可滚动的ViewPager,记住,是横向、竖向同期滚动,不是左右切换。作者想了想,难题在于竖向。对于竖向的ViewPager,作者就如记得 Ja

近来的须要中,必要选择二个横向、竖向同不时候可滚动的 ViewPager,记住,是横向、竖向同期滚动,不是左右切换。作者想了想,难题在于竖向。对于竖向的 ViewPager,作者就如记得 Jake Wharton 大神写过一个叫 DirectionalViewPager 的框架,它基本上算是在 ViewPager 源码上改的,但功用欠佳且早就没人维护,所以批驳选拔。

上一篇小说大家描述了Android View事件分发机制。若是你对View的风波分发还不熟稔,建议先去看一下 一文读懂Android View事件分发机制 它是我们后天滑动冲突消除的说理底工!

前言

出于业务需求做成肖似Tencent教室课程详细的情况滚动的功力,考虑到末端有十分的大概率有新的变现格局,OdysseyN提供的零零部件未有这种滚动控件,不比自个儿包裹。

图片 1

效果图.gif

  • 种类地址 在此边,要是有好的思想应接提 issue或pr。

过了几秒,不知怎么的,脑子里忽地闪现了几个主张:要使得 ViewPager 竖向滑动,把 Touch 事件沟通一下不就得了,也等于将 Motion伊芙nt 的 x 坐标转变到 y 坐标,将 y 坐标转变到 x 坐标。那样,从下往上海好笑剧团就调换到了从右往左滑。而从右往左滑时, ViewPager 会切换到下一页。当时,只要给 ViewPager 设置四个竖向切换的 PageTransfromer,就成了一个竖向的 ViewPager 了。

假使你早就对View的事件分发机制成竹在胸,那么大家就凭借View的风波分发机制,来给大家详细聊一猛降(jì)动(xù)冲(dòu)突(tú)!

开始

  • 大家先来看下,Tencent堂上摄像播放详细情况页面是哪些的?

图片 2

腾讯教室录制.gif

  • 咋一看分界面以为有一点复杂,其实简化来讲,这一个分界面能够看做tab组件 scroll组件。工学上说,要办好主要冲突与次要矛盾,那么些标题标主要冲突是scroll组件完结,相当于最外层的杰路驰NFixScrollView。

图片 3

分解图.png

  • 协和这里,笔者尝试着写了个测量试验js例子,最外侧套二个ReactNative自带的ScrollView并设置视频播放控件的可观为200Tab导航控件style={{height: windowHeight- 80}},那那样滚动间隔到120时,滚动条到底层了,录像播发控件的区域间距荧屏最上部还会有80。

  • 跑起来运营后发掘的三个严重的难点是,假如Tab导航控件的源委区域存在ScrollView可能ListView时,不可能滚动,唯有最外层能够滚动,也等于手势滚动被拦住了?

  • 一伊始想三种大的笔触:一种是截然靠JS层面,通过ScrollView暴露的API去落到实处,第三种是原生 JS,这里涉及到多少个基本点的东西,怎么样搜索Tab导航控件中的ScrollView或者ListView和操纵手势完成的功力

    外层滚动容器到顶端 手势往上则公告内层滚动容器伊始滚动;内层到最上端 手势往下则布告外层初叶滚动。

  • 意识第一种方法在消除什么寻觅子控件并认清滚动状态上未曾主意(只怕是自己没开掘)以致质量上的勘查,那就采取第二种形式。

自己感动了一小会儿,正尝试,但懒癌又犯了,心想,“笔者能体会精通,测度外人早想到了”,于是依旧筹划先在 GitHub 上找找,看有没有依照相似思路的代码。果如其言,有个日本一行 11个月前就搞出来了,代码非常的短,大家膜拜下呢:

图片 4

分析

为了消除地方的标题,大家必要明白多少个关键点。

  • 多少个是怎么决断手势滑动以致外层滚动容器到底层和内层滚动到顶端?
  • 其次个是寻觅滚动组件并通报内层滚动组件发轫滚动?

因而,网络检索那七个难题的相关质感和消除办法,决断是还是不是到底层比较轻松搜到了,当然了然了其规律。其余,判定手势是往上海滑稽剧团如故往下滑的主题材料置于前面表明。

索求内层滚动容器,一同头是以为递归寻觅可以知道的ScrollView实例(Android中分界面控件是一种树形布局卡塔尔(قطر‎,通过Hierarchy Viewer工具开掘那多个都以可以知道的,随后相比超级多少个ScrollView属性开掘其在显示屏上的LocationOnScreenX坐标不相同,假设当前滚动容器显示则等于0。

剩余最终八个什么样打招呼内层容器滚动呢?先卖个规范,在解决那个标题从前,大家先来打听下Android中的View事件是什么传递的。

正所谓自惭形秽,百战百胜,看看Android触摸事件类型有啥样?大家想下玩手提式有线电话机的时候手指的情形:落动手指,抬起指头,移入手指是两种基本的操作,其实也是3种触摸事件,分别代表着MotionEvent.ACTION_DOWN,MotionEvent.ACTION_UP,MotionEvent.ACTION_MOVE

粗略来讲,如下图所示:触摸事件产生后,就算事件的坐标处于ViewGroup的总统范围,那么首先调用ViewGroup的dispatchTouch伊芙nt方法,然后其内部调用onInterceptTouch伊夫nt(State of Qatar方法来决断是不是拦截该触摸事件,若拦截该事件则调用ViewGroup的onTouch伊芙nt(卡塔尔方法,不然的话,交给其子View的dispatchTouchEvent管理。

图片 5

image.png


切实能够参见笔者原先写的事件分发机制学习。

回过头来说外层滚动容器文告内层滚动,其实公告滚动约等于不阻拦事件,那么便是重写 onInterceptTouchEvent措施并再次回到false。而以此艺术会趁早先势不断调用,当时聪明的您想到了吗?依照手触摸荧屏的y坐标差来推断手势往上可能往下。手指滑动时会爆发一多元触摸事件,这里有三种情状:表达下显示屏的左上角是坐标原点,沿着左侧是x轴,左边则是y轴。
① Down -> Move ... -> Move -> UP
② Down -> Move ->... -> Move

记录Down触摸事件的Y坐标值作为起头值,Move可能UP的Y坐标值作为末尾值,两个之差大于最小滑动值则印证向上海滑稽剧团,小于最小滑动值则表达向上海滑稽剧团(这里简化了尺度,若是是实现OnGestureListener的话判定滑动的话还会有X轴滑动速度值和Y轴滑动速度值卡塔尔(قطر‎。到此地前边提的五个难题都获得消除了,上面起头真正上手了。

public class VerticalViewPager extends ViewPager { public VerticalViewPager(Context context) { super; } public VerticalViewPager(Context context, AttributeSet attrs) { super(context, attrs); } private MotionEvent swapTouchEvent(MotionEvent event) { float width = getWidth(); float height = getHeight(); event.setLocation((event.getY() / height) * width, (event.getX() / width) * height); return event; } @Override public boolean onInterceptTouchEvent(MotionEvent event) { return super.onInterceptTouchEvent(swapTouchEvent(MotionEvent.obtain; } @Override public boolean onTouchEvent(MotionEvent ev) { return super.onTouchEvent(swapTouchEvent(MotionEvent.obtain; }}

滑动冲突的普及景色与管理思路


当大家前后两层View都足以滑动时候,就能时有发生滑动冲突!

广阔的滑行冲突场景:

图片 6

滑动冲突.png

  • 1.外层与内层滑动方向差异,外层ViewGroup是能够横向滑动的,内层View是足以竖向滑动的(相通ViewPager,各类页面里面是ListView)

  • 2.外层与内层滑动方向相像,外层ViewGroup是足以竖向滑动的,内层View同样也是竖向滑动的(相似ScrollView包裹ListView)

当然还应该有地点二种组成起来,三层还是多层嵌套发生的冲突,然则无论是多么繁琐,消除的思路皆以大同小异。所以遭逢多层嵌套的同伙也不要焦灼,一层一层管理就可以。

有小朋侪肯定有疑问,ViewPager带ListView并不曾现身滑动冲突啊。
那是因为ViewPager已经为大家管理了滑动冲突!要是大家安危与共定义二个程度滑动的ViewGroup内部再利用ListView,那么是必定须要管理滑动冲突的。

图片 7

针对地点第一种现象,由于外界与在那之中的滑动方向不平等,那么大家得以依赖当下滑动方向,水平照旧垂直来决断这几个事件毕竟该交给哪个人来拍卖。至于何以赢得滑动方向,大家得以获得滑动进度中的七个点的坐标。平时景况下基于水平和竖直方向滑动的偏离差就足以推断方向,当然也能够依照滑动路线变成的夹角(只怕说是斜率如下图)、水平和竖直方向滑动速度差来判别。

图片 8

ViewPager当斜率小于0.5时剖断为横向滑动,拦截事件

风野趣的同伙能够看ViewPager源码分析(2):滑动及冲突管理

本着第两种现象,由于外界与中间的滑动方向雷同,那么不能依靠滑动角度、间距差只怕速度差来推断。这种情形下必备通过专门的学业逻辑来展开决断。正如何足为奇ScrollView嵌套了ListView。固然供给不一致,业务逻辑自然也区别,不过消除滑动冲突的法子都以一律的。下边为我们截取了和讯和天猫商铺个中的同方向滑动冲突场景,方便大家更直观的感想这一个情景。

图片 9

同方向,竖向滑动冲突

和讯的这一个是同方向,竖向滑动冲突的风貌,能够看来开采布局全部是能够滚动的,何况下方的微博列表也是足以滚动的。依据专门的学业逻辑,当火热,榜单...这一行标签栏滑动到顶上部分的时候腾讯网列表才方可滚动。不然正是发现构造的完全滚动。这一个情景是还是不是在众多app里面都能够看出呢!

图片 10

同方向,横向滑动冲突

Tmall的这么些是同方向,横向滑动矛盾的情形,内外两层都以足以横向滚动的。它的管理逻辑也很显然,依照顾客滑动的职位来推断毕竟是可怜View需求响应滑动。

上述二种滑动冲突的气象分别只是在于阻止的逻辑管理上。第一种是依附水平如故竖直滑动来判断哪个人来管理滑动,第三种是基于业务逻辑来判别何人来拍卖滑动,不过管理的覆辙都以平等的

图片 11

怎么封装传祺N组件

  • 参考 凯雷德N 0.51中文文书档案,大家需求做那个事物:

啊,的确是妙啊。可是还亟需在外界设置一下 overScrollMode 和 PageTransfromer,以防看出缺欠:

滑动冲突消逝套路


原生上要做的事
  • 1.创办原生固定滚动控件
  • 2.开立管理滚动控件ViewManager的子类
  • 3.创立达成了ReactPackage接口的类

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:仿腾讯课堂固定滚动列表ReactNative组件,打造一个

关键词: 68399皇家赌场 代码 ViewPager TECH_AN... Android技术探索

最火资讯