Repository files navigation

【中文】【English】⭐If ok, give me a star⭐

⭐⭐⭐⭐⭐Tree View; Mind map; Think map; tree map; 树状图；思维导图；组织机构图；层次图；树型图

A custom tree view for Android, designed for easy drawing some tree nodes (e.g. thind mind and tree nodes). Includes smoothly zoom, move, limit and center fix animation support, and allows easy extension so you can add your own child node's customs view and touch event detection.

    dependencies {//请直接使用lib中的代码，1.0.0这个引用库很久没有更新了    implementation'androidx.dynamicanimation:dynamicanimation:1.0.0'   implementation'io.github.guaishoun:gyso-treeview:1.0.1'   }

• 🍇Smoothly zoom, move
• 🍈Fix your window view port
• 🍉Custom your subview for special node
• 🍊Custom lines between nodes
• 🍋Dynamic remove nodes
• 🍌Dynamic add nodes
• 🥭Drag to rebuild the nodes' relationship

Releases & downloads

Base--Line, LayoutManger, Custom node view

Add

Remove

Drag Edit Mode

Click

Zoom and Fit Window

    <com.gyso.treeview.GysoTreeViewandroid:id="@+id/base_tree_view"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/colorBackground">    </com.gyso.treeview.GysoTreeView>

Before presentation, Animal class means you own bean class, like this:

publicclassAnimal {publicintheadId;publicStringname;}

To use a tree view, you should do5 steps as follows:

1. Customs adapter by extends TreeViewAdapter.

   publicclassAnimalTreeViewAdapterextendsTreeViewAdapter<Animal> {privateDashLinedashLine =newDashLine(Color.parseColor("#F06292"),6);@OverridepublicTreeViewHolder<Animal>onCreateViewHolder(@NonNullViewGroupviewGroup,NodeModel<Animal>node) {//TODO in inflate item viewNodeBaseLayoutBindingnodeBinding =NodeBaseLayoutBinding.inflate(LayoutInflater.from(viewGroup.getContext()),viewGroup,false);returnnewTreeViewHolder<>(nodeBinding.getRoot(),node);    }@OverridepublicvoidonBindViewHolder(@NonNullTreeViewHolder<Animal>holder) {//TODO get view and node from holder, and then control your item viewViewitemView =holder.getView();NodeModel<Animal>node =holder.getNode();...    }@OverridepublicBaselineonDrawLine(DrawInfodrawInfo) {// TODO If you return an BaseLine, line will be draw by the return one instead of TreeViewLayoutManager's// if(...){//   ...//  return dashLine;// }returnnull;    }}

2. configure layout manager. Space unit is dp. You can custom you line by extends {@link com.gyso.treeview.line.BaseLine}

   intspace_50dp =50;intspace_20dp =20;//choose a demo line or a customs line. StraightLine, PointedLine, DashLine, SmoothLine are available.Baselineline =newDashLine(Color.parseColor("#4DB6AC"),8);//choose layoout manager. VerticalTreeLayoutManager,RightTreeLayoutManager are available.TreeLayoutManagertreeLayoutManager =newBoxRightTreeLayoutManager(this,space_50dp,space_20dp,line);// TODO Other stable layout managers like below:// new BoxDownTreeLayoutManager(this,space_50dp,space_20dp,line);// new BoxLeftTreeLayoutManager(this,space_50dp,space_20dp,line);// new BoxUpTreeLayoutManager(this,space_50dp,space_20dp,line);// new BoxHorizonLeftAndRightLayoutManager(this,space_50dp,space_20dp,line);// new BoxVerticalUpAndDownLayoutManager(this,space_50dp,space_20dp,line);

3. setting adapter and layout manager for your tree view.

   ...treeView =findViewById(R.id.tree_view);TreeViewAdapteradapter =newAnimlTreeViewAdapter();treeView.setAdapter(adapter);treeView.setTreeLayoutManager(treeLayoutManager);...

4. nodes data setting

   //Create a TreeModel by using a root node.NodeModel<Animal>node0 =newNodeModel<>(newAnimal(R.drawable.ic_01,"root"));TreeModel<Animal>treeModel =newTreeModel<>(node0);//Other nodes.NodeModel<Animal>node1 =newNodeModel<>(newAnimal(R.drawable.ic_02,"sub0"));NodeModel<Animal>node2 =newNodeModel<>(newAnimal(R.drawable.ic_03,"sub1"));NodeModel<Animal>node3 =newNodeModel<>(newAnimal(R.drawable.ic_04,"sub2"));NodeModel<Animal>node4 =newNodeModel<>(newAnimal(R.drawable.ic_05,"sub3"));NodeModel<Animal>node5 =newNodeModel<>(newAnimal(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 adapteradapter.setTreeModel(treeModel);

5. If your want to edit your tree view, please use an editor.

finalTreeViewEditoreditor =binding.baseTreeView.getEditor();//add nodesNodeModel<Animal>a =newNodeModel<>(newAnimal(R.drawable.ic_13,"add-" +atomicInteger.getAndIncrement()));NodeModel<Animal>b =newNodeModel<>(newAnimal(R.drawable.ic_10,"add-" +atomicInteger.getAndIncrement()));NodeModel<Animal>c =newNodeModel<>(newAnimal(R.drawable.ic_11,"add-" +atomicInteger.getAndIncrement()));editor.addChildNodes(targetNode,a,b,c);//remove nodeeditor.removeNode(toRemoveNode);//view center in window viewporteditor.focusMidLocation()//drag to move and build new relationshipeditor.requestMoveNodeByDragging(isChecked);

Firstly, only vertical-down derection layout and right direction layout is available, more layout style should be code.

Secondly, customing lines by extends BaseLine may be a little complicate for Android beginner, and performance issues will happen if you using carefully.

Finally, this custom view will be continuely improved, if you has some innovative ideas, please tell me. Thanks for you patience.

I will tell you how it works onmy CSDN blogs.Thx.