Android打造随意层级树形控件考验你的数据结构和设计

行是知之始,知是行之成。这篇文章主要讲述Android打造随意层级树形控件考验你的数据结构和设计相关的知识，希望能为你提供帮助。
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/40212367，本文出自：【张鸿洋的博客】1、概述大家在项目中或多或少的可能会见到，偶尔有的项目须要在APP上显示个树形控件，比方展示一个机构组织，最上面是boss。然后各种部门。各种小boss，最后各种小罗罗。总体是一个树形结构。遇到这种情况，大家可能回去百度。由于层次多嘛，可能更easy想到ExpandableListView ，由于这玩意层级比Listview多。可是ExpandableListView实现眼下仅仅支持两级，当然也有人改造成多级的；可是从我个人角度去看，首先我不喜欢ExpandableListView ，数据集的组织比較复杂。
所以今天带大家使用ListView来打造一个树形展示效果。ListView应该是大家再熟悉只是的控件了，而且数据集也就是个List< T> 。

本篇博客目标实现，仅仅要是符合树形结构的数据能够轻松的通过我们的代码，实现树形效果，有多轻松，文末就知道了~~
好了，既然是要展现树形结构。那么数据上肯定就是树形的一个依赖。也就是说。你的每条记录，至少有个字段指向它的父节点；相似（id , pId, others ....）
2、原理分析先看看我们的效果图：

文章图片

我们支持随意层级，包括item的布局依旧让用户自己的去控制，我们的demo的Item布局非常easy。一个图标+文本~~
原理就是，树形不树形。事实上不就是多个缩进么，仅仅要能够推断每一个item属于树的第几层（术语貌似叫高度），设置合适的缩进就可以。
当然了。原理说起来简单，还得控制每一层间关系，加入展开缩回等，以及有了缩进还要能显示在正确的位置，只是没关系，我会带着大家一步一步实现的。
3、使用方法由于总体比較长，我决定首先带大家看一下使用方法，就是假设学完了这篇博客。我们须要树形控件，我们须要花多少精力去完毕~~
如今需求来了：我如今须要展示一个文件管理系统的树形结构：
数据是这种：

//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:

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

package com.zhy.tree_view; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; import com.zhy.bean.FileBean; import com.zhy.tree.bean.TreeListViewAdapter; public class MainActivity extends Activity { private List< FileBean> mDatas = new ArrayList< FileBean> (); private ListView mTree; private TreeListViewAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initDatas(); mTree = (ListView) findViewById(R.id.id_tree); try {mAdapter = new SimpleTreeAdapter< FileBean> (mTree, this, mDatas, 10); mTree.setAdapter(mAdapter); } catch (IllegalAccessException e) { e.printStackTrace(); } } private void initDatas() {// 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")); }}

Activity里面并没有什么特殊的代码。拿到listview。传入mData，当中初始化了一个Adapter；
看来我们的核心代码都在我们的Adapter里面：
那么看一眼我们的Adapter

package com.zhy.tree_view; import java.util.List; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; import com.zhy.tree.bean.Node; import com.zhy.tree.bean.TreeListViewAdapter; public class SimpleTreeAdapter< T> extends TreeListViewAdapter< T> { public SimpleTreeAdapter(ListView mTree, Context context, List< T> datas, int defaultExpandLevel) throws IllegalArgumentException, IllegalAccessException { super(mTree, context, datas, defaultExpandLevel); } @Override public View getConvertView(Node node , int position, View convertView, ViewGroup parent) {ViewHolder viewHolder = null; if (convertView == null) { convertView = mInflater.inflate(R.layout.list_item, parent, false); viewHolder = new ViewHolder(); viewHolder.icon = (ImageView) convertView .findViewById(R.id.id_treenode_icon); viewHolder.label = (TextView) convertView .findViewById(R.id.id_treenode_label); convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); }if (node.getIcon() == -1) { viewHolder.icon.setVisibility(View.INVISIBLE); } else { viewHolder.icon.setVisibility(View.VISIBLE); viewHolder.icon.setImageResource(node.getIcon()); } viewHolder.label.setText(node.getName()); return convertView; } private final class ViewHolder { ImageView icon; TextView label; }}

我们的SimpleTreeAdapter继承了我们的TreeListViewAdapter ；除此之外，代码上仅仅须要复写getConvertView 。且getConvetView事实上和我们平时的getView写法一致；
发布出getConvertView 的目的是，让用户自己去决定Item的展示效果。其它的代码，我已经打包成jar了，用的时候导入就可以。
这样就完毕了我们的树形控件。

也就是说用我们的树形控件，仅仅须要将传统继承BaseAdapter改为我们的TreeListViewAdapter 。然后去实现getConvertView 就好了。
那么如今的效果是：

文章图片

默认就全打开了，由于我们也支持动态设置打开的层级。方面使用者使用。
用起来是不是非常随意，加几个注解，ListView的Adapater换个类继承下~~好了。以下開始带大家一起从无到有的实现~

4、实现
1、思路我们的思路是这种，我们显示时。须要非常多属性，我们须要知道当前节点是否是父节点，当前的层级。他的孩子节点等等。可是用户的数据集是不固定的，最多仅仅能给出相似id。pId 这种属性。也就是说，用户给的bean并不适合我们用于控制显示，于是我们准备这样做：
1、在用户的Bean中提取出必要的几个元素 id , pId , 以及显示的文本（通过注解+反射）；然后组装成我们的真正显示时的Node。即List< Bean> -> List< Node>
2、显示的并不是是全部的Node。比方某些节点的父节点是关闭状态，我们须要进行过滤；即List< Node> -> 过滤后的List< Node>
3、显示时，比方点击父节点，它的子节点会尾随其后显示，我们内部是个List，也就是说，这个List的顺序也是非常关键的；当然排序我们能够放为步骤一；
最后将过滤后的Node进行显示，设置左内边距就可以。

说了这么多。首先看一眼我们封装后的Node
2、Node

package com.zhy.tree.bean; import java.util.ArrayList; import java.util.List; import org.w3c.dom.NamedNodeMap; import android.util.Log; public class Node { private int id; /** * 根节点pId为0 */ private int pId = 0; private String name; /** * 当前的级别 */ private int level; /** * 是否展开 */ private boolean isExpand = false; private int icon; /** * 下一级的子Node */ private List< Node> children = new ArrayList< Node> (); /** * 父Node */ private Node parent; public Node() { } public Node(int id, int pId, String name) { super(); this.id = id; this.pId = pId; this.name = name; } public int getIcon() { return icon; } public void setIcon(int icon) { this.icon = icon; } public int getId() { return id; } public void setId(int id) { this.id = id; } public int getpId() { return pId; } public void setpId(int pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public void setLevel(int level) { this.level = level; } public boolean isExpand() { return isExpand; } public List< Node> getChildren() { return children; } public void setChildren(List< Node> children) { this.children = children; } public Node getParent() { return parent; } public void setParent(Node parent) { this.parent = parent; } /** * 是否为跟节点 * * @return */ public boolean isRoot() { return parent == null; } /** * 推断父节点是否展开 * * @return */ public boolean isParentExpand() { if (parent == null) return false; return parent.isExpand(); } /** * 是否是叶子界点 * * @return */ public boolean isLeaf() { return children.size() == 0; } /** * 获取level */ public int getLevel() { return parent == null ?
0 : parent.getLevel() + 1; } /** * 设置展开 * * @param isExpand */ public void setExpand(boolean isExpand) { this.isExpand = isExpand; if (!isExpand) {for (Node node : children) { node.setExpand(isExpand); } } }}

包括了树节点一些常见的属性，一些常见的方法；对于getLevel，setExpand这些方法。大家能够好好看看~

有了Node，刚才的使用方法中，出现的就是我们Adapter所继承的超类：TreeListViewAdapter；核心代码都在里面。我们准备去一探到底：
3、TreeListViewAdapter代码不是非常长。直接完整的贴出：

package com.zhy.tree.bean; import java.util.List; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.BaseAdapter; import android.widget.ListView; public abstract class TreeListViewAdapter< T> extends BaseAdapter { protected Context mContext; /** * 存储全部可见的Node */ protected List< Node> mNodes; protected LayoutInflater mInflater; /** * 存储全部的Node */ protected List< Node> mAllNodes; /** * 点击的回调接口 */ private OnTreeNodeClickListener onTreeNodeClickListener; public interface OnTreeNodeClickListener { void onClick(Node node, int position); } public void setOnTreeNodeClickListener( OnTreeNodeClickListener onTreeNodeClickListener) { this.onTreeNodeClickListener = onTreeNodeClickListener; } /** * * @param mTree * @param context * @param datas * @param defaultExpandLevel *默认展开几级树 * @throws IllegalArgumentException * @throws IllegalAccessException */ public TreeListViewAdapter(ListView mTree, Context context, List< T> datas, int defaultExpandLevel) throws IllegalArgumentException, IllegalAccessException { mContext = context; /** * 对全部的Node进行排序 */ mAllNodes = TreeHelper.getSortedNodes(datas, defaultExpandLevel); /** * 过滤出可见的Node */ mNodes = TreeHelper.filterVisibleNode(mAllNodes); mInflater = LayoutInflater.from(context); /** * 设置节点点击时，能够展开以及关闭。而且将ItemClick事件继续往外发布 */ mTree.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView< ?
> parent, View view, int position, long id) { expandOrCollapse(position); if (onTreeNodeClickListener != null) { onTreeNodeClickListener.onClick(mNodes.get(position), position); } }}); } /** * 相应ListView的点击事件展开或关闭某节点 * * @param position */ public void expandOrCollapse(int position) { Node n = mNodes.get(position); if (n != null)// 排除传入參数错误异常 { if (!n.isLeaf()) { n.setExpand(!n.isExpand()); mNodes = TreeHelper.filterVisibleNode(mAllNodes); notifyDataSetChanged(); // 刷新视图 } } } @Override public int getCount() { return mNodes.size(); } @Override public Object getItem(int position) { return mNodes.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { Node node = mNodes.get(position); convertView = getConvertView(node, position, convertView, parent); // 设置内边距 convertView.setPadding(node.getLevel() * 30, 3, 3, 3); return convertView; } public abstract View getConvertView(Node node, int position, View convertView, ViewGroup parent); }

首先我们的类继承自BaseAdapter，然后我们相应的数据集是，过滤出的可见的Node。
我们的构造方法默认接收4个參数：listview,context,mdatas,以及默认展开的级数：0仅仅显示根节点；
能够在构造方法中看到：对用户传入的数据集做了排序，和过滤的操作。一会再看这些方法，这些方法我们使用了一个TreeHelper进行了封装。
注：假设你认为你的Item布局十分复杂。且布局会展示Bean的其它数据。那么为了方便，你能够让Node中包括一个泛型T ，每一个Node携带与之对于的Bean的全部数据。
能够看到我们还直接为Item设置了点击事件。由于我们树，默认就有点击父节点展开与关闭；可是为了让用户依旧可用点击监听，我们自己定义了一个点击的回调供用户使用。
当用户点击时，默认调用expandOrCollapse方法。将当然节点重置展开标志，然后又一次过滤出可见的Node。最后notifyDataSetChanged就可以；
其它的方法都是BaseAdapter默认的一些方法了。
以下我们看下TreeHelper中的一些方法：
4、TreeHelper首先看TreeListViewAdapter构造方法中用到的两个方法：

/** * 传入我们的普通bean，转化为我们排序后的Node * @param datas * @param defaultExpandLevel * @return * @throws IllegalArgumentException * @throws IllegalAccessException */ public static < T> List< Node> getSortedNodes(List< T> datas, int defaultExpandLevel) throws IllegalArgumentException, IllegalAccessException { List< Node> result = new ArrayList< Node> (); //将用户数据转化为List< Node> 以及设置Node间关系 List< Node> nodes = convetData2Node(datas); //拿到根节点 List< Node> rootNodes = getRootNodes(nodes); //排序 for (Node node : rootNodes) { addNode(result, node, defaultExpandLevel, 1); } return result; }

拿到用户传入的数据。转化为List< Node> 以及设置Node间关系，然后根节点，从根往下遍历进行排序；
接下来看：filterVisibleNode

/** * 过滤出全部可见的Node * * @param nodes * @return */ public static List< Node> filterVisibleNode(List< Node> nodes) { List< Node> result = new ArrayList< Node> (); for (Node node : nodes) { // 假设为跟节点，或者上层文件夹为展开状态 if (node.isRoot() || node.isParentExpand()) { setNodeIcon(node); result.add(node); } } return result; }

过滤Node的代码非常easy，遍历全部的Node，仅仅要是根节点或者父节点是展开状态就加入返回；
最后看看这两个方法用到的别的一些私有方法：

/** * 将我们的数据转化为树的节点 * * @param datas * @return * @throws NoSuchFieldException * @throws IllegalAccessException * @throws IllegalArgumentException */ private static < T> List< Node> convetData2Node(List< T> datas) throws IllegalArgumentException, IllegalAccessException { List< Node> nodes = new ArrayList< Node> (); Node node = null; for (T t : datas) { int id = -1; int pId = -1; String label = null; Class< ? extends Object> clazz = t.getClass(); Field[] declaredFields = clazz.getDeclaredFields(); for (Field f : declaredFields) { if (f.getAnnotation(TreeNodeId.class) != null) { f.setAccessible(true); id = f.getInt(t); } if (f.getAnnotation(TreeNodePid.class) != null) { f.setAccessible(true); pId = f.getInt(t); } if (f.getAnnotation(TreeNodeLabel.class) != null) { f.setAccessible(true); label = (String) f.get(t); } if (id != -1 & & pId != -1 & & label != null) { break; } } node = new Node(id, pId, label); nodes.add(node); }/** * 设置Node间，父子关系; 让每两个节点都比較一次。就可以设置当中的关系 */ for (int i = 0; i < nodes.size(); i++) { Node n = nodes.get(i); for (int j = i + 1; j < nodes.size(); j++) { Node m = nodes.get(j); if (m.getpId() == n.getId()) { n.getChildren().add(m); m.setParent(n); } else if (m.getId() == n.getpId()) { m.getChildren().add(n); n.setParent(m); } } }// 设置图片 for (Node n : nodes) { setNodeIcon(n); } return nodes; } private static List< Node> getRootNodes(List< Node> nodes) { List< Node> root = new ArrayList< Node> (); for (Node node : nodes) { if (node.isRoot()) root.add(node); } return root; } /** * 把一个节点上的全部的内容都挂上去 */ private static void addNode(List< Node> nodes, Node node, int defaultExpandLeval, int currentLevel) {nodes.add(node); if (defaultExpandLeval > = currentLevel) { node.setExpand(true); }if (node.isLeaf()) return; for (int i = 0; i < node.getChildren().size(); i++) { addNode(nodes, node.getChildren().get(i), defaultExpandLeval, currentLevel + 1); } } /** * 设置节点的图标 * * @param node */ private static void setNodeIcon(Node node) { if (node.getChildren().size() > 0 & & node.isExpand()) { node.setIcon(R.drawable.tree_ex); } else if (node.getChildren().size() > 0 & & !node.isExpand()) { node.setIcon(R.drawable.tree_ec); } else node.setIcon(-1); }

convetData2Node即遍历用户传入的Bean，转化为Node。当中Id，pId。label通过注解加反射获取；然后设置Node间关系；

getRootNodes 这个简单，获得根节点

addNode ：通过递归的方式，把一个节点上的全部的子节点等都按顺序放入；

setNodeIcon ：设置图标，这里标明。我们的jar还依赖两个小图标。即两个三角形。假设你认为树不须要这种图标，能够去掉；

5、注解的类最后就是我们的3个注解类了，没撒用。就启到一个标识的作用
TreeNodeId

package com.zhy.tree.bean; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; @Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) public @interface TreeNodeId { }

TreeNodePid

package com.zhy.tree.bean; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; @Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) public @interface TreeNodePid {}

TreeNodeLabel

package com.zhy.tree.bean; import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target; @Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) public @interface TreeNodeLabel {}

5、最后的展望基于上面的样例。我们还有非常多地方能够改善，以下我提一下：
1、Item的布局依赖非常多Bean的属性。在Node中使用泛型存储与之相应的Bean。这样在getConvertView中就能够通过Node获取到原本的Bean数据了；
2、关于自己定义或者不要三角图标；能够让TreeListViewAdapter发布出设置图标的方法，Node全部使用TreeListViewAdapter中设置的图标；关于不显示，直接getConverView里面无论就可以了；
3、我们通过注解得到的Id ,pId , label 。假设嫌慢，能够通过回调的方式进行获取。我们遍历的时候，去通过Adapter中定义相似：abstract int getId(T t) ；将t作为參数，让用户返回id ，相似还有 pid ，label ；这样循环的代码须要从ViewHelper提取到Adapter构造方法中；
4、关于设置包括复选框。选择了多个Node，不要保存position完事。去保存Node中的Id即原Bean的主键；然后在getConvertView中对Id进行对照，防止错乱；
5、关于注解，眼下注解仅仅启到了标识的左右；事实上还能干非常多事，比方默认我们任务用户的id , pid是整形。可是有可能是别的类型；我们能够通过在注解中设置方法来确定，比如：

@Target(ElementType.FIELD) @Retention(RetentionPolicy.RUNTIME) public @interface TreeNodeId { Class type() ; }

@TreeNodeId(type = Integer.class) private int _id;

当然了，假设你的需求没有上述改动的须要，就不须要折腾了~~
到此，我们整个博客就结束了~~设计中假设存在不足，大家能够自己去改善；希望大家通过本博客学习到的不仅是一个样例怎样实现。很多其它的是怎样设计；当然鄙人能力有限，请大家自行去其糟粕；

源代码点击下载（已经打成jar）

源代码点击下载（未打成jar版）

博主部分视频已经上线。假设你不喜欢枯燥的文本。请猛戳（初录，期待您的支持）：
1、高仿微信5.2.1主界面及消息提醒
2、高仿QQ5.0側滑

【Android打造随意层级树形控件考验你的数据结构和设计】