NGUI可展开列表的实现
本文来自网易云社区
作者:汪毅军
最近使用了NGUI做了下可展开列表,其主要思路如下:首先最外层使用Scroll view以达到滑动效果,然后列表使用UITable进行排列,最后通过点击Item控制Item的显示和隐藏。 效果如下:
Item结构
列表层次结构图如下:
每一个Item下可分为两部分:其中HideItem表示隐藏的部分。剩余的表示一直显示的内容,就比如效果图中的“Item1”,“Item2”等内容。 我们可以根据具体需求提前摆放好Item,或者通过代码动态加载。
功能实现
首先给UITable下的每个Item挂载上点击监听
[SerializeField] private UITable _table; private List<Transform> items; void Start ()
{
items = _table.GetChildList(); for (int i = 0; i < items.Count; i++)
{
Transform item=items[i]; UIEventListener.Get(item.gameObject).onClick = OnItemClick;
} _table.Reposition(); }
其次定义好打开和关闭操作,需要注意的是,每次打来关闭后,务必调用一下_table.Reposition()以触发UITable去重新排列。
private void OpenItem(Transform transform)
{
transform.Find("HideItem").gameObject.SetActive(true);
} private void CloseItem(Transform transform)
{
transform.Find("HideItem").gameObject.SetActive(false);
} private void ToggleItem(Transform transform)
{ if (transform.Find("HideItem").gameObject.activeSelf)
{ CloseItem(transform);
} else
{
OpenItem(transform);
} } private void OnItemClick(GameObject go)
{// 这里用于关闭其他的Item,视具体需求使用// for (int i = 0; i < items.Count; i++)// {// if(items[i]!=go.transform) CloseItem(items[i]); // // } ToggleItem(go.transform);
_table.Reposition(); }
到此为止,一个最简单的可展开列表就实现了。
网易云免费体验馆,0成本体验20+款云产品!
更多网易研发、产品、运营经验分享请访问网易云社区。
相关文章:
【推荐】 一个只有十行的精简MVVM框架
【推荐】 abtest-system后台系统设计与搭建
NGUI可展开列表的实现的更多相关文章
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- RecycleView实现多布局可展开列表
代码地址如下:http://www.demodashi.com/demo/13193.html 前言 在开发的时候,我们不免会遇到这么一种数据展示,该数据有以下特征: 数据要以列表形式展示 每条数据要 ...
- Android 可展开列表组件 ExpandableListView
ExpandableListView 是ListView的子类,它把应用中的列表项分为几组,每组里可包含多个列表项. 所显示的列表项应该由ExpandableListAdapter 接口提供,实现Ex ...
- 纯CSS实现展开列表
效果预览 以下为源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 快速了解“云原生”(Cloud Native)和前端开发的技术结合点
欢迎访问网易云社区,了解更多网易技术产品运营经验. 后端视角,结合点就是通过前端流控缓解后端的压力,提升系统响应能力. 从一般意义理解,Cloud Native 是后端应用的事情,要搞的是系统解耦.横 ...
- 【原创】从 列表的重复 到 用sum展开二层嵌套列表将子元素合并
转载请注明出处:https://www.cnblogs.com/oceanicstar/p/9517159.html ★像R语言里头有rep函数可以让向量的值重复,在python里面可以直 ...
- jQueryMobile控件之展开与合并
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- NGUI ScrollView 循环 Item 实现性能优化
今天来说说一直都让我在项目中头疼的其中一个问题,NGUI 的scrollView 列表性能问题,实现循环使用item减少性能上的开销. 希望能够给其他同学们使用和提供一个我个人的思路,这个写的不是太完 ...
- Unity开发之NGUI系列
Unity插件收集 在Unity开发过程中会收集一些插件,收集这些插件的目的并不是我喜欢在开发中使用插件,而是本着喜欢的态度去收集的,就像我喜欢收集模型一样: 还有一点就是通过了解插件能让我知道Uni ...
随机推荐
- iOS手势处理
iOS手势处理 iOS手势有着如下几种: UITapGestureRecognizer UIPinchGestureRecognizer UIRotationGestureRecognizer UIS ...
- UNIX高级环境编程(7)标准IO函数库 - 二进制文件IO,流定位,创建临时文件和内存流
1 二进制IO(Binary IO) 在前一篇我们了解了逐字符读写和逐行读写函数. 如果我们在读写二进制文件,希望以此读写整个文件内容,这两个函数虽然可以实现,但是明显会很麻烦且多次循环明显效率很低. ...
- SDN 第一次上机作业
第一题 拓扑: 测试连通性: 第二题 拓扑: 测试连通性: 第三题 拓扑: 测试连通性:
- 安装mysql中遇到的问题1
我的debian7之前安装了mysql-server,是通过apt安装的,后来我卸载掉, 然后用whereis mysql查找, 把所有关于mysql的目录删除掉,包括带mysqld的目录及文件. 重 ...
- swift内存管理:值类型与引用类型
Use struct to create a structure. Structures support many of the same behaviors as classes, includin ...
- vue 项目项目启动时由于EsLint代码校验报错
今天在编写好vue项目代码时,在命令行输入npm start的时候出现了如下图所示的一大堆错误: 在网上查找资料说是缺少EsLint配置文件的问题,最终找到一篇由 hahazexia 编写的一篇博客文 ...
- Day9 抽象类和接口
抽象类 抽象类定义 只约定类所具有的抽象行为,没有具体实现相应行为. 语法格式 abstract class 类名{ 常量; 变量; 构造(); 访问修饰符abstract 返回类型 方法名;//抽象 ...
- Spring源码分析(二十三)BeanFactory的后处理
摘要: 本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 目录 一.激活注册的 BeanFactoryPostProcessor ...
- gulp合并压缩
1.文件合并压缩 var concat = require(‘gulp-concat’); //引用 var uglify = require(‘gulp-uglify’); 接下来,只要conca ...
- [NOIp2015]运输计划 (二分 $+$ 树上差分)
#\(\mathcal{\color{red}{Description}}\) \(Link\) 在一棵带有边权的树上,可以选择使一条边权为零.然后对于所有\(M\)条链,使其链长最大值最小. #\( ...