转载请标明出处：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 打造随意层级树形控件考验你的数据结构和设计

1、概述

2、原理分析

3、使用方法

4、实现

1、思路

2、Node

3、TreeListViewAdapter

4、TreeHelper

5、注解的类

5、最后的展望

最新文章

热门文章

巴特西

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

1、概述

2、原理分析

3、使用方法

4、实现

1、思路

2、Node

3、TreeListViewAdapter

4、TreeHelper

5、注解的类

5、最后的展望

最新文章

热门文章

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