自定义布局之树形布局(二):总体思路及自定义属性

本文探讨了树形布局的设计思路,包括递归、多方向、自定义连接线、层级间隔和拖拽功能。通过递归思想简化布局复杂度,实现从上到下、从下到上、水平等多种方向的树形展示,并介绍了自定义属性和拖拽功能的实现。

上一篇展示了树形布局的效果及使用方法,本篇讲解设计这个树形布局的总体思路及它的自定义属性。

总体思路

1.递归

(作为一个程序员)提到树,相信大家第一时间想到的是数据结构里的各种树(二叉树,哈夫曼树、红黑树等)。树这种数据结构有很强的递归性,遍历树、查询高度等等操作其实都可以递归的方式来实现。简言之就是树—>树的子树—>子树的子树…

利用这种递归的思想,在设计树形布局时我们就可以不必总是担心整棵树的各种变量。关心局部,做好局部就行了(有点像贪心算法)。

本树形布局其实很简单,1号为根结点,2、3、4为子结点,其中2、3、4是线性摆放的。
就这么简单。而4、5、6、7又是一个树形布局,其中4为根结点、5、6、7为子结点。4、5、6、7这个布局(树)就是一个子布局(子树)。
在这里插入图片描述
这么设计有什么好处呢?其实可以大大减少测量和摆放实现的难度。如下图,利用递归红色外布局把黄色的子布局看成了一个整体(并不在乎这个子布局内部做了什么,只关心它总体的宽高,只关心结果),如此一来要得到红色布局的高度就容易多了。黄色布局对自己的子树也是这么做的。
在这里插入图片描述

2.多方向

下面是我们最最常见的方向----从上到下。
在这里插入图片描述
从下到上呢?其实整个布局的尺寸是一样的,只是摆放的方向变了。
在这里插入图片描述
水平的树也是一样的。(如果把两棵水平树拼在一起,再重写连接线的实现似乎就可以做出思维导图布局了,这个会在后面的文章中讲到)
在这里插入图片描述

3.自定义连接线

如果我们能抽象出一个连接线绘制器类,这样就可以根据自己的需要来绘制连接线了(这个会在后面的文章中讲到)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值