D12-Android自定义控件之--二分搜索树

Android自定义控件和二分搜索树貌似八竿子打不着啊，最近在看数据结构，感觉还好，但是就是有点枯燥
咱也是会玩安卓的人，搞一个View模拟一下二分搜索树呗，寓学于乐。
绘图部分使用我的LogicCanvas库，使用详见Github：
当然你也可以使用安卓原生的canvas绘制，这都不是重点，思路最重要。
本项目源码在此，点击查看

功能：
1.将数据以二分搜索树的树状结构展现
2.数据添加操作，此处上滑添加随机元素
3.数据移除操作，此处下滑移除随机元素
4.不止支持数字，也支持泛型(T extends Comparable<T>)

效果：

二分搜索字符串.png

数字二叉树.png

TreeView

1.成员变量

    /**
     * 数据
     */
    private List<T> mData = new ArrayList<>();
    /**
     * 根节点
     */
    private Node root = new Node(null, v2(0, 0));

    /**
     * 绘画者
     */
    private Painter mPainter;

    /**
     * 度量标尺=网格宽度=小球直径 也决定文字大小、连线长度
     */
    private int STEP = 50;

---

2.先看一下节点类

比起常规的二分搜索树，为了方便绘制，增加pos变量，记录当前节点坐标
有一个很头疼的问题就是如果节点距离都相同，那么第三层开始就会出现点盖住点的情况
所以打算维护一个节点的当前深度来让深层的连线变短，为变相获取当前节点的深度，维护father变量

  /////////////////////////////////Node节点类
    private class Node {
        public T el;
        public Node right;
        public Node left;

        //为了确定节点的位置，增加了pos变量：即点位
        public Pos pos;
        //为了确定节点所在的层级来决定每层现场，增加了father变量
        public Node father;

        /**
         * 构造函数
         *
         * @param left  左子
         * @param right 右子
         * @param el    储存的数据元素
         */
        public Node(Node left, Node right, T el, Pos pos) {
            this.el = el;
            this.left = left;
            this.right = right;
            this.pos = pos.dotC(STEP);
        }

        public Node(T el, Pos pos) {
            this(null, null, el, pos);
        }

        /**
         * 获取当前节点所在层数
         *
         * @return 当前节点所在层数
         */
        public int getDeep() {
            int deep = 0;
            Node node = this;
            while (node.father != null) {
                node = node.father;
                deep++;
            }
            return deep;
        }

        /**
         * 树的类型
         *
         * @return 树的类型
         */
        public NodeType getType() {
            if (this.right == null) {
                if (this.left == null) {
                    return NodeType.LEAF;
                } else {
                    return NodeType.RIGHT_NULL;
                }
            }
            if (this.left == null) {
                return NodeType.LEFT_NULL;
            } else {
                return NodeType.FULL;
            }
        }
    }

    /**
     * 节点类型
     */
    enum NodeType {
        FULL,//左右非空
        LEAF,//左右皆空
        RIGHT_NULL,//右空左非空
        LEFT_NULL;//左空右非空
    }

---

3.添加节点的方法

float len = STEP * 5 / ((target.getDeep() + 1));是根据节点深度控制与子节点的连线长度
这个计算方法也许不是太好，如果你能给出更好的方式，欢迎讨论

    /**
     * 返回插入新节点后的二分搜索树的根
     *
     * @param target 目标节点
     * @param el     插入元素
     * @return 插入新节点后的二分搜索树的根
     */
    private Node addNode(Node target, T el) {
        if (target == null) {
            return new Node(null, null, el, v2(0, 0));
        }
        //根据节点深度控制与子节点的连线长度
        float len = STEP * 5 / ((target.getDeep() + 1));
        
        if (el.compareTo(target.el) < 0) {
            target.left = addNode(target.left, el);
            //维护目标节点左节点坐标，减去len
            target.left.pos = target.pos.minus(v2(len, len));
            //维护父亲节点
            target.left.father = target;
        } else if (el.compareTo(target.el) > 0) {
            target.right = addNode(target.right, el);
            //维护目标节点左节点坐标，X加len,Y减去len,
            target.right.pos = target.pos.add(v2(len, -len));
            //维护父亲节点
            target.right.father = target;
        }
        return target;
    }

4.删除节点

/**
     * 删除掉以target为根的二分搜索树中值为e的节点, 递归算法 返回删除节点后新的二分搜索树的根
     *
     * @param target 
     * @param el
     * @return
     */
    private Node removeNode(Node target, T el) {
        if (target == null) {
            return null;
        }

        if (el.compareTo(target.el) < 0) {
            target.left = removeNode(target.left, el);
        } else if (el.compareTo(target.el) > 0) {
            target.right = removeNode(target.right, el);
            return target;
        } else {//相等时
            switch (target.getType()) {
                case LEFT_NULL://左残--
                case LEAF:
                    Node rightNode = target.right;
                    target.right = null;
                    return rightNode;
                case RIGHT_NULL:
                    Node leftNode = target.left;
                    target.left = null;
                    return leftNode;
                case FULL:
                    //找后继节点
                    Node successor = getMinNode(target.right);
                    successor.right = removeMinNode(target.right);
                    successor.left = target.left;
                    target.left = target.right = null;
                    return successor;
            }
        }
        return target;
    }

---

4.绘制

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制网格
        CanvasUtils.drawGrid(getContext(), STEP, canvas);
        //获取绘图者
        mPainter = PainterEnum.INSTANCE.getInstance(canvas);
        //将数据添加入节点
        if (mData != null) {
            for (T data : mData) {
                root.el = mData.get(0);
                root = addNode(root, data);
            }
            //绘制以node为根的所有节点
            drawNode(root);
        }
    }

这里使用后续遍历时绘制

/**
     * 绘制以node为根的所有节点
     *
     * @param node
     */
    public void drawNode(Node node) {

        if (node == null) {
            return;
        }
        drawNode(node.left);
        drawNode(node.right);

        //坐标系取X中间
        Pos theCoo = v2(STEP * (mWinSize.x / STEP / 2 + 1), STEP / 2);
        //sa绘制弧形命令--360度,直径STEP,偏移node.pos，颜色黑色，坐标系原点mcoo
        mPainter.draw(
                sa.ang(360).r(STEP / 2)
                        .p(node.pos).fs(Color.BLACK).coo(theCoo));

        //绘制文字--根据节点位置确定文字位置
        Pos txtPos = node.pos.add(STEP * (mWinSize.x / STEP / 2 + 1), -STEP / 2 - STEP / 5);
        //st绘制文字命令
        mPainter.drawText(
                st.str(node.el + "").size(STEP / 3 * 2).fs(Color.WHITE)
                        .p(txtPos.refY()));

        //如果有右节点，画右线
        if (node.right != null) {
            //node.pos是节点的中心坐标,这里做了一些偏移，不会压到字
            Pos startPos = node.pos.add(STEP / 4, -STEP / 4);
            //右子的坐标
            Pos endPos = node.right.pos.add(-STEP / 4, STEP / 4);
            //sl绘制直线命令
            mPainter.draw(
                    sl.ps(startPos, endPos)
                            .coo(theCoo).b(3).ss(Color.BLACK));
        }

        //如果有左节点，画左线--同上
        if (node.left != null) {
            mPainter.draw(
                    sl.ps(node.pos.add(-STEP / 4, -STEP / 4), node.left.pos.add(STEP / 4, STEP / 4))
                            .coo(theCoo).b(3).ss(Color.BLACK));
        }

    }

暴漏的方法

    /**
     * 添加节点
     *
     * @param el 节点元素
     */
    public void add(T el) {
        mData.add(el);
    }

    /**
     * 移除节点
     *
     * @param el 节点元素
     */
    public void remove(T el) {
        mData.remove(el);
        root = removeNode(root, el);
    }

Activity中测试：

静态显示测试

val treeView = TreeView<Int>(this)
val data = ArrayList<Int>()
data.add(200)
data.add(265)
data.add(855)
data.add(67)
data.add(15)
data.add(48)
data.add(12)
data.add(585)
data.add(45)
treeView.setData(data)

动态添加、删除测试

treeView.setOnEventListener(object : BaseView.OnEventListener {
    override fun down(pos: Pos) {
    }
    override fun up(pos: Pos, speed: BaseView.MoveSpeed, orientation: BaseView.Orientation) {
        when (orientation) {
            BaseView.Orientation.TOP -> {
                val rangeInt = ZRandom.rangeInt(2, 400)
                treeView.add(rangeInt)
                treeView.invalidate()
            }
            BaseView.Orientation.BOTTOM -> {
                val el = treeView.data.get(ZRandom.rangeInt(1, treeView.data.size - 1))
                treeView.remove(el)
                treeView.invalidate()
            }
        }
    }
    override fun move(pos: Pos, s: Double, dy: Float, dx: Float, dir: Double, orientation: BaseView.Orientation) {
    }
})

---

字符串测试

        val treeView = TreeView<String>(this)
        val data = ArrayList<String>()
        data.add("f")
        data.add("c")
        data.add("a")
        data.add("g")
        data.add("z")
        data.add("d")
        data.add("o")
        data.add("w")
        data.add("g")
        data.add("q")
        treeView.setData(data)

        val treeView = TreeView<String>(this)
        val data = ArrayList<String>()
        data.add("赵")
        data.add("钱")
        data.add("孙")
        data.add("李")
        data.add("周")
        data.add("吴")
        data.add("郑")
        data.add("王")
        data.add("冯")
        data.add("陈")
        data.add("楚")
        data.add("卫")
        treeView.setData(data)

二分搜索字符串.png

就酱紫 本项目源码在此，点击查看

---

后记、

1.声明：

[1]本文由张风捷特烈原创,转载请注明
[2]欢迎广大编程爱好者共同交流
[3]个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
[4]你的喜欢与支持将是我最大的动力

2.连接传送门：

更多安卓技术欢迎访问:安卓技术栈
我的github地址：欢迎star
张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com

3.联系我

QQ:1981462002
邮箱：1981462002@qq.com
微信：zdl1994328

4.欢迎关注我的微信公众号，最新精彩文章，及时送达：

公众号.jpg