Unity重新开发Scroll View控件

说明

由于Unity自带的Scroll View控件不能灵活的满足自己实际开发,因此想到自己制作一个滑动展示页面,且该控件不依赖Unity的其他UI控件,但该控件存在局限性,仅供参考

该篇文章着重介绍原理和结构,不会过多讨论代码的编写,需要查看源码可以访问一下地址

实际效果预览:

横向滑动展示栏
横向滑动展示栏
纵向滑动展示栏
纵向滑动展示栏

结构设计

该控件滑动周期由三个部分组成 :

  • 1 滑动时 : 随触摸点(或鼠标)滑动

  • 2 退出滑动时 : 滑动衰减

  • 3 滑动结束时 : 位置校正

滑动展示栏由一个控制器和多个滑块组成,使用时需要设置控制器的参数配置,内部的滑动item需要有FScrollItem组件或者继承自FScrollItem的组件,其中FScrollItem开放了点击和被选中事件,可以在两个接口中写自定义逻辑。

  • 滑动控制器 -- FScrollPage

    FScrollPage
    FScrollPage
  • 滑动对象 -- FScrollItem

    FScrollItem
    FScrollItem

FScrollPage

滑动控制器FScrollPage 负责整理FScrollitem的位置和大小,用户触摸交互,监听滑动事件,执行滑动特效以及传递选中事件给子物体FScrollitem。

考虑到易用性,在FScrollPage的初始化分为两种,第一种是自动检查指定节点下的子对象进行标记id和排序整理m默认选中第一个被标记的item,第二种方式是传递一个map<itemID , item> 以及默认选中id。

FScrollItem

滑动对象FScrollItem 提供了点击被选中回调事件,当被点击时自动将该Item滑动到中心并向FScrollPage通知并选中到该Item。

位置整理

  • 统一锚点布局方式。

  • 按指定配置设置item的位置、大小、间距。

将获取到的子对象map<itemID,item>进行遍历,生成对应的FScroillObject对象并设置统一的布局方式(居中),初始化lastPostion和Postion (FScrollObject除了有RectTransfrom属性外还有一个Postion属性和lastPostion属性,分别用来纪录当前(或正在前往)的位置和上一次位置信息)。用于后续的滑动和位置校正。

滑动监听

滑动监听原理时通过检测有触摸或按下事件到滑动条上时激活滑动检测,当移动速度大于阈值时则判定当前正在滑动中,当检测到手指或鼠标离开滑动条时结束滑动监听。

这里有一点需要注意,如果触摸滑动条触摸到了item这会被拦截点击事件,滑动条的OnPointerDown事件不会被触发,解决办法我开始参考的是一篇渗透UI点击事件文章 : 渗透UI点击事件 ,但是使用后发现多个UI重叠时会出现栈内存溢出,导致编辑器卡死,后来想了一个更简单的办法,在FScrollItem中同样实现点击事件接口,当被按下或抬起时直接将事件继续传递给控制器的对应事件。

    public void OnPointerDown(PointerEventData eventData)

    {

        //传递事件

        scrollPage.OnPointerDown(eventData);

        //后续逻辑

        lastPointer = eventData.position;

    }

滑动效果以及位置校正

滑动时根据滑动速度来控制item的移动,滑动结束后使用速度线性递减,当速度低于一定阈值时执行位置校正,其中弹动的效果使用的时一个缓动函数BackEaseOut。

static float BackEaseOut(float t, float b = 0, float c = 1, float d = 1)

{

    return c * ((t = t / d - 1) * t * ((1.70158f + 1) * t + 1.70158f) + 1) + b;

}

位置校正时先查询距离中心点最近的item,记录并传递该item的ID到滑动方法中,然后通过滑动方法使Item移动到正常位置。

源码已知存在的缺陷

如果你需要使用源码你需要了解以下的缺陷,你可以对缺陷进行修改或者修复

  • 滑动到边界时没有约束

  • 锚点固定为居中,可能会与你的项目有冲突,也可能导致自适应UI出现问题

  • 点击判定过于僵硬(按下坐标和抬起坐标的Distance小于指定阈值则触发点击)

  • 滑动衰弱的时间和位置校正时间是固定的

其他

如果你有疑问,请到我的源码地址下留言评论,该控件主要是技术上的研究,目前不够完善,建议根据项目需要修改源码。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容