1、概述
大家在项目中或多或少的可能会见到,偶尔有的项目需要在APP上显示个树形控件,比如展示一个机构组织,最上面是boss,然后各种部门,各种小boss,最后各种小罗罗;整体是一个树形结构;遇到这样的情况,大家可能回去百度,因为层次多嘛,可能更容易想到ExpandableListView , 因为这玩意层级比Listview多,但是ExpandableListView实现目前只支持两级,当然也有人改造成多级的;但是从我个人角度去看,首先我不喜欢ExpandableListView ,数据集的组织比较复杂。所以今天带大家使用ListView来打造一个树形展示效果。ListView应该是大家再熟悉不过的控件了,并且数据集也就是个List<T> 。
本篇博客目标实现,只要是符合树形结构的数据可以轻松的通过我们的代码,实现树形效果,有多轻松,文末就知道了~~
好了,既然是要展现树形结构,那么数据上肯定就是树形的一个依赖,也就是说,你的每条记录,至少有个字段指向它的父节点;类似(id , pId, others ….)
2、原理分析
先看看我们的效果图:
我们支持任意层级,包括item的布局依然让用户自己的去控制,我们的demo的Item布局很简单,一个图标+文本~~
原理就是,树形不树形,其实不就是多个缩进么,只要能够判断每个item属于树的第几层(术语貌似叫高度),设置合适的缩进即可。
当然了,原理说起来简单,还得控制每一层间关系,添加展开缩回等,以及有了缩进还要能显示在正确的位置,不过没关系,我会带着大家一步一步实现的。
3、用法
由于整体比较长,我决定首先带大家看一下用法,就是如果学完了这篇博客,我们需要树形控件,我们需要花多少精力去完成~~
现在需求来了:我现在需要展示一个文件管理系统的树形结构:
数据是这样的:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//id , pid , label , 其他属性 mDatas.add(new FileBean(1, 0, "文件管理系统")); mDatas.add(new FileBean(2, 1, "游戏")); mDatas.add(new FileBean(3, 1, "文档")); mDatas.add(new FileBean(4, 1, "程序")); mDatas.add(new FileBean(5, 2, "war3")); mDatas.add(new FileBean(6, 2, "刀塔传奇")); mDatas.add(new FileBean(7, 4, "面向对象")); mDatas.add(new FileBean(8, 4, "非面向对象")); mDatas.add(new FileBean(9, 7, "C++")); mDatas.add(new FileBean(10, 7, "JAVA")); mDatas.add(new FileBean(11, 7, "Javascript")); mDatas.add(new FileBean(12, 8, "C")); |
当然了,bean可以有很多属性,我们提供你动态的设置树节点上的显示、以及不约束id, pid 的命名,你可以起任意丧心病狂的属性名称;
那么我们如何确定呢?
看下Bean:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
package com.zhy.bean; import com.zhy.tree.bean.TreeNodeId; import com.zhy.tree.bean.TreeNodeLabel; import com.zhy.tree.bean.TreeNodePid; public class FileBean { @TreeNodeId private int _id; @TreeNodePid private int parentId; @TreeNodeLabel private String name; private long length; private String desc; public FileBean(int _id, int parentId, String name) { super(); this._id = _id; this.parentId = parentId; this.name = name; } } |
现在,不用说,应该也知道我们通过注解来确定的。
下面看我们如何将这数据转化为树
布局文件就一个listview,就补贴了,直接看Activity