Android中的树状(tree)列表
树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构,Android中没有三层结构的组件,这个时候需要自己去扩展,可以扩展ExpandableListView,也可以选择扩展ListView。个人觉得扩展ListView更简单一点,多级列表你可以一次性加载出来,也可以分级加载出来,一般分级比较好,点了某一级可以控制点击事件然后去加载子级,这样实现起来会想容易一点,也好理解一点。
基础维护
新建一个activity_tree.xml布局文件,里面放一个单独的ListView:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.googletree.TreeActivity" > <ListView
android:id="@+id/tree_list"
android:layout_width="match_parent"
android:layout_height="match_parent"/> </RelativeLayout>
tree_item布局文件,其中包括一个图片,一个文本:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" > <ImageView
android:id="@+id/homeImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"/> <TextView
android:id="@+id/treeText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@id/homeImg"/> </RelativeLayout>
Demo实现
需要展示一个树状结构的数据,先定义一个TreeNode类,需要展示数据其中主要讲下几个字段,父级和子级之间的关系你可以用ParentId判断也可以使用Code来区分,看个人喜好:
文本:contentText
ID号:ID
ParentId:父级ID
hasChildren:判断是不是末级
isExpanded:item是否展开
public class TreeNode {
/** 文字内容 */
private String contentText;
/** 在tree中的层级 */
private int level;
/** 元素的id */
private int id;
/** 父元素的id */
private int parendId;
/** 是否有子元素 */
private boolean hasChildren;
/** item是否展开 */
private boolean isExpanded; /** 表示该节点没有父元素,也就是level为0的节点 */
public static final int NO_PARENT = -1;
/** 表示该元素位于最顶层的层级 */
public static final int TOP_LEVEL = 0; public TreeNode(String contentText, int level, int id, int parendId,
boolean hasChildren, boolean isExpanded) {
super();
this.contentText = contentText;
this.level = level;
this.id = id;
this.parendId = parendId;
this.hasChildren = hasChildren;
this.isExpanded = isExpanded;
} public boolean isExpanded() {
return isExpanded;
} public void setExpanded(boolean isExpanded) {
this.isExpanded = isExpanded;
} public String getContentText() {
return contentText;
} public void setContentText(String contentText) {
this.contentText = contentText;
} public int getLevel() {
return level;
} public void setLevel(int level) {
this.level = level;
} public int getId() {
return id;
} public void setId(int id) {
this.id = id;
} public int getParendId() {
return parendId;
} public void setParendId(int parendId) {
this.parendId = parendId;
} public boolean isHasChildren() {
return hasChildren;
} public void setHasChildren(boolean hasChildren) {
this.hasChildren = hasChildren;
}
}
为了填充视图的中ListView,需要自定义TreeAdapter,之前的文章关于ListView中使用Adapter介绍过,如果需要具体怎么使用的可以看下之前的文章,主要使用了一个ViewHolder的优化:
public class TreeAdapter extends BaseAdapter {
/** 所有的数据集合 */
private ArrayList<TreeNode> allNodes;
/** 顶层元素结合*/
private ArrayList<TreeNode> topNodes;
/** LayoutInflater */
private LayoutInflater inflater;
/** item的行首缩进基数 */
private int indentionBase; public TreeViewAdapter(ArrayList<TreeNode> topNodes, ArrayList<TreeNode> allNodes, LayoutInflater inflater) {
this.topNodes = topNodes;
this.allNodes = allNodes;
this.inflater = inflater;
indentionBase =20;
}
public ArrayList<TreeNode> getTopNodes() {
return topNodes;
} public ArrayList<TreeNode> getAllNodes() {
return allNodes;
} @Override
public int getCount() {
return topNodes.size();
} @Override
public Object getItem(int position) {
return topNodes.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
holder = new ViewHolder();
convertView = inflater.inflate(R.layout.tree_item, null);
holder.homeImg = (ImageView) convertView.findViewById(R.id.homeImg);
holder.treeText = (TextView) convertView.findViewById(R.id.treeText);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
TreeNode element = topNodes.get(position);
int level =element.getLevel();
holder.homeImg.setPadding(
indentionBase * (level + 1),
holder.homeImg.getPaddingTop(),
holder.homeImg.getPaddingRight(),
holder.homeImg.getPaddingBottom());
holder.treeText.setText(element.getContentText());
if (element.isHasChildren() && !element.isExpanded()) {
holder.homeImg.setImageResource(R.drawable.open);
//这里要主动设置一下icon可见,因为convertView有可能是重用了"设置了不可见"的view,下同。
holder.homeImg.setVisibility(View.VISIBLE);
} else if (element.isHasChildren() && element.isExpanded()) {
holder.homeImg.setImageResource(R.drawable.open);
holder.homeImg.setVisibility(View.VISIBLE);
} else if (!element.isHasChildren()) {
holder.homeImg.setImageResource(R.drawable.open);
holder.homeImg.setVisibility(View.VISIBLE);
}
return convertView;
} static class ViewHolder{
ImageView homeImg;
TextView treeText;
}
}
由于每次都是加载一层节点,需要自己控制点击事件,自定义一个TreeItemClickListener来监听事件:
public class TreeItemClickListener implements OnItemClickListener {
/** 定义的适配器 */
private TreeViewAdapter treeViewAdapter; public TreeViewItemClickListener(TreeViewAdapter treeViewAdapter) {
this.treeViewAdapter = treeViewAdapter;
} @Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
//点击的item代表的元素
TreeNode treeNode = (TreeNode) treeViewAdapter.getItem(position);
//树中顶层的元素
ArrayList<TreeNode> topNodes = treeViewAdapter.getTopNodes();
//元素的数据源
ArrayList<TreeNode> allNodes = treeViewAdapter.getAllNodes(); //点击没有子项的item直接返回
if (!treeNode.isHasChildren()) {
return;
} if (treeNode.isExpanded()) {
treeNode.setExpanded(false);
//删除节点内部对应子节点数据,包括子节点的子节点...
ArrayList<TreeNode> elementsToDel = new ArrayList<TreeNode>();
for (int i = position + 1; i < topNodes.size(); i++) {
if (treeNode.getLevel() >= topNodes.get(i).getLevel())
break;
elementsToDel.add(topNodes.get(i));
}
topNodes.removeAll(elementsToDel);
treeViewAdapter.notifyDataSetChanged();
} else {
treeNode.setExpanded(true);
//从数据源中提取子节点数据添加进树,注意这里只是添加了下一级子节点,为了简化逻辑
int i = 1;//注意这里的计数器放在for外面才能保证计数有效
for (TreeNode e : allNodes) {
if (e.getParendId() == treeNode.getId()) {
e.setExpanded(false);
topNodes.add(position + i, e);
i ++;
}
}
treeViewAdapter.notifyDataSetChanged();
}
} }
activity初始化数据:
private void init() {
topNodes = new ArrayList<TreeNode>();
allNodes = new ArrayList<TreeNode>(); //添加节点 -- 节点名称,节点level,节点id,父节点id,是否有子节点,是否展开 //添加最外层节点
TreeNode node1= new TreeNode("北京市", TreeNode.TOP_LEVEL, 0, TreeNode.NO_PARENT, true, false); //添加第一层节点
TreeNode node2= new TreeNode("海淀区", TreeNode.TOP_LEVEL + 1, 1, node1.getId(), true, false);
//添加第二层节点
TreeNode node3= new TreeNode("西二旗", TreeNode.TOP_LEVEL + 2, 2, node2.getId(), true, false);
//添加第三层节点
// TreeNode node7= new TreeNode("辉煌国际", TreeNode.TOP_LEVEL + 3, 6, node3.getId(), false, false); //添加第一层节点
TreeNode node4= new TreeNode("河南省", TreeNode.TOP_LEVEL , 3, TreeNode.NO_PARENT, true, false);
//添加第二层节点
TreeNode node5= new TreeNode("郑州市", TreeNode.TOP_LEVEL + 1, 4, node4.getId(), true, false);
//添加第三层节点
TreeNode node6= new TreeNode("金水区", TreeNode.TOP_LEVEL + 2, 5, node5.getId(), false, false); //添加初始树元素
topNodes.add(node1);
topNodes.add(node4);
//创建数据源
allNodes.add(node1);
allNodes.add(node2);
allNodes.add(node3);
allNodes.add(node4);
allNodes.add(node5);
allNodes.add(node6);
// allNodes.add(node7);
}
oncreate方法中调用:
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); init(); ListView treeview = (ListView) findViewById(R.id.tree_list);
TreeViewAdapter treeViewAdapter = new TreeViewAdapter(topNodes, allNodes, inflater);
TreeViewItemClickListener treeViewItemClickListener = new TreeViewItemClickListener(treeViewAdapter);
treeview.setAdapter(treeViewAdapter);
treeview.setOnItemClickListener(treeViewItemClickListener);
效果如下:
全部展开:
这个时候把treeActivity中那个node7注释取消,也就是加了第三层节点的效果:
TreeNode node7= new TreeNode("辉煌国际", TreeNode.TOP_LEVEL + 3, 6, node3.getId(), false, false);
效果如下:
Android中的树状(tree)列表的更多相关文章
- GTK+中的树状列表构件(GtkTreeView)
GTK+中的树状列表构件(GtkTreeView) GTK+中的树状列表构件(GtkTreeView) 在本章的GTK+程序设计教程中,我们将向大家重点介绍非常常用也有点复杂的构件--GtkTreeV ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- oracle中的树状查询
oracle中的树状查询 工作中经常会遇到将数据库中的数据以树的形式展现的需求.以下我们来看一下该需求在Oracle中如何实现. 首先我们需要有一个树形的表结构(当然有时候会出现表结构不是典型的树形结 ...
- android中RecyclerView控件的列表项横向排列
本文是在上一篇文章的基础上做的修改:android中RecyclerView控件的使用 1.修改列表项news_item.xml:我这里是把新闻标题挪到了新闻图片的下面显示 <?xml vers ...
- php中构建树状图
/** * 指定根层级的树状图 * @param array $list 初始数组 * @param int $root 最上级一条数据的id * @param string $pk 每一条数据的id ...
- Android中SimpleAdapter的使用—自定义列表
本人初学Android,今天研究到Adapter这块感觉挺有意思的,写了个自定义列表进行测试 首先我们新建一个layout列表布局文件,具体布局可以自己设定. 下面贴上我的自定义布局文件代码 < ...
- mysql中递归树状结构<转>
在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. ...
- VIM树状文件列表NERDTree
下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloose/nerdtree 下载zip安装包 或者使用下面官网源文件安装方法 ...
- 手把手教学~基于element封装tree树状下拉框
在日常项目开发中,树状下拉框的需求还是比较常见的,但是element并没有这种组件以供使用.在这里,小编就基于element如何封装一个树状下拉框做个详细的介绍. 通过这篇文章,你可以了解学习到一个树 ...
随机推荐
- JAVA单向链表实现
JAVA单向链表实现 单向链表 链表和数组一样是一种最常用的线性数据结构,两者各有优缺点.数组我们知道是在内存上的一块连续的空间构成,所以其元素访问可以通过下标进行,随机访问速度很快,但数组也有其缺点 ...
- CSUOJ 1018 Avatar
Description In the planet Pandora, Jake found an old encryption algorithm. The plaintext, key and ci ...
- poj-2253-poj-1797_最短路练习
title: poj-2253-poj-1797_最短路练习 date: 2018-11-17 11:48:51 tags: acm 刷题 categories: ACM-最短路 概述 一道最短路的变 ...
- Java 中的异常
前段时间集合的整理真的是给我搞得心力交瘁啊,现在可以整理一些稍微简单一点的,搭配学习 ~ 突然想到一个问题,这些东西我之前就整理过,现在再次整理有什么区别嘛?我就自问自答一下,可能我再次整理会看到不一 ...
- 【基础知识】.Net基础加强 第四天
一. 显示实现接口 1. 显示实现接口的目的:为了解决法方法重名的问题. 2. 显示实现接口必须是私有的,不能用public 3. (复习)类中成员不写访问修饰符默认是private:类如果不写访问修 ...
- Rsync服务部署使用
rsync服务搭建过程(daemon模式) 配置服务 在/etc/rsyncd.conf文件中写入相应的配置: uid = root gid = root use chroot = no max co ...
- HDU 5715 XOR 游戏 二分+字典树
XOR 游戏 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5715 Description 众所周知,度度熊喜欢XOR运算(XOR百科). 今天,它 ...
- 【bzoj2005】 [Noi2010]能量采集 数学结论(gcd)
[bzoj2005] [Noi2010]能量采集 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnli ...
- dwr.jar简介
DWR(Direct Web Remotiong)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架, 可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运 ...
- C++ Primer 学习笔记_34_STL实践与分析(8) --引言、pair类型、关联容器
STL实践与分析 --引言.pair类型.关联容器 引言: 关联容器与顺序容器的本质差别在于:关联容器通过键[key]来存储和读取元素,而顺序容器则通过元素在容器中的位置顺序的存取元素. ma ...