来自 金沙js77888 2020-03-02 00:29 的文章
当前位置: 金沙js77888 > 金沙js77888 > 正文

基本结构.png

最近,笔者在实现一个思维导图的开源控件。下面我简单介绍一下如下打造一个类似思维导图软件的ViewGroup。

图片 1基本结构.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( 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画个演示如下:

图片 2Paste_Image.png

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

 @Override protected void dispatchDraw(Canvas canvas) { if (mTreeModel != null) { drawTreeLine(canvas, mTreeModel.getRootNode; } super.dispatchDraw; } /** * 绘制树形的连线 * * @param canvas * @param root */ private void drawTreeLine(Canvas canvas, NodeModel<String> root) { NodeView fatherView =  findNodeViewFromNodeModel; if (fatherView != null) { LinkedList<NodeModel<String>> childNodes = root.getChildNodes(); for (NodeModel<String> node : childNodes) { //连线 drawLineToView(canvas, fatherView, findNodeViewFromNodeModel; //递归 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; 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); }

位置的纠正流程

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

图片 3纠正.png图片 4标准位置错误.png图片 5标准位置错误的处理.png

观察发现,所有的移动都是基于被操作的点开始的上下之分的上下移动

最后

记得在GitHub上给我一个星吧。

本文由金沙js77888发布于金沙js77888,转载请注明出处:基本结构.png

关键词: Android 思维