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

当然了，原理说起来简单，还得控制每一层间关系，添加展开缩回等，以及有了缩进还要能显示在正确的位置，不过没关系，我会带着大家一步一步实现的。

3、用法

=======================================================================

由于整体比较长，我决定首先带大家看一下用法，就是如果学完了这篇博客，我们需要树形控件，我们需要花多少精力去完成~~

现在需求来了：我现在需要展示一个文件管理系统的树形结构：

数据是这样的：

[html]  view plain copy

1. //id , pid , label , 其他属性

2. mDatas.add(new FileBean(1, 0, “文件管理系统”));

3. mDatas.add(new FileBean(2, 1, “游戏”));

4. mDatas.add(new FileBean(3, 1, “文档”));

5. mDatas.add(new FileBean(4, 1, “程序”));

6. mDatas.add(new FileBean(5, 2, “war3”));

7. mDatas.add(new FileBean(6, 2, “刀塔传奇”));

8. mDatas.add(new FileBean(7, 4, “面向对象”));

9. mDatas.add(new FileBean(8, 4, “非面向对象”));

10. mDatas.add(new FileBean(9, 7, “C++”));

11. mDatas.add(new FileBean(10, 7, “JAVA”));

12. mDatas.add(new FileBean(11, 7, “Javascript”));

13. mDatas.add(new FileBean(12, 8, “C”));

当然了，bean可以有很多属性，我们提供你动态的设置树节点上的显示、以及不约束id, pid 的命名，你可以起任意丧心病狂的属性名称；

那么我们如何确定呢？

看下Bean:

[java]  view plain copy

1. package com.zhy.bean;

2. import com.zhy.tree.bean.TreeNodeId;

3. import com.zhy.tree.bean.TreeNodeLabel;

4. import com.zhy.tree.bean.TreeNodePid;

5. public class FileBean

6. {

7. @TreeNodeId

8. private int _id;

9. @TreeNodePid

10. private int parentId;

11. @TreeNodeLabel

12. private String name;

13. private long length;

14. private String desc;

15. public FileBean(int _id, int parentId, String name)

16. {

17. super();

18. this._id = _id;

19. this.parentId = parentId;

20. this.name = name;

21. }

22. }

现在，不用说，应该也知道我们通过注解来确定的。

下面看我们如何将这数据转化为树

布局文件就一个listview，就补贴了，直接看Activity

[java]  view plain copy

1. package com.zhy.tree_view;

2. import java.util.ArrayList;

3. import java.util.List;

4. import android.app.Activity;

5. import android.os.Bundle;

6. import android.widget.ListView;

7. import com.zhy.bean.FileBean;

8. import com.zhy.tree.bean.TreeListViewAdapter;

9. public class MainActivity extends Activity

10. {

11. private List mDatas = new ArrayList();

12. private ListView mTree;

13. private TreeListViewAdapter mAdapter;

14. @Override

15. protected void onCreate(Bundle savedInstanceState)

16. {

17. super.onCreate(savedInstanceState);

18. setContentView(R.layout.activity_main);

19. initDatas();

20. mTree = (ListView) findViewById(R.id.id_tree);

21. try

22. {

23. mAdapter = new SimpleTreeAdapter(mTree, this, mDatas, 10);

24. mTree.setAdapter(mAdapter);

25. } catch (IllegalAccessException e)

26. {

27. e.printStackTrace();

28. }

29. }

30. private void initDatas()

31. {

32. // id , pid , label , 其他属性

33. mDatas.add(new FileBean(1, 0, “文件管理系统”));

34. mDatas.add(new FileBean(2, 1, “游戏”));

35. mDatas.add(new FileBean(3, 1, “文档”));

36. mDatas.add(new FileBean(4, 1, “程序”));

37. mDatas.add(new FileBean(5, 2, “war3”));

38. mDatas.add(new FileBean(6, 2, “刀塔传奇”));

39. mDatas.add(new FileBean(7, 4, “面向对象”));

40. mDatas.add(new FileBean(8, 4, “非面向对象”));

41. mDatas.add(new FileBean(9, 7, “C++”));

42. mDatas.add(new FileBean(10, 7, “JAVA”));

43. mDatas.add(new FileBean(11, 7, “Javascript”));

44. mDatas.add(new FileBean(12, 8, “C”));

45. }

46. }

Activity里面并没有什么特殊的代码，拿到listview，传入mData，当中初始化了一个Adapter；

看来我们的核心代码都在我们的Adapter里面：

那么看一眼我们的Adapter

[java]  view plain copy

1. package com.zhy.tree_view;

2. import java.util.List;

3. import android.content.Context;

4. import android.view.View;

5. import android.view.ViewGroup;

6. import android.widget.ImageView;

7. import android.widget.ListView;

8. import android.widget.TextView;

9. import com.zhy.tree.bean.Node;

10. import com.zhy.tree.bean.TreeListViewAdapter;

11. public class SimpleTreeAdapter extends TreeListViewAdapter

12. {

13. public SimpleTreeAdapter(ListView mTree, Context context, List datas,

14. int defaultExpandLevel) throws IllegalArgumentException,

15. IllegalAccessException

16. {

17. super(mTree, context, datas, defaultExpandLevel);

18. }

19. @Override

20. public View getConvertView(Node node , int position, View convertView, ViewGroup parent)

21. {

22. ViewHolder viewHolder = null;

23. if (convertView == null)

24. {

25. convertView = mInflater.inflate(R.layout.list_item, parent, false);

26. viewHolder = new ViewHolder();

27. viewHolder.icon = (ImageView) convertView

28. .findViewById(R.id.id_treenode_icon);

29. viewHolder.label = (TextView) convertView

30. .findViewById(R.id.id_treenode_label);

31. convertView.setTag(viewHolder);

32. } else

33. {

34. viewHolder = (ViewHolder) convertView.getTag();

35. }

36. if (node.getIcon() == -1)

37. {

38. viewHolder.icon.setVisibility(View.INVISIBLE);

39. } else

40. {

41. viewHolder.icon.setVisibility(View.VISIBLE);

42. viewHolder.icon.setImageResource(node.getIcon());

43. }

44. viewHolder.label.setText(node.getName());

45. return convertView;

46. }

47. private final class ViewHolder

48. {

49. ImageView icon;

50. TextView label;

51. }

52. }

我们的SimpleTreeAdapter继承了我们的TreeListViewAdapter ； 除此之外，代码上只需要复写getConvertView ， 且getConvetView其实和我们平时的getView写法一致；

公布出getConvertView 的目的是，让用户自己去决定Item的展示效果。其他的代码，我已经打包成jar了，用的时候导入即可。这样就完成了我们的树形控件。

也就是说用我们的树形控件，只需要将传统继承BaseAdapter改为我们的TreeListViewAdapter ，然后去实现getConvertView 就好了。

那么现在的效果是：

默认就全打开了，因为我们也支持动态设置打开的层级，方面使用者使用。

用起来是不是很随意，加几个注解，ListView的Adapater换个类继承下~~好了，下面开始带大家一起从无到有的实现~

4、实现

=======================================================================

1、思路

---

我们的思路是这样的，我们显示时，需要很多属性，我们需要知道当前节点是否是父节点，当前的层级，他的孩子节点等等；但是用户的数据集是不固定的，最多只能给出类似id，pId 这样的属性。也就是说，用户给的bean并不适合我们用于控制显示，于是我们准备这样做：

1、在用户的Bean中提取出必要的几个元素 id , pId , 以及显示的文本（通过注解+反射）；然后组装成我们的真正显示时的Node；即List -> List

2、显示的并非是全部的Node，比如某些节点的父节点是关闭状态，我们需要进行过滤；即List ->过滤后的List

3、显示时，比如点击父节点，它的子节点会跟随其后显示，我们内部是个List，也就是说，这个List的顺序也是很关键的；当然排序我们可以放为步骤一；

最后将过滤后的Node进行显示，设置左内边距即可。

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

2、Node

---

[java]  view plain copy [](https://code.csdn.net/snippet

资料获取→专栏
s/489360/fork “派生到我的代码片”)

1. package com.zhy.tree.bean;

2. import java.util.ArrayList;

3. import java.util.List;

4. import org.w3c.dom.NamedNodeMap;

5. import android.util.Log;

6. public class Node

7. {

8. private int id;

9. /**

10. * 根节点pId为0

11. */

12. private int pId = 0;

13. private String name;

14. /**

15. * 当前的级别

16. */

17. private int level;

18. /**

19. * 是否展开

20. */

21. private boolean isExpand = false;

22. private int icon;

23. /**

24. * 下一级的子Node

25. */

26. private List children = new ArrayList();

27. /**

28. * 父Node

29. */

30. private Node parent;

31. public Node()

32. {

33. }

34. public Node(int id, int pId, String name)

35. {

36. super();

37. this.id = id;

38. this.pId = pId;

39. this.name = name;

40. }

41. public int getIcon()

42. {

43. return icon;

44. }

45. public void setIcon(int icon)

46. {

47. this.icon = icon;

48. }

49. public int getId()

50. {

51. return id;

52. }

53. public void setId(int id)

54. {

55. this.id = id;

56. }

57. public int getpId()

58. {

59. return pId;

60. }

61. public void setpId(int pId)

62. {

63. this.pId = pId;

64. }

65. public String getName()

66. {

67. return name;

68. }

69. public void setName(String name)

70. {

71. this.name = name;

72. }

73. public void setLevel(int level)

74. {

75. this.level = level;

76. }

77. public boolean isExpand()

78. {

79. return isExpand;

80. }

81. public List getChildren()

82. {

83. return children;

84. }

85. public void setChildren(List children)

86. {

87. this.children = children;

88. }

89. public Node getParent()

90. {

91. return parent;

92. }

93. public void setParent(Node parent)

94. {

95. this.parent = parent;

96. }

97. /**

98. * 是否为跟节点

99. *

100. * @return

101. */

102. public boolean isRoot()

103. {

104. return parent == null;

105. }

106. /**

107. * 判断父节点是否展开

108. *

109. * @return

110. */

111. public boolean isParentExpand()

112. {

113. if (parent == null)

114. return false;

115. return parent.isExpand();

116. }

117. /**

118. * 是否是叶子界点

119. *

120. * @return

121. */

122. public boolean isLeaf()

123. {

124. return children.size() == 0;

125. }

126. /**

127. * 获取level

128. */

129. public int getLevel()

130. {

131. return parent == null ? 0 : parent.getLevel() + 1;

132. }

133. /**

134. * 设置展开

135. *

136. * @param isExpand

137. */

138. public void setExpand(boolean isExpand)

139. {

140. this.isExpand = isExpand;

141. if (!isExpand)

142. {

143. for (Node node : children)

144. {

145. node.setExpand(isExpand);

146. }

147. }

148. }

149. }

包含了树节点一些常见的属性，一些常见的方法；对于getLevel，setExpand这些方法，大家可以好好看看~

有了Node，刚才的用法中，出现的就是我们Adapter所继承的超类：TreeListViewAdapter；核心代码都在里面，我们准备去一探究竟：

3、TreeListViewAdapter

---

代码不是很长，直接完整的贴出：

[java]  view plain copy

1. package com.zhy.tree.bean;

2. import java.util.List;

3. import android.content.Context;

4. import android.view.LayoutInflater;

5. import android.view.View;

6. import android.view.ViewGroup;

7. import android.widget.AdapterView;

8. import android.widget.AdapterView.OnItemClickListener;

9. import android.widget.BaseAdapter;

10. import android.widget.ListView;

11. public abstract class TreeListViewAdapter extends BaseAdapter

12. {

13. protected Context mContext;

14. /**

15. * 存储所有可见的Node

16. */

17. protected List mNodes;

18. protected LayoutInflater mInflater;

19. /**

20. * 存储所有的Node

21. */

22. protected List mAllNodes;

23. /**

24. * 点击的回调接口

25. */

26. private OnTreeNodeClickListener onTreeNodeClickListener;

27. public interface OnTreeNodeClickListener

28. {

29. void onClick(Node node, int position);

30. }

31. public void setOnTreeNodeClickListener(

32. OnTreeNodeClickListener onTreeNodeClickListener)

33. {

34. this.onTreeNodeClickListener = onTreeNodeClickListener;

35. }

36. /**

37. *

38. * @param mTree

39. * @param context

40. * @param datas

41. * @param defaultExpandLevel

42. *            默认展开几级树

43. * @throws IllegalArgumentException

44. * @throws IllegalAccessException

45. */

46. public TreeListViewAdapter(ListView mTree, Context context, List datas,

47. int defaultExpandLevel) throws IllegalArgumentException,

48. IllegalAccessException

49. {

50. mContext = context;

51. /**

52. * 对所有的Node进行排序

53. */

54. mAllNodes = TreeHelper.getSortedNodes(datas, defaultExpandLevel);

55. /**

56. * 过滤出可见的Node

57. */

58. mNodes = TreeHelper.filterVisibleNode(mAllNodes);

59. mInflater = LayoutInflater.from(context);

60. /**

61. * 设置节点点击时，可以展开以及关闭；并且将ItemClick事件继续往外公布

62. */

63. mTree.setOnItemClickListener(new OnItemClickListener()

64. {

65. @Override

66. public void onItemClick(AdapterView<?> parent, View view,

67. int position, long id)

68. {

69. expandOrCollapse(position);

70. if (onTreeNodeClickListener != null)

71. {

72. onTreeNodeClickListener.onClick(mNodes.get(position),

73. position);

74. }

75. }

76. });

77. }

78. /**

79. * 相应ListView的点击事件 展开或关闭某节点

80. *

81. * @param position

82. */

83. public void expandOrCollapse(int position)

84. {

85. Node n = mNodes.get(position);

86. if (n != null)// 排除传入参数错误异常

87. {

88. if (!n.isLeaf())

89. {

90. n.setExpand(!n.isExpand());

91. mNodes = TreeHelper.filterVisibleNode(mAllNodes);

92. notifyDataSetChanged();// 刷新视图

93. }

94. }

95. }

96. @Override

97. public int getCount()

98. {

99. return mNodes.size();

100. }

101. @Override

102. public Object getItem(int position)

103. {

104. return mNodes.get(position);

105. }

106. @Override

107. public long getItemId(int position)

108. {

109. return position;

110. }

111. @Override

112. public View getView(int position, View convertView, ViewGroup parent)

113. {

114. Node node = mNodes.get(position);

115. convertView = getConvertView(node, position, convertView, parent);

116. // 设置内边距

117. convertView.setPadding(node.getLevel() * 30, 3, 3, 3);

118. return convertView;

119. }

120. public abstract View getConvertView(Node node, int position,

121. View convertView, ViewGroup parent);

122. }

首先我们的类继承自BaseAdapter，然后我们对应的数据集是，过滤出的可见的Node；

我们的构造方法默认接收4个参数：listview,context,mdatas,以及默认展开的级数：0只显示根节点；

可以在构造方法中看到：对用户传入的数据集做了排序，和过滤的操作；一会再看这些方法，这些方法我们使用了一个TreeHelper进行了封装。

注：如果你觉得你的Item布局十分复杂，且布局会展示Bean的其他数据，那么为了方便，你可以让Node中包含一个泛型T ， 每个Node携带与之对于的Bean的所有数据；

可以看到我们还直接为Item设置了点击事件，因为我们树，默认就有点击父节点展开与关闭；但是为了让用户依然可用点击监听，我们自定义了一个点击的回调供用户使用；

当用户点击时，默认调用expandOrCollapse方法，将当然节点重置展开标志，然后重新过滤出可见的Node，最后notifyDataSetChanged即可；

其他的方法都是BaseAdapter默认的一些方法了。

下面我们看下TreeHelper中的一些方法：

4、TreeHelper

---

首先看TreeListViewAdapter构造方法中用到的两个方法：

[java]  view plain copy

1. /**

2. * 传入我们的普通bean，转化为我们排序后的Node

3. * @param datas

4. * @param defaultExpandLevel

5. * @return

6. * @throws IllegalArgumentException

7. * @throws IllegalAccessException

8. */

9. public static  List getSortedNodes(List datas,

10. int defaultExpandLevel) throws IllegalArgumentException,

11. IllegalAccessException

12. {

13. List result = new ArrayList();

14. //将用户数据转化为List以及设置Node间关系

15. List nodes = convetData2Node(datas);

16. //拿到根节点

17. List rootNodes = getRootNodes(nodes);

18. //排序

19. for (Node node : rootNodes)

20. {

21. addNode(result, node, defaultExpandLevel, 1);

22. }

23. return result;

24. }

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

接下来看：filterVisibleNode

[java]  view plain copy

1. /**

2. * 过滤出所有可见的Node

3. *

4. * @param nodes

5. * @return

6. */

7. public static List filterVisibleNode(List nodes)

8. {

9. List result = new ArrayList();

10. for (Node node : nodes)

11. {

12. // 如果为跟节点，或者上层目录为展开状态

13. if (node.isRoot() || node.isParentExpand())

14. {

15. setNodeIcon(node);

16. result.add(node);

17. }

18. }

19. return result;

20. }

过滤Node的代码很简单，遍历所有的Node，只要是根节点或者父节点是展开状态就添加返回；

最后看看这两个方法用到的别的一些私有方法：

[java]  view plain copy

1. /**

2. * 将我们的数据转化为树的节点

3. *

4. * @param datas

5. * @return

6. * @throws NoSuchFieldException

7. * @throws IllegalAccessException

8. * @throws IllegalArgumentException

9. */

10. private static  List convetData2Node(List datas)

11. throws IllegalArgumentException, IllegalAccessException

12. {

13. List nodes = new ArrayList();

14. Node node = null;

15. for (T t : datas)

16. {

17. int id = -1;

18. int pId = -1;

19. String label = null;

20. Class<? extends Object> clazz = t.getClass();

21. Field[] declaredFields = clazz.getDeclaredFields();

22. for (Field f : declaredFields)

23. {

24. if (f.getAnnotation(TreeNodeId.class) != null)

21. }

过滤Node的代码很简单，遍历所有的Node，只要是根节点或者父节点是展开状态就添加返回；

最后看看这两个方法用到的别的一些私有方法：

[java]  view plain copy [外链图片转存中…(img-aIv1Lbro-1718726703521)] [外链图片转存中…(img-U8pm6OhO-1718726703521)]

1. /**

2. * 将我们的数据转化为树的节点

3. *

4. * @param datas

5. * @return

6. * @throws NoSuchFieldException

7. * @throws IllegalAccessException

8. * @throws IllegalArgumentException

9. */

10. private static  List convetData2Node(List datas)

11. throws IllegalArgumentException, IllegalAccessException

12. {

13. List nodes = new ArrayList();

14. Node node = null;

15. for (T t : datas)

16. {

17. int id = -1;

18. int pId = -1;

19. String label = null;

20. Class<? extends Object> clazz = t.getClass();

21. Field[] declaredFields = clazz.getDeclaredFields();

22. for (Field f : declaredFields)

23. {

24. if (f.getAnnotation(TreeNodeId.class) != null)