Android树形控件绘制方法

2019-12-12 04:01:56

字体：大中小

来源：转载

供稿：网友

前言

作为一个开发者，日常会接触到很多优秀的软件，其实，或多或少会有这样的想法，我能不能开发一个自己软件，甚至办公软件都希望是Markdown的文本，为何用office？我常常想自己做一个IDE什么的。但是，很多只是想了一下就过了，一直没有实现.
我接触思维导图软件已经很久的了，开始是使用微软的思维导图软件，接着XMind，后来使用了MindMaple Lite。感觉很好用的。也想过如何去实现一个思维导图的软件，加之我特别注意软件的快捷键，我选取软件常常是，看快捷如何，快捷键差的就不要了。基于自己的实践使用思维导图。前一个月我就在github上实现了一个树形图的Android控件，这个其实是我想实现思维导图的开始。实现后，才发现并没有多大的障碍。下面我就说说我如何打造一个树形控件的。先上效果：

效果1

效果2

实现

一步一步可夺城。将自己要实现的东西肢解，那些实现得了的？那些未知的？

思路步骤概要

整个结构分为：树形，节点；对于Android的结构有：模型（树形，节点），View；

实现树形的节点node 的Model；
实现树形Model;
实现View的绘制：1.添加View；2.确定Nodes的位置；3.连线Node；

详细步骤

看到思路步骤概要后，相信我们的思路已经很清晰了。感觉是不是很simple，是的，实现也如此。到这里了，我就开始编码。但是为了教会大家，我提几个疑问给大家：

树的遍历如何实现？（可以google，如果你学过数据结构当然simple了）
节点和节点这间使用什么关联？（next）
如何确定Node的位置？位置有什么规律？（？？）
如何实现两个View之间的连线？（？？）
……

其实问题还真的有一点。但是这些都不能妨碍我们的步伐，还是写好已知的代码吧。

代码

1.树的节点。主要是一些需要的数据。父节点，值，子节点，是否对焦（对于将来用的），在树形的层……

package com.owant.drawtreeview.model;import java.util.LinkedList;/** * Created by owant on 16/12/2016. */public class TreeNode<T> { /**  * the parent node,if root node parent node=null;  */ public TreeNode<T> parentNode; /**  * the data value  */ public T value; /**  * have the child nodes  */ public LinkedList<TreeNode<T>> childNodes; /**  * focus tag for the tree add nodes  */ public boolean focus; /**  * index of the tree floor  */ public int floor; public TreeNode(T value) {  this.value = value;  this.childNodes = new LinkedList<TreeNode<T>>();//  this.focus = false;//  this.parentNode = null; } public TreeNode<T> getParentNode() {  return parentNode; } public void setParentNode(TreeNode<T> parentNode) {  this.parentNode = parentNode; } public T getValue() {  return value; } public void setValue(T value) {  this.value = value; } public LinkedList<TreeNode<T>> getChildNodes() {  return childNodes; } public void setChildNodes(LinkedList<TreeNode<T>> childNodes) {  this.childNodes = childNodes; } public boolean isFocus() {  return focus; } public void setFocus(boolean focus) {  this.focus = focus; } public int getFloor() {  return floor; } public void setFloor(int floor) {  this.floor = floor; }}

2.树形。根节点，添加节点，遍历，上一个节点，下一个节点，基于点拆分的上下节点集合。

package com.owant.drawtreeview.model;import java.util.ArrayDeque;import java.util.ArrayList;import java.util.Deque;import java.util.LinkedList;import java.util.Stack;/** * Created by owant on 16/12/2016. */public class Tree<T> { /**  * the root for the tree  */ public TreeNode<T> rootNode; public Tree(TreeNode<T> rootNode) {  this.rootNode = rootNode; } /**  * add the node in some father node  *  * @param start  * @param nodes  */ public void addNode(TreeNode<T> start, TreeNode<T>... nodes) {  int index = 1;  TreeNode<T> temp = start;  if (temp.getParentNode() != null) {   index = temp.getParentNode().floor;  }  for (TreeNode<T> t : nodes) {   t.setParentNode(start);   t.setFloor(index);   start.getChildNodes().add(t);  } } public boolean remvoeNode(TreeNode<T> starNode, TreeNode<T> deleteNote) {  boolean rm = false;  int size = starNode.getChildNodes().size();  if (size > 0) {   rm = starNode.getChildNodes().remove(deleteNote);  }  return rm; } public TreeNode<T> getRootNode() {  return rootNode; } public void setRootNode(TreeNode<T> rootNode) {  this.rootNode = rootNode; } /**  * 同一个父节点的上下  *  * @param midPreNode  * @return  * @throws NotFindNodeException  */ public TreeNode<T> getLowNode(TreeNode<T> midPreNode) {  TreeNode<T> find = null;  TreeNode<T> parentNode = midPreNode.getParentNode();  if (parentNode != null && parentNode.getChildNodes().size() >= 2) {   Deque<TreeNode<T>> queue = new ArrayDeque<>();   TreeNode<T> rootNode = parentNode;   queue.add(rootNode);   boolean up = false;   while (!queue.isEmpty()) {    rootNode = (TreeNode<T>) queue.poll();    if (up) {     if (rootNode.getFloor() == midPreNode.getFloor()) {      find = rootNode;     }     break;    }    //到了该元素    if (rootNode == midPreNode) up = true;    LinkedList<TreeNode<T>> childNodes = rootNode.getChildNodes();    if (childNodes.size() > 0) {     for (TreeNode<T> item : childNodes) {      queue.add(item);     }    }   }  }  return find; } public TreeNode<T> getPreNode(TreeNode<T> midPreNode) {  TreeNode<T> parentNode = midPreNode.getParentNode();  TreeNode<T> find = null;  if (parentNode != null && parentNode.getChildNodes().size() > 0) {   Deque<TreeNode<T>> queue = new ArrayDeque<>();   TreeNode<T> rootNode = parentNode;   queue.add(rootNode);   while (!queue.isEmpty()) {    rootNode = (TreeNode<T>) queue.poll();    //到了该元素    if (rootNode == midPreNode) {     //返回之前的值     break;    }    find = rootNode;    LinkedList<TreeNode<T>> childNodes = rootNode.getChildNodes();    if (childNodes.size() > 0) {     for (TreeNode<T> item : childNodes) {      queue.add(item);     }    }   }   if (find != null && find.getFloor() != midPreNode.getFloor()) {    find = null;   }  }  return find; } public ArrayList<TreeNode<T>> getAllLowNodes(TreeNode<T> addNode) {  ArrayList<TreeNode<T>> array = new ArrayList<>();  TreeNode<T> parentNode = addNode.getParentNode();  while (parentNode != null) {   TreeNode<T> lowNode = getLowNode(parentNode);   while (lowNode != null) {    array.add(lowNode);    lowNode = getLowNode(lowNode);   }   parentNode = parentNode.getParentNode();  }  return array; } public ArrayList<TreeNode<T>> getAllPreNodes(TreeNode<T> addNode) {  ArrayList<TreeNode<T>> array = new ArrayList<>();  TreeNode<T> parentNode = addNode.getParentNode();  while (parentNode != null) {   TreeNode<T> lowNode = getPreNode(parentNode);   while (lowNode != null) {    array.add(lowNode);    lowNode = getPreNode(lowNode);   }   parentNode = parentNode.getParentNode();  }  return array; } public LinkedList<TreeNode<T>> getNodeChildNodes(TreeNode<T> node) {  return node.getChildNodes(); } public void printTree() {  Stack<TreeNode<T>> stack = new Stack<>();  TreeNode<T> rootNode = getRootNode();  stack.add(rootNode);  while (!stack.isEmpty()) {   TreeNode<T> pop = stack.pop();   System.out.println(pop.getValue().toString());   LinkedList<TreeNode<T>> childNodes = pop.getChildNodes();   for (TreeNode<T> item : childNodes) {    stack.add(item);   }  } } public void printTree2() {  Deque<TreeNode<T>> queue = new ArrayDeque<>();  TreeNode<T> rootNode = getRootNode();  queue.add(rootNode);  while (!queue.isEmpty()) {   rootNode = (TreeNode<T>) queue.poll();   System.out.println(rootNode.getValue().toString());   LinkedList<TreeNode<T>> childNodes = rootNode.getChildNodes();   if (childNodes.size() > 0) {    for (TreeNode<T> item : childNodes) {     queue.add(item);    }   }  } }}

3.测试模型 当我们实现了模型后，要写一些列子来测试模型是否正确，进行打印，遍历等测试，这是很重要的。对于树形的node的上一个node和下一个node的理解等。

4.树形的View

package com.owant.drawtreeview.view;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.util.Log;import android.util.TypedValue;import android.view.View;import android.view.ViewGroup;import com.owant.drawtreeview.R;import com.owant.drawtreeview.model.Tree;import com.owant.drawtreeview.model.TreeNode;import java.util.ArrayDeque;import java.util.ArrayList;import java.util.Deque;import java.util.LinkedList;/** * Created by owant on 09/01/2017. */public class SuperTreeView extends ViewGroup {  /**   * the default x,y mDx   */  private int mDx;  private int mDy;  private int mWith;  private int mHeight;  private Context mContext;  private Tree<String> mTree;  private ArrayList<NodeView> mNodesViews;  public SuperTreeView(Context context) {    this(context, null, 0);  }  public SuperTreeView(Context context, AttributeSet attrs) {    this(context, attrs, 0);  }  public SuperTreeView(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    mContext = context;    mNodesViews = new ArrayList<>();    mContext = context;    mDx = dp2px(mContext, 26);    mDy = dp2px(mContext, 22);  }  /**   * 添加view到Group   */  private void onAddNodeViews() {    if (mTree != null) {      TreeNode<String> rootNode = mTree.getRootNode();      Deque<TreeNode<String>> deque = new ArrayDeque<>();      deque.add(rootNode);      while (!deque.isEmpty()) {        TreeNode<String> poll = deque.poll();        NodeView nodeView = new NodeView(mContext);        nodeView.setTreeNode(poll);        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);        nodeView.setLayoutParams(lp);        this.addView(nodeView);        mNodesViews.add(nodeView);        LinkedList<TreeNode<String>> childNodes = poll.getChildNodes();        for (TreeNode<String> ch : childNodes) {          deque.push(ch);        }      }    }  }  @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    final int size = getChildCount();    for (int i = 0; i < size; i++) {      measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);    }  }  @Override  protected void onLayout(boolean changed, int l, int t, int r, int b) {    mHeight = getMeasuredHeight();    mWith = getMeasuredWidth();    if (mTree != null) {      NodeView rootView = findTreeNodeView(mTree.getRootNode());      if (rootView != null) {        //root的位置        rootTreeViewLayout(rootView);        //标准位置        for (NodeView nv : mNodesViews) {          standardTreeChildLayout(nv);        }        //基于父子的移动        for (NodeView nv : mNodesViews) {          fatherChildCorrect(nv);        }      }    }  }  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);  }  @Override  protected void dispatchDraw(Canvas canvas) {    if (mTree != null) {      drawTreeLine(canvas, mTree.getRootNode());    }    super.dispatchDraw(canvas);  }  /**   * 标准的位置分布   *   * @param rootView   */  private void standardTreeChildLayout(NodeView rootView) {    TreeNode<String> treeNode = rootView.getTreeNode();    if (treeNode != null) {      //所有的子节点      LinkedList<TreeNode<String>> childNodes = treeNode.getChildNodes();      int size = childNodes.size();      int mid = size / 2;      int r = size % 2;      //基线      //    b      //  a-------      //    c      //      int left = rootView.getRight() + mDx;      int top = rootView.getTop() + rootView.getMeasuredHeight() / 2;      int right = 0;      int bottom = 0;      if (size == 0) {        return;      } else if (size == 1) {        NodeView midChildNodeView = findTreeNodeView(childNodes.get(0));        top = top - midChildNodeView.getMeasuredHeight() / 2;        right = left + midChildNodeView.getMeasuredWidth();        bottom = top + midChildNodeView.getMeasuredHeight();        midChildNodeView.layout(left, top, right, bottom);      } else {        int topLeft = left;        int topTop = top;        int topRight = 0;        int topBottom = 0;        int bottomLeft = left;        int bottomTop = top;        int bottomRight = 0;        int bottomBottom = 0;        if (r == 0) {//偶数          for (int i = mid - 1; i >= 0; i--) {            NodeView topView = findTreeNodeView(childNodes.get(i));            NodeView bottomView = findTreeNodeView(childNodes.get(size - i - 1));            if (i == mid - 1) {              topTop = topTop - mDy / 2 - topView.getMeasuredHeight();              topRight = topLeft + topView.getMeasuredWidth();              topBottom = topTop + topView.getMeasuredHeight();              bottomTop = bottomTop + mDy / 2;              bottomRight = bottomLeft + bottomView.getMeasuredWidth();              bottomBottom = bottomTop + bottomView.getMeasuredHeight();            } else {              topTop = topTop - mDy - topView.getMeasuredHeight();              topRight = topLeft + topView.getMeasuredWidth();              topBottom = topTop + topView.getMeasuredHeight();              bottomTop = bottomTop + mDy;              bottomRight = bottomLeft + bottomView.getMeasuredWidth();              bottomBottom = bottomTop + bottomView.getMeasuredHeight();            }            topView.layout(topLeft, topTop, topRight, topBottom);            bottomView.layout(bottomLeft, bottomTop, bottomRight, bottomBottom);            bottomTop = bottomView.getBottom();          }        } else {          NodeView midView = findTreeNodeView(childNodes.get(mid));          midView.layout(left, top - midView.getMeasuredHeight() / 2, left + midView.getMeasuredWidth(),              top - midView.getMeasuredHeight() / 2 + midView.getMeasuredHeight());          topTop = midView.getTop();          bottomTop = midView.getBottom();          for (int i = mid - 1; i >= 0; i--) {            NodeView topView = findTreeNodeView(childNodes.get(i));            NodeView bottomView = findTreeNodeView(childNodes.get(size - i - 1));            topTop = topTop - mDy - topView.getMeasuredHeight();            topRight = topLeft + topView.getMeasuredWidth();            topBottom = topTop + topView.getMeasuredHeight();            bottomTop = bottomTop + mDy;            bottomRight = bottomLeft + bottomView.getMeasuredWidth();            bottomBottom = bottomTop + bottomView.getMeasuredHeight();            topView.layout(topLeft, topTop, topRight, topBottom);            bottomView.layout(bottomLeft, bottomTop, bottomRight, bottomBottom);            bottomTop = bottomView.getBottom();          }        }      }    }  }  /**   * 移动   *   * @param rootView   * @param dy   */  private void moveNodeLayout(NodeView rootView, int dy) {    Deque<TreeNode<String>> queue = new ArrayDeque<>();    TreeNode<String> rootNode = rootView.getTreeNode();    queue.add(rootNode);    while (!queue.isEmpty()) {      rootNode = (TreeNode<String>) queue.poll();      rootView = findTreeNodeView(rootNode);      int l = rootView.getLeft();      int t = rootView.getTop() + dy;      rootView.layout(l, t, l + rootView.getMeasuredWidth(), t + rootView.getMeasuredHeight());      LinkedList<TreeNode<String>> childNodes = rootNode.getChildNodes();      for (TreeNode<String> item : childNodes) {        queue.add(item);      }    }  }  private void fatherChildCorrect(NodeView nv) {    int count = nv.getTreeNode().getChildNodes().size();    if (nv.getParent() != null && count >= 2) {      TreeNode<String> tn = nv.getTreeNode().getChildNodes().get(0);      TreeNode<String> bn = nv.getTreeNode().getChildNodes().get(count - 1);      Log.i("see fc", nv.getTreeNode().getValue() + ":" + tn.getValue() + "," + bn.getValue());      int topDr = nv.getTop() - findTreeNodeView(tn).getBottom() + mDy;      int bnDr = findTreeNodeView(bn).getTop() - nv.getBottom() + mDy;      //上移动      ArrayList<TreeNode<String>> allLowNodes = mTree.getAllLowNodes(bn);      ArrayList<TreeNode<String>> allPreNodes = mTree.getAllPreNodes(tn);      for (TreeNode<String> low : allLowNodes) {        NodeView view = findTreeNodeView(low);        moveNodeLayout(view, bnDr);      }      for (TreeNode<String> pre : allPreNodes) {        NodeView view = findTreeNodeView(pre);        moveNodeLayout(view, -topDr);      }    }  }  /**   * 绘制树形的连线   *   * @param canvas   * @param root   */  private void drawTreeLine(Canvas canvas, TreeNode<String> root) {    NodeView fatherView = findTreeNodeView(root);    if (fatherView != null) {      LinkedList<TreeNode<String>> childNodes = root.getChildNodes();      for (TreeNode<String> node : childNodes) {        drawLineToView(canvas, fatherView, findTreeNodeView(node));        drawTreeLine(canvas, node);      }    }  }  /**   * 绘制两个View直接的连线   *   * @param canvas   * @param from   * @param to   */  private void drawLineToView(Canvas canvas, View from, View to) {    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);  }  private NodeView findTreeNodeView(TreeNode<String> node) {    NodeView v = null;    for (NodeView view : mNodesViews) {      if (view.getTreeNode() == node) {        v = view;        continue;      }    }    return v;  }  public int dp2px(Context context, float dpVal) {    int result = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, context.getResources()        .getDisplayMetrics());    return result;  }  public void setTree(Tree<String> tree) {    this.mTree = tree;    onAddNodeViews();  }  public Tree<String> getTree() {    return mTree;  }}

粘贴代码后发现，没有什么好说了，对于读者来说，应该是一脸懵逼的。毕竟，那个位置是如何确定的呀，view和view的连线呀…… 对于整个View来说这是最难的，我也是探索了好久才得出结论的。首先，对于一个只有两层的树形来说，如图：

PQRS是基于F来计算的，之后分布。之后我就得到的方法如下：

/**   * 标准的位置分布   *   * @param rootView   */  private void standardTreeChildLayout(NodeView rootView) {    TreeNode<String> treeNode = rootView.getTreeNode();    if (treeNode != null) {      //所有的子节点      LinkedList<TreeNode<String>> childNodes = treeNode.getChildNodes();      int size = childNodes.size();      int mid = size / 2;      int r = size % 2;      //基线      //    b      //  a-------      //    c      //      int left = rootView.getRight() + mDx;      int top = rootView.getTop() + rootView.getMeasuredHeight() / 2;      int right = 0;      int bottom = 0;      if (size == 0) {        return;      } else if (size == 1) {        NodeView midChildNodeView = findTreeNodeView(childNodes.get(0));        top = top - midChildNodeView.getMeasuredHeight() / 2;        right = left + midChildNodeView.getMeasuredWidth();        bottom = top + midChildNodeView.getMeasuredHeight();        midChildNodeView.layout(left, top, right, bottom);      } else {        int topLeft = left;        int topTop = top;        int topRight = 0;        int topBottom = 0;        int bottomLeft = left;        int bottomTop = top;        int bottomRight = 0;        int bottomBottom = 0;        if (r == 0) {//偶数          for (int i = mid - 1; i >= 0; i--) {            NodeView topView = findTreeNodeView(childNodes.get(i));            NodeView bottomView = findTreeNodeView(childNodes.get(size - i - 1));            if (i == mid - 1) {              topTop = topTop - mDy / 2 - topView.getMeasuredHeight();              topRight = topLeft + topView.getMeasuredWidth();              topBottom = topTop + topView.getMeasuredHeight();              bottomTop = bottomTop + mDy / 2;              bottomRight = bottomLeft + bottomView.getMeasuredWidth();              bottomBottom = bottomTop + bottomView.getMeasuredHeight();            } else {              topTop = topTop - mDy - topView.getMeasuredHeight();              topRight = topLeft + topView.getMeasuredWidth();              topBottom = topTop + topView.getMeasuredHeight();              bottomTop = bottomTop + mDy;              bottomRight = bottomLeft + bottomView.getMeasuredWidth();              bottomBottom = bottomTop + bottomView.getMeasuredHeight();            }            topView.layout(topLeft, topTop, topRight, topBottom);            bottomView.layout(bottomLeft, bottomTop, bottomRight, bottomBottom);            bottomTop = bottomView.getBottom();          }        } else {          NodeView midView = findTreeNodeView(childNodes.get(mid));          midView.layout(left, top - midView.getMeasuredHeight() / 2, left + midView.getMeasuredWidth(),              top - midView.getMeasuredHeight() / 2 + midView.getMeasuredHeight());          topTop = midView.getTop();          bottomTop = midView.getBottom();          for (int i = mid - 1; i >= 0; i--) {            NodeView topView = findTreeNodeView(childNodes.get(i));            NodeView bottomView = findTreeNodeView(childNodes.get(size - i - 1));            topTop = topTop - mDy - topView.getMeasuredHeight();            topRight = topLeft + topView.getMeasuredWidth();            topBottom = topTop + topView.getMeasuredHeight();            bottomTop = bottomTop + mDy;            bottomRight = bottomLeft + bottomView.getMeasuredWidth();            bottomBottom = bottomTop + bottomView.getMeasuredHeight();            topView.layout(topLeft, topTop, topRight, topBottom);            bottomView.layout(bottomLeft, bottomTop, bottomRight, bottomBottom);            bottomTop = bottomView.getBottom();          }        }      }    }  }

之后等到的View情况如下: