首页 文章 精选 留言 我的

Android中的树状(tree)列表

2017-11-22 640

树状列表前端挺常用的，还有人专门写过Ztree，Android中有的时候也需要使用到树状列表，上篇文章写了一下ExpandableListView，ExpandableListView最多支持两级结构，Android中没有三层结构的组件，这个时候需要自己去扩展，可以扩展ExpandableListView，也可以选择扩展ListView。个人觉得扩展ListView更简单一点，多级列表你可以一次性加载出来，也可以分级加载出来，一般分级比较好，点了某一级可以控制点击事件然后去加载子级，这样实现起来会想容易一点，也好理解一点。

基础维护

新建一个activity_tree.xml布局文件，里面放一个单独的ListView:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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布局文件，其中包括一个图片，一个文本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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是否展开

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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的优化:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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来监听事件:

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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初始化数据:

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
27
28
29
30
31
32
33
34
35
36
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方法中调用:

1
2
3
4
5
6
7
8
9
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注释取消，也就是加了第三层节点的效果:

1
TreeNode node7=  new  TreeNode( "辉煌国际" , TreeNode.TOP_LEVEL +  3 ,  6 , node3.getId(),  false ,  false );  

　　效果如下:

本文转自Fly_Elephant博客园博客，原文链接：http://www.cnblogs.com/xiaofeixiang/p/4109969.html，如需转载请自行联系原作者

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/367279

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android数据适配-ExpandableListView

Android中ListView的用法基本上学的时候都会使用，其中可以使用ArrayAdapter，SimpleAdapter，BaseAdapter去实现，这次主要使用的ExpandableListView展示一种两层的效果，ExpandableListView是android中可以实现下拉list的一个控件类似于QQ那种我好友之后就是一排自己的好友，就是两层效果，实现的话使用SimpleExpandableListAdapter即可。 布局文件 先看下效果： main中xml代码: 1 2 3 4 5 6 7 8 9 10 11 <Button android:onClick= "test" android:layout_width= "fill_parent" android:layout_height= "wrap_content" android:text= "FlyElephant" /> <ExpandableListView android:id= "@id/android:list" android:layout_width= "fi...
2017-11-23
501
上一篇

警惕移动互联网的“大跃进”

中国移动 互联网行业从来不缺乏故事。因为这是一个快速发展的行业。 10月12日，一个重磅炸弹在无声无息中悄然而至：海豚浏览器发布了其新版的独立内核海豚“极速内核”1.0版，该内核目前在几个关键性技术指标上均排名第一，HTML5跑分达到480分，是手机浏览器可以取得的最高分。 海豚官方表示，此次发布的极速内核的 Canvas渲染速度超过原生浏览器的10倍，稳定性超原生浏览器5倍。不过，因为苹果封闭性，海豚这一极速内核目前只针对Android系统版本。 据了解，尽管该内核支持 Android 2.3以上的版本，但它并未集成到新版浏览器中，而是以单独的内核包发放。海豚浏览器CTO刘铁峰称，用户可以独立下载该内核进行安装，并自行选择是否适用。 实际上，这则看上去热闹非常的新闻有着一个明显的疑窦：且不说独立内核的速度之快超乎想象，简单仅对稳定性的 5倍这个数字，不知道是通过什么手段测出来的，很多浏览器行业的技术专家对此表示不可思议。 所谓内行看门道，外行看热闹。行内人士在看了海豚浏览器的报道之后，认为它的极速内核功能没有任何新的功能，都是老生常谈，这种仅仅是包装上的创新，目的只有一个，就...
2017-11-23
511
下一篇

相关文章

发表评论

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2025-12-12 大小: 211.28KB 下载: 54次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-01-03 大小: 1.42GB 下载: 2次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
SpringBoot4 Redis HarmonyOS6 Rocky Docker OpenAi Nacos3 Jdk25 DeepSeek Gemini3 SpringCloud Kubernetes Service Mesh

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册