自动布局就是对数据元素中的节点进行定位，使节点分散在到一个比较好看的显示效果，自动布局的实质就是一种布局的算法的实现。比如TWaver默认提供圆形布局、交错布局、树形布局和弹簧布局，此外标签云、bus总线等也属于布局的应用，但需求总是变化无穷，数据结构不同，要求的呈现效果也不同，自动布局的定制在所难免，本文将介绍一种比较少见的布局效果。
默认的自动布局
首先我们来看看默认的自动布局的使用
var autoLayouter:AutoLayouter = new AutoLayouter(network); autoLayouter.doLayout(Consts.LAYOUT_SYMMETRY);
代码分两步，首先定义一个自动布局器关联了network组件，然后调用自动布局，进行交错布局。
可以看出，TWaver中自动布局都是通过AutoLayouter类来实现，而布局类型包括：Consts.LAYOUT_***
布局的效果如下，实际程序中可以看到布局过程的动画效果：
自动布局的实质
自动布局是自动对数据容器中所有网元进行重新定位，使节点分散开到好的显示效果，其实质是一种布局算法的实现，所以要定制自动布局就是要实现一种布局算法，以确定所有网元节点的位置。
TWaver并没有自动布局的接口，通常一个自动布局器会实现一个叫“doLayout()”的函数，以保持命名上的统一。
自动布局“接口函数”
CustomLayouter#public function getLayoutResult():Dictionary
CustomLayouter#public function doLayout():void
getLayoutResult
getLayoutResult()函数是布局算法的核心，其返回的是节点位置的计算结果，是一个Dictionary类型，< 键, 值>类型是。
doLayout
doLayout()函数包含两步，先调用getLayoutResult()得到布局位置信息，然后将这些信息，设置到网元节点上，类似下面的代码：
public function doLayout(box:ElementBox, root:IData = null):void{
var result:Dictionary = getLayoutResult(box, root);
for(var element:* in result){
var location:Point = result[element];
(element as Node).location = location;
}
}
从上面的示例代码可以看出，实际使用中会传入一些参数，这些根据实际情况而定。此外这里也可以使用动画的平移效果，起一个Timer，动画的将节点从原始位置移动到新的位置。
开始定制
下面开始布局算法，这里我们将布出下面的效果，整体是一个树结构，从左到右四层，最后一层使用Bus布局：
因为只是一个示例，布局实现不可能尽善尽美，所以只提供些实现的思路，算是抛砖引玉，作为参考：
整理数据结构
首先理清数据的结构，本例是一个树状布局，具有固定的四层结构，故本例将每一层的节点找出来，如第一层一个节点，第二层四个节点，第三层十二个节点，第四层可能右八十多个节点。
本例中使用了dataBox的广度遍历，每遍历完一层，就对这层上的节点作布局，这样一次遍历完，布局也做完，也就是说“整理数据结构”和“分别对每层布局”是同时进行的，但这并不是很好的示范，通常还是老老实实先整理数据的结构，甚至做一些模型的封装了表示这些模型，然后再做布局。
使用dataBox的广度遍历，每遍历完一层，就对这层上的节点作布局：
public function getLayoutResult(box:ElementBox, root:IData = null):Dictionary{
var result:Dictionary = new Dictionary();
function _calculateLocations(queue:Array, layer:int):void{
var sum:int = queue.length;
if(sum == 0){
return;
}
queue.forEach(function(node:IData, index:int, a:*):void{
var subIndex:int = index;
var parentPoint:Point = null;
var subSum:int = sum;
if(node.parent){
subIndex = node.parent.children.getItemIndex(node);
parentPoint = result[node.parent];
subSum = node.parent.childrenCount;
}
var location:Point = calculateLocation(node, layer, index , sum, subIndex, subSum, parentPoint);
result[node] = location;
});
};
var parent:IData = null;
var layer:int = 0;
var queue:Array = new Array();
box.forEachByBreadthFirst(function(node:IData):void{
if(!(node is Node)){
return;
}
if(node.parent != parent){
parent = node.parent;
var l:int = 0;
var p:IData = node.parent;
while(p){
l++;
p = p.parent;
}
if(l != layer){
_calculateLocations(queue, layer);
layer++;
queue = new Array();
}
}
queue.push(node);
}, root);
_calculateLocations(queue, layer);
return result;
}
分别对每层布局
有了上面这些信息，就很方便对各层作不同的布局：第一层到第四层，从左到右排列，每层节点从上到下排列，最后一层水平排列，本例中实现布局的函数是calculateLocation(…)，传入的参数包含了该节点布局相关的信息（所在层，在同层的位置，该层总共有多少节点，在其父节点的位置，其父节点所有的孩子数，父节点的布局位置）
public function calculateLocation(node:IData, layer:int, index:int, sum:int, subIndex:int, subSum:int, parentPoint:Point = null):Point
var maxHeight:int = 700;
var startX:int = 10;
var startY:int = 10;
public function calculateLocation(node:IData, layer:int, index:int, sum:int, subIndex:int, subSum:int, parentPoint:Point = null):Point{
var x:int = startX;
var y:int = startY;
var hGap:int = getHorizontalGap(layer);
if(layer < 3){
x = parentPoint ? parentPoint.x + hGap : startX;
y = startY + getVerticalGap(layer, sum) * (index + 0.5);
}else if(layer == 3 && parentPoint){
x = parentPoint.x + hGap + subIndex/2 * 50;
y = parentPoint.y + ((subIndex % 2 == 0 ) ? 15 : -15);
}
return new Point(x, y);
}
public function getHorizontalGap(layer:int):int{
return layer == 3 ? 90 : 150;
}
public function getVerticalGap(layer:Number, sum:Number):Number{
return Math.max(maxHeight/(sum + 0.5), 75);
}
连线样式的定制
本例中连线样式的配置也是关键，对于第四层Bus布局的呈现主要通过正交连线样式来体现，所以在数据添加时，对第四层的连线设置如下：
var link:Link = new Link(parent, node); link.setStyle(Styles.LINK_TYPE, Consts.LINK_TYPE_HORIZONTAL_VERTICAL); link.setStyle(Styles.LINK_CORNER, Consts.LINK_CORNER_NONE); box.add(link);
