UG4L20——树
UG4L20——树
本章代码关键字
1 | GTree //FairyGUI的树类 |
FairyGUI的树
树是列表的一种特例,是组件的一种特殊拓展,利用树我们可以在FGUI中制作出树形结构的UI
何为树形结构,类似于Projects窗口内显示的文件树就是一种树形结构
开启树功能
-
新建列表
-
激活列表中的树视图
树的相关属性
-
每级锁紧:树节点的深度每增加一级,向右缩进的像素距离
相当于:
-
点击文件夹时展开/折叠:
点击文件夹节点时是否自动展开或者折叠这个这个节点
- 否:没有动作
- 单击:单击时执行
- 双击:双击时执行
设置好后,我们可以在编辑列表数据中为每个选项添加层级,0代表最上层,数字相同表示在同一层
制作树中的内容
首先一个创建树的节点组件,按照如下规则创建元件和控制器,树中的节点设计约定规则:
-
名为expanded的控制器
当节点展开状态,控制器切换到页面1;当折叠时,控制器切换到页面0
实现效果类似于:关闭时:,展开时:,左边的图片会切换
如果有放置按钮(复选按钮)用于展开和折叠节点,那么这个按钮应该和控制器连接
假设要实现这样的效果:
创建组件后关联expanded的控制器属性即可
例如图片切换的属性控制和黄色箭头的属性控制
-
名为leaf的控制器
如果作为根节点(该节点下有节点),控制器切换页面是0;如果作为叶子节点(该节点下无节点),那么控制器切换页面是1
实现效果类似于:
然后将属性控制关联到leaf控制器即可
-
名为indent的对象
该对象用于设置缩进,位置设置为(0,0),宽度建议为0,树会控制该缩进宽度,
假设某节点缩进是15像素,深度为3,那么indent对象宽度会被设置为45
缩进一般使用空白图形,也可使用其他内容,取决于缩进的表现样式
同时,所有要被缩进影响的内容都必须要设置与indent的对象关联
这样,缩进才能影响其他组件的显示(假设缩进45像素):
最后将创建出来的树节点关联到树的项目资源内,在编辑列表数据,即可看到树的内容
Unity中的使用树
-
获取树对象
1
2TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree; -
获取树的根节点,该节点在面板上不可见,只有往该节点添加节点才能将内容显示在面板上
1
2
3TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容 -
新建一个节点类对象并添加节点
其中,构造函数的参数为:
- 参数一:该节点是否会有子节点
- 参数二:该节点使用的自定义节点UI对象URL路径(可选,不填则直接使用树的项目资源)
然后,通过
gRootNode.AddChild()
即可添加节点1
2
3
4
5
6TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
//添加节点时,先新建一个节点,再加到另一个节点即可
GTreeNode node = new GTreeNode(true);
rootNode.AddChild(node);显示效果:
只要创建节点时,设置了有子节点,就可以向该节点添加子节点
1
2
3
4
5
6
7
8
9TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
//添加节点时,先新建一个节点,再加到另一个节点即可
GTreeNode node = new GTreeNode(true);
rootNode.AddChild(node);
//往子节点添加节点(该节点需要是可以添加子节点的),就有了层级关系
GTreeNode nodeChild = new GTreeNode(false);
node.AddChild(nodeChild);显示效果:
-
修改节点上的显示内容
要修改节点上的显示内容,可以通过
cell
属性来获取节点对应的组件,通过组件即可修改显示内容注意!如果想要通过这种方式修改内容 必须 是根节点的子节点 并且是要
AddChild
过后才能改,不建议使用这种方式1
2
3
4
5
6
7
8TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
//添加节点时,先新建一个节点,再加到另一个节点即可
GTreeNode node = new GTreeNode(true);
rootNode.AddChild(node);
node.cell.text = "第一个节点";
//nodeChild.cell.text = "第一个的节点子节点"; //这一句会报错显示效果:
-
树的事件监听相关
-
当树的
TreeNode
需要更新时的回调委托每当树上显示的节点变化时(添加移除,或者折叠展开)都会触发该委托,建议使用这种方式去进行树结构中内容的初始化
该委托要求方法的参数列表为:
- 参数一:要更新显示的
GTreeNode
- 参数二:传入的
GTreeNode
对应的GComponent
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25void Start()
{
TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
//添加节点时,先新建一个节点,再加到另一个节点即可
GTreeNode node = new GTreeNode(true);
node.data = "1";
rootNode.AddChild(node);
node.cell.text = "第一个节点";
//往子节点添加节点(该节点需要是可以添加子节点的),就有了层级关系
GTreeNode nodeChild = new GTreeNode(false);
nodeChild.data = "2";
node.AddChild(nodeChild);
//nodeChild.cell.text = "第一个的节点子节点";
tree.treeNodeRender = RenderTreeNode;
}
void RenderTreeNode(GTreeNode node, GComponent obj)
{
print("TreeNode改变");
if (node.data.ToString() == "2")
obj.text = "第一个节点的子节点";
}显示效果:
- 参数一:要更新显示的
-
当点击一个子节点 会调用该委托函数
该委托与列表的一致gList.onClickItem.Add()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
//添加节点时,先新建一个节点,再加到另一个节点即可
GTreeNode node = new GTreeNode(true);
node.data = "1";
rootNode.AddChild(node);
node.cell.text = "第一个节点";
//往子节点添加节点(该节点需要是可以添加子节点的),就有了层级关系
GTreeNode nodeChild = new GTreeNode(false);
nodeChild.data = "2";
node.AddChild(nodeChild);
//当点击一个子节点时,会调用该委托
tree.onClickItem.Add((obj) =>
{
print(obj.data);
});输出效果(点击子节点):
-
用于监听 展开折叠的 委托
当树监听到展开折叠时会执行的委托
该委托要求方法的参数列表为:
- 执行折叠或展开的
GTreeNode
- 是否是展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21void Start()
{
TeachPanel panel = UIManager.Instance.ShowPanel<TeachPanel>("teach");
GTree tree = panel.m_tree;
GTreeNode rootNode = tree.rootNode; //树的根节点,在面板上不可见,我们需要向该节点添加内容
//添加节点时,先新建一个节点,再加到另一个节点即可
GTreeNode node = new GTreeNode(true);
node.data = "1";
rootNode.AddChild(node);
node.cell.text = "第一个节点";
//往子节点添加节点(该节点需要是可以添加子节点的),就有了层级关系
GTreeNode nodeChild = new GTreeNode(false);
nodeChild.data = "2";
node.AddChild(nodeChild);
tree.treeNodeWillExpand = OnExpand;
}
void OnExpand(GTreeNode node, bool expend)
{
print(node + "_" + expend);
}输出结果:
- 执行折叠或展开的
-