IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> unity自定义导航栏列表实现 -> 正文阅读

[游戏开发]unity自定义导航栏列表实现

最近项目中要实现一个只显示3个item,居中item会有一个放大效果,并且点击一个item以后会有不一样的高亮效果的scroll。全篇基于ugui实现,本篇主要讲述一下实现思路,先看效果图:

在这里插入图片描述

动态加载数据

首先第一步要解决的是scroll的动态加载数据逻辑,如果只是单纯的给scrollview下的Vertical Layout Group添加子组件的话局限性就太大了,可以理解成给Android中的recyclerview添加数据adapter。
ok,我们来看下如何给ugui中的scroll动态添加数据item。首先创建一个item的prefab,我这里演示如下:

在这里插入图片描述

创建完item的prefab之后就是去根据数据去新建并且加载,我这里数据是从windows电脑本地excel中读取而得,我们直接跳到新建加载逻辑,
在这里插入图片描述
在这里插入图片描述

这里我们直接读取excel中的数据,然后通过Instantiate来新建item,并且对item进行数据方面的处理,可以看到我这里通过获取item绑定的对应的自己的脚本去对每个item进行了初始化处理。处理完了item之后就是将这些item和scroll进行绑定了。加载scroll绑定的脚本CenterOnChild_UGUI,调用其init方法进行绑定以及对scroll进行初始化操作。接下来来看init中的操作:
在这里插入图片描述
在这里插入图片描述

这里我们可以看到首先我们做了一些对scroll的初始化的操作,然后就开始根据scroll下面的Vertical Layout Group去判断增加item的逻辑,主要逻辑在去判断这个Verical ayout Group是vertical还是Horizontal的,如果是Horizontal的话,则去根据x方向去判断item的宽度,然后根据item的宽度去累加,Vertical方向的话则是根据y方向去计算item的高度去累加,就是去计算每个item的childPosY数值然后去添加view就可以了。
在这里插入图片描述

手势列表动画

ok到这里为止ui层面的显示已经ok了。只是现在的效果就是一个动态加载数据的一个scrollview,接下在我们要去根据手势去增加列表的效果。
从上面的效果图来看,我们是一个竖直列表,我们需要在判断列表竖直滑动,找到目前ui效果上居中的那个item的位置,然后我们就可以对这个位置的item进行效果展示了。我们来看滑动获取pos大小的代码:
在这里插入图片描述

关键代码在FindClosestChildPos方法里,我们来看这里:
在这里插入图片描述

根据上面计算得到的每个item的高度,我们可以根据现在距离中心最近的那个子组件是哪一个。然后我们就可以把这个item做移动到中间处理。

在这里插入图片描述

这里就完成了即使我们没有滑动一个item到居中,也能把最接近居中的item直接设置到居中的效果了。接下来就是把居中的item做放大处理,因为这里我们已经获取到了居中的那个item的pos,所以我们只要在update里对这个pos的item做特殊化处理就行了。

在这里插入图片描述

这里我们对居中的item的transform进行了放大处理。其他则还是原来大小处理。

ok,这里我们就基于ugui完成了这个自定义特殊效果的列表操作。

列表性能优化

ugui的scroll使用过程中,我们会发现它就是在scroll组件下的Vertical Layout Group添加子组件,然后增加滑动效果。那么思考下,item一多的话性能上肯定就会有一定影响,比如我们一口气加载100000条item,运行的时候相当于把这个100000条数据全部加载进去了,但我们ui上显示的其实只有3条item。这很明显就造成了资源上的浪费。参考Android RecyclerView的缓存机制思想,只加载三个可视化的item以及两个一上一下的item,当滑动的时候上下有item消失的时候,生成的item的内存反复循环利用,这样即使显示n条数据item,都不会有性能上的卡顿啊什么的表现了。ok,根据这个思想,我们来进行下实现,这里我贴出复用的关键代码:

在这里插入图片描述

ok,至此一个性能上比较优秀,以及有特殊滑动效果的自定义scroll就完成了。

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章           查看所有文章
加:2021-07-16 22:04:27  更:2021-07-16 22:04:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 15:26:32-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码