开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
ThinkMap首页、文档和下载 - Android 简易思维导图控件 - 开源中国社区
全部项目分类
GPL
Java
Android
owant
分享
收藏
9 人收藏
收录时间:2017-06-26
ThinkMap 详细介绍

实现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<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画个演示如下:

其中线为一个贝塞尔曲线。代码如下:

    @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);
    }


位置的纠正流程

位置纠正的问题;在对于我之前的位置的算法探索流程如下图,关键是写好已知的代码,之后纠正。


ThinkMap

选择将代码托管在码云
你还在等什么

可能是中国最大最好的代码托管平台


大家对 ThinkMap 的评论 (全部 1 条评论)
{{repayCom.userName}}
owant
非常好,自评一波
顶部