开源Android自定义思维导图控件ThinkMap树状图TreeView(类似xMind那种效果)

本文介绍了一款自定义的Android树状图开源控件,具备平滑缩放、自动回归屏幕中心等功能,并提供了详细的使用教程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简介及效果

Tree View; Mind map; Think map; tree map; 树状图;思维导图;

目前没发现比较好的Android树状图开源控件,于是决定自己写一个开源控件,对比了一下市面上关于思维导图或者树状图显示(如xMind,mind master等)的app,本文开源框架并不逊色。本控件实现了丝滑的放缩、移动、自动动画回归屏幕中心、子节点布局自定义等优点。
在我的另相关一篇文章介绍原理

github连接: https://github.com/guaishouN/android-tree-view.git
在这里插入图片描述

### 使用步骤:

下面说明中Animal类是仅仅用于举例的bean

public class Animal {
    public int headId;
    public String name;
}

按照以下四个步骤使用该开源控件

1 通过继承 TreeViewAdapter实现节点数据与节点视图的绑定

public class AnimalTreeViewAdapter extends TreeViewAdapter<Animal> {
    private DashLine dashLine =  new DashLine(Color.parseColor("#F06292"),6);
    @Override
    public TreeViewHolder<Animal> onCreateViewHolder(@NonNull ViewGroup viewGroup, NodeModel<Animal> node) {
        //TODO in inflate item view
        NodeBaseLayoutBinding nodeBinding = NodeBaseLayoutBinding.inflate(LayoutInflater.from(viewGroup.getContext()),viewGroup,false);
        return new TreeViewHolder<>(nodeBinding.getRoot(),node);
    }

    @Override
    public void onBindViewHolder(@NonNull TreeViewHolder<Animal> holder) {
        //TODO get view and node from holder, and then control your item view
        View itemView = holder.getView();
        NodeModel<Animal> node = holder.getNode();
		...
    }

    @Override
    public Baseline onDrawLine(DrawInfo drawInfo) {
        // TODO If you return an BaseLine, line will be draw by the return one instead of TreeViewLayoutManager's
		// if(...){
        //   ...
        // 	 return dashLine;
   		// }
        return null;
    }
}

2 配置LayoutManager。主要设置布局风格(向右展开或垂直向下展开)、父节点与子节点的间隙、子节点间的间隙、节点间的连线(已经实现了直线、光滑曲线、虚线、根状线,也可通过BaseLine实现你自己的连线)

int space_50dp = 50;
int space_20dp = 20;
//choose a demo line or a customs line. StraightLine, PointedLine, DashLine, SmoothLine are available.
Baseline line =  new DashLine(Color.parseColor("#4DB6AC"),8);
//choose layoout manager. VerticalTreeLayoutManager,RightTreeLayoutManager are available.
TreeLayoutManager treeLayoutManager = new RightTreeLayoutManager(this,space_50dp,space_20dp,line);

3 把Adapter和LayoutManager设置到你的树状图

...
treeView = findViewById(R.id.tree_view);   
TreeViewAdapter adapter = new AnimlTreeViewAdapter();
treeView.setAdapter(adapter);
treeView.setTreeLayoutManager(treeLayoutManager);
...

4 设置节点数据

//Create a TreeModel by using a root node.
NodeModel<Animal> node0 = new NodeModel<>(new Animal(R.drawable.ic_01,"root"));
TreeModel<Animal> treeModel = new TreeModel<>(root);

//Other nodes.
NodeModel<Animal> node1 = new NodeModel<>(new Animal(R.drawable.ic_02,"sub0"));
NodeModel<Animal> node2 = new NodeModel<>(new Animal(R.drawable.ic_03,"sub1"));
NodeModel<Animal> node3 = new NodeModel<>(new Animal(R.drawable.ic_04,"sub2"));
NodeModel<Animal> node4 = new NodeModel<>(new Animal(R.drawable.ic_05,"sub3"));
NodeModel<Animal> node5 = new NodeModel<>(new Animal(R.drawable.ic_06,"sub4"));


//Build the relationship between parent node and childs,like:
//treeModel.add(parent, child1, child2, ...., childN);
treeModel.add(node0, node1, node2);
treeModel.add(node1, node3, node4);
treeModel.add(node2, node5);

//finally set this treeModel to the adapter
adapter.setTreeModel(treeModel);

写在最后

目前只写了垂直向下布局及向右展开布局,其他的还得花时间。对于线的实现只是实现了几种,也还得丰富。在自定义自己的BaseLine线时,Android初学者注意因为画线动作是在View的onDraw(canvas)中的,所以在里面不要new对象,不要任何耗时操作。

这个项目如果有人用就会持续更新下去。喜欢点个赞,谢谢。

实现Android端的简易思维导图。可以保存数据。编辑树形图。建立模型主要模型结构相对简单:TreeModel,NoteModel,NoteView,TreeView。核心实现分布如下:2017-07-01TreeModel:树形结构的存储,树形结构的遍历,添加、删除节点;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<NodeModel>() {                 @Override                 public void next(int msg, NodeModel next) {                     doNext(msg, next, treeView);                 }             });             //基本布局             mTreeModel.ergodicTreeInWith(msg_standard_layout);   
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值