利用Unity+Slua实现游戏常用UI组件（四）LTree

1、定义
LTree是一个从上往下分布的树形组件，节点层次没有限制，支持自定义不同层次的节点元素与节点数据结构。与LScrollView一样，只创建满足Mask显示的最少元素，滚动过程中保证元素复用。
2、LTree效果展示

图1：文件夹系统

图2：二级列表

图3：元素复用

图4：其他例子
3、特性
- 3.1、创建满足Mask展示的最小数量的元素，支持滚动过程中元素复用（详见图3）
- 3.2、支持自定义不同层次的节点类和节点数据结构（详见图2或者项目中Demo中的LTreeDemo2）
- 3.3、支持设置两个元素之间的间隔——gapVertical，不同层次节点的间隔——gapHorizontal（详见项目中Demo中的LTreeDemo）
4、设计思路
4.1、树状结构转为线性结构
LTree重点解决的问题是，避免初始化时创建没必要显示的元素，并保证移动过程中元素复用。
在设计显示结构时，一开始考虑用树状的结构显示，假设树形结构如下

Root节点有A、D两个子节点， A有B、C两个子节点，D有E、F两个子节点
当Mask显示的内容为C、D、E、F，为了维持树状结构，必须把C节点的父节点迭代地创建出来，上面就需要创建A节点，假设A节点还有好几层的父节点，都需要把它们创建出来，这样一来浪费，二来不好处理，树状显示结构方案排除。
为了解决上述问题，我创建了一个显示列表，显示列表是由树结构通过先序遍历生成的，这样就避免上面迭代创建父节点的问题，也为滚动过程的元素复用埋下了伏笔。
代码如下：

function LTree:_TreeToList(nodeData, maxX, minY)
    if nodeData:HaveChild() and nodeData.expand then
        local childList = nodeData:GetChildList()
        for i = 1, #childList do
            local childNodeData = childList[i]
            self.nodeDataDict[childNodeData:GetKey()] = childNodeData
            table.insert(self.orderList, childNodeData)   ----先序遍历生成的显示列表
            ...
            ...
            maxX, minY = self:_TreeToList(childNodeData, maxX, minY)
        end
    end
    return maxX, minY
end

4.2、元素复用
我假定同一层次的节点高度必须一致，这样在调用SetData之后能确定整个树所有节点的位置，我只需要根据当前Content节点的上下边界，就可以确定应该显示哪些节点应该被回收，哪些节点应该显示，代码如下：

function LTree:_OnValueChanged(value)
    local startIndex = self:_GetIndexByY(self:_GetMaskTop())
    local endIndex = self:_GetIndexByY(self:_GetMaskBottom())
    if startIndex ~= self.startIndex or
        endIndex ~= self.endIndex then
        self:_UpdateTree()
    end
end

4.3、点击扩展显示
点击带有叶子节点的节点时，需要把叶子节点展开显示，但是单单展开并不足够，还需要把展开的叶子节点尽可能的显示出来，相当于在展开的叶子节点无法全部显示的时候，尽可能地把点击节点往上移动，直到点击节点处于Mask顶端，比如图3 点击D盘展开时的效果。

4.4、不满之处
由于每次节点扩展显示时，都调用SetData接口，重新生成显示队列，重新布局显示，感觉一个内置功能调用SetData过于重度，但一方面考虑到SetData需要处理的内容不多，大多数情况下并不会产生性能问题，另一方面SetData能抽出来处理的空间也不多，所以先这样吧

5、项目代码
git地址
Unity版本：5.6.6

利用Unity+Slua实现游戏常用UI组件（四）LTree

猜你喜欢