實現Android端的簡易思維導圖。可以保存數據。編輯樹形圖。

建立模型

主要模型結構相對簡單：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?mTreeModel?=?treeView.getTreeModel();
????????if?(mTreeModel?!=?null)?{
????????????View?rootView?=?treeView.findNodeViewFromNodeModel(mTreeModel.getRootNode());
????????????if?(rootView?!=?null)?{
????????????????rootTreeViewLayout((NodeView)?rootView);
????????????}
????????????mTreeModel.addForTreeItem(new?ForTreeItem>()?{
????????????????@Override
????????????????public?void?next(int?msg,?NodeModel?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畫個演示如下：

其中線為一個貝塞爾曲線。代碼如下：

????@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?root)?{
????????NodeView?fatherView?=?(NodeView)?findNodeViewFromNodeModel(root);
????????if?(fatherView?!=?null)?{
????????????LinkedList>?childNodes?=?root.getChildNodes();
????????????for?(NodeModel?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);
????}

?

位置的糾正流程

位置糾正的問題；在對于我之前的位置的算法探索流程如下圖，關鍵是寫好已知的代碼，之后糾正。

?