首页 > 代码库 > 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 打造随意层级树形控件 考验你的数据结构和设计