最近，小弟在实现一个思维导图的开源控件。下面我简单介绍一下如下打造一个类似思维导图软件的ViewGroup。
基本结构.png
建立模型
主要模型结构相对简单：TreeModel，NoteModel，NoteView，TreeView。
核心实现分布如下：
- TreeModel：树形结构的存储，树形结构的遍历，添加、删除节点;
- NoteModel：节点关联的指向,和Parent的指向;
- TreeView ：绘制树形结构，对树形结构位置的纠正，实现View层的添加，删除，note关联绘制;
- NoteView：显示text;
编写位置计算核心代码
在核心代码中，我想和大家分享的是TreeView如何对多种Style（树形形状）进行适配的问题。因为我们的树形结构的表达多种的，有的是一个半树形图，有点是圆形展开的等。对于这个问题，作为程序员如何进行解耦能，采用Interface进行解构适配，统一行为。所以在这里我写了一个TreeLayoutManager进行管理树形的位置表达。这里我实现了一个RightTreeLayoutManager。代码概况如下：
接口
public interface TreeLayoutManager {
/**
* 进行树形结构的位置计算
*/
void onTreeLayout(TreeView treeView);
/**
* 位置分布好后的回调,用于确认ViewGroup的大小
*/
ViewBox onTreeLayoutCallBack();
/**
* 修正位置
*
* @param treeView
* @param next
*/
void correctLayout(TreeView treeView, NodeView next);
}
实现
public class RightTreeLayoutManager implements TreeLayoutManager{
final int msg_standard_layout = 1;
final int msg_correct_layout = 2;
final int msg_box_call_back = 3;
private ViewBox mViewBox;
private int mDy;
private int mDx;
private int mHeight;
public RightTreeLayoutManager(int dx, int dy, int height) {
mViewBox = new ViewBox();
this.mDx = dx;
this.mDy = dy;
this.mHeight = height;
}
@Override
public void onTreeLayout(final TreeView treeView) {
final TreeModel<String> mTreeModel = treeView.getTreeModel();
if (mTreeModel != null) {
View rootView = treeView.findNodeViewFromNodeModel(mTreeModel.getRootNode());
if (rootView != null) {
rootTreeViewLayout((NodeView) rootView);
}
mTreeModel.addForTreeItem(new ForTreeItem<NodeModel<String>>() {
@Override
public void next(int msg, NodeModel<String> next) {
doNext(msg, next, treeView);
}
});
//基本布局
mTreeModel.ergodicTreeInWith(msg_standard_layout);
//纠正
mTreeModel.ergodicTreeInWith(msg_correct_layout);
mViewBox.clear();
mTreeModel.ergodicTreeInDeep(msg_box_call_back);
}
}
@Override
public ViewBox onTreeLayoutCallBack() {
if (mViewBox != null) {
return mViewBox;
} else {
return null;
}
}
/**
* 布局纠正
*
* @param treeView
* @param next
*/
public void correctLayout(TreeView treeView, NodeView next) {
//主要是纠正对于标准布局出现的错误，譬如，在图片纠正中的那种情况
//纠正需要对同层的Note进行拉伸
}
/**
* 标准分布
*
* @param treeView
* @param rootView
*/
private void standardLayout(TreeView treeView, NodeView rootView) {
//标准分布主要是在基于root节点进行排开
//对于奇数和偶数不同的情况进行排开
//中间向外计算位置
}
/**
* 移动
*
* @param rootView
* @param dy
*/
private void moveNodeLayout(TreeView superTreeView, NodeView rootView, int dy) {
//如果一个note节点进行了移动，那么它
//会影响到它的子节点的位置。
//所以要进行重新计算，把它的所有的Note位置进行位移
}
/**
* root节点的定位
*
* @param rootView
*/
private void rootTreeViewLayout(NodeView rootView) {
int lr = mDy;
int tr = mHeight / 2 - rootView.getMeasuredHeight() / 2;
int rr = lr + rootView.getMeasuredWidth();
int br = tr + rootView.getMeasuredHeight();
rootView.layout(lr, tr, rr, br);
}
}
View的连线
要实现对View和View的连线，只要在View的位置定了之后，就进行画线即可。用Sketch画个演示如下：
Paste_Image.png
其中线为一个贝塞尔曲线。代码如下：
@Override
protected void dispatchDraw(Canvas canvas) {
if (mTreeModel != null) {
drawTreeLine(canvas, mTreeModel.getRootNode());
}
super.dispatchDraw(canvas);
}
/**
* 绘制树形的连线
*
* @param canvas
* @param root
*/
private void drawTreeLine(Canvas canvas, NodeModel<String> root) {
NodeView fatherView = (NodeView) findNodeViewFromNodeModel(root);
if (fatherView != null) {
LinkedList<NodeModel<String>> childNodes = root.getChildNodes();
for (NodeModel<String> node : childNodes) {
//连线
drawLineToView(canvas, fatherView, findNodeViewFromNodeModel(node));
//递归
drawTreeLine(canvas, node);
}
}
}
/**
* 绘制两个View直接的连线
*
* @param canvas
* @param from
* @param to
*/
private void drawLineToView(Canvas canvas, View from, View to) {
if (to.getVisibility() == GONE) {
return;
}
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
float width = 2f;
paint.setStrokeWidth(dp2px(mContext, width));
paint.setColor(mContext.getResources().getColor(R.color.chelsea_cucumber));
int top = from.getTop();
int formY = top + from.getMeasuredHeight() / 2;
int formX = from.getRight();
int top1 = to.getTop();
int toY = top1 + to.getMeasuredHeight() / 2;
int toX = to.getLeft();
Path path = new Path();
path.moveTo(formX, formY);
path.quadTo(toX - dp2px(mContext, 15), toY, toX, toY);
canvas.drawPath(path, paint);
}
位置的纠正流程
位置纠正的问题；在对于我之前的位置的算法探索流程如下图，关键是写好已知的代码，之后纠正。
纠正.png
标准位置错误.png
标准位置错误的处理.png
观察发现，所有的移动都是基于被操作的点开始的上下之分的上下移动。
最后
记得在GitHub上给我一个星吧。https://github.com/owant/ThinkMap
百度应用市场：http://shouji.baidu.com/software/11238419.html
