项目中有多个地方要用到多级列表的菜单,最开始我用的是ExpandableListView,但问题是ExpandableListView只支持两级列表,于是我就用ExpandableListView嵌套ExpandableListView,但非常麻烦,而且关键的是具体分几级是不确定的,也就是可能一级,可能多级,这要是五六级嵌套ListView,于是我就去学习鸿洋大神之前写的一篇关于实现Android多级树形列表的文章,实现很巧妙,使用一个ListView就可以实现多级列表效果,我做了部分修改,功能顺利实现。
1.定义节点实体类:
package com.xiaoyehai.multileveltreelist.treelist; import java.util.ArrayList; import java.util.List; /** * 节点实体类 * Created by xiaoyehai on 2018/7/11 0011. */ public class Node<T> { /** * 当前节点id */ private String id; /** * 父节点id */ private String pid; /** * 节点数据实体类 */ private T data; /** * 设置开启 关闭的图片 */ public int iconExpand = -1, iconNoExpand = -1; /** * 节点名称 */ private String name; /** * 当前的级别 */ private int level; /** * 是否展开 */ private boolean isExpand = false; private int icon = -1; /** * 下一级的子Node */ private List<Node> children = new ArrayList<>(); /** * 父Node */ private Node parent; /** * 是否被checked选中 */ private boolean isChecked; public Node() { } public Node(String id, String pid, String name) { this.id = id; this.pid = pid; this.name = name; } public Node(String id, String pid, T data, String name) { this.id = id; this.pid = pid; this.data = data; this.name = name; } /** * 是否为根节点 * * @return */ public boolean isRootNode() { 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); } } } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getPid() { return pid; } public void setPid(String pid) { this.pid = pid; } public T getData() { return data; } public void setData(T data) { this.data = data; } public int getIconExpand() { return iconExpand; } public void setIconExpand(int iconExpand) { this.iconExpand = iconExpand; } public int getIconNoExpand() { return iconNoExpand; } public void setIconNoExpand(int iconNoExpand) { this.iconNoExpand = iconNoExpand; } 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 int getIcon() { return icon; } public void setIcon(int icon) { this.icon = icon; } 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; } public boolean isChecked() { return isChecked; } public void setChecked(boolean checked) { isChecked = checked; } }
2.定义每个节点数据的实体类
因为项目中多个地方用到树形菜单,而且数据都不一样,每个节点数据都比较复杂,所以我单独封装出一个类,要是数据和简单,这步可以不用,直接用Node类。
例如:
/** * 每个节点的具体数据 * Created by xiaoyehai on 2018/7/11 0011. */ public class NodeData { private String name; public NodeData() { } public NodeData(String name) { this.name = name; } public String getName() { return name; } public void setName(String name) { this.name = name; } }
3.TreeHelper
package com.xiaoyehai.multileveltreelist.treelist; import java.util.ArrayList; import java.util.List; /** * Created by xiaoyehai on 2018/7/11 0011. */ public class TreeHelper { /** * 传入node 返回排序后的Node * 拿到用户传入的数据,转化为List<Node>以及设置Node间关系,然后根节点,从根往下遍历进行排序; * * @param datas * @param defaultExpandLevel 默认显示 * @return * @throws IllegalArgumentException * @throws IllegalAccessException */ public static List<Node> getSortedNodes(List<Node> datas, int defaultExpandLevel) { List<Node> result = new ArrayList<Node>(); // 设置Node间父子关系 List<Node> nodes = convetData2Node(datas); // 拿到根节点 List<Node> rootNodes = getRootNodes(nodes); // 排序以及设置Node间关系 for (Node node : rootNodes) { addNode(result, node, defaultExpandLevel, 1); } return result; } /** * 过滤出所有可见的Node * 过滤Node的代码很简单,遍历所有的Node,只要是根节点或者父节点是展开状态就添加返回 * * @param nodes * @return */ public static List<Node> filterVisibleNode(List<Node> nodes) { List<Node> result = new ArrayList<Node>(); for (Node node : nodes) { // 如果为跟节点,或者上层目录为展开状态 if (node.isRootNode() || node.isParentExpand()) { setNodeIcon(node); result.add(node); } } return result; } /** * 将我们的数据转化为树的节点 * 设置Node间,父子关系;让每两个节点都比较一次,即可设置其中的关系 */ private static List<Node> convetData2Node(List<Node> nodes) { 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() instanceof String) { if (m.getPid().equals(n.getId())) { //n时m的父节点 n.getChildren().add(m); m.setParent(n); } else if (m.getId().equals(n.getPid())) { //m时n的父节点 m.getChildren().add(n); n.setParent(m); } } else { 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); } } } } return nodes; } /** * 获得根节点 * * @param nodes * @return */ private static List<Node> getRootNodes(List<Node> nodes) { List<Node> root = new ArrayList<Node>(); for (Node node : nodes) { if (node.isRootNode()) root.add(node); } return root; } /** * 把一个节点上的所有的内容都挂上去 * 通过递归的方式,把一个节点上的所有的子节点等都按顺序放入 */ private static <T> void addNode(List<Node> nodes, Node<T> 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(node.iconExpand); } else if (node.getChildren().size() > 0 && !node.isExpand()) { node.setIcon(node.iconNoExpand); } else { node.setIcon(-1); } } }
4.TreeListViewAdapter
对于ListView的适配器,需要继承自TreeListViewAdapter,如
package com.xiaoyehai.multileveltreelist.treelist; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.BaseAdapter; import android.widget.ListView; import java.util.ArrayList; import java.util.List; /** * Created by xiaoyehai on 2018/7/11 0011. */ public abstract class TreeListViewAdapter extends BaseAdapter { protected Context mContext; /** * 默认不展开 */ private int defaultExpandLevel = 0; /** * 展开与关闭的图片 */ private int iconExpand = -1, iconNoExpand = -1; /** * 存储所有的Node */ protected List<Node> mAllNodes = new ArrayList<>(); protected LayoutInflater mInflater; /** * 存储所有可见的Node */ protected List<Node> mNodes = new ArrayList<>(); /** * 点击的回调接口 */ private OnTreeNodeClickListener onTreeNodeClickListener; public void setOnTreeNodeClickListener(OnTreeNodeClickListener onTreeNodeClickListener) { this.onTreeNodeClickListener = onTreeNodeClickListener; } public TreeListViewAdapter(ListView listView, Context context, List<Node> datas, int defaultExpandLevel, int iconExpand, int iconNoExpand) { this.mContext = context; this.defaultExpandLevel = defaultExpandLevel; this.iconExpand = iconExpand; this.iconNoExpand = iconNoExpand; for (Node node : datas) { node.getChildren().clear(); node.setIconExpand(iconExpand); node.setIconNoExpand(iconNoExpand); } /** * 对所有的Node进行排序 */ mAllNodes = TreeHelper.getSortedNodes(datas, defaultExpandLevel); /** * 过滤出可见的Node */ mNodes = TreeHelper.filterVisibleNode(mAllNodes); mInflater = LayoutInflater.from(context); /** * 设置节点点击时,可以展开以及关闭;并且将ItemClick事件继续往外公布 */ listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { expandOrCollapse(position); if (onTreeNodeClickListener != null) { onTreeNodeClickListener.onClick(mNodes.get(position), position); } } }); } /** * @param listView * @param context * @param datas * @param defaultExpandLevel 默认展开几级树 */ public TreeListViewAdapter(ListView listView, Context context, List<Node> datas, int defaultExpandLevel) { this(listView, context, datas, defaultExpandLevel, -1, -1); } /** * 相应ListView的点击事件 展开或关闭某节点 * * @param position */ public void expandOrCollapse(int position) { Node n = mNodes.get(position); if (n != null) {// 排除传入参数错误异常 if (!n.isLeaf()) { n.setExpand(!n.isExpand()); //获取所有可见的Node 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() * 50, 12, 12, 12); return convertView; } /** * 获取排序后所有节点 * * @return */ public List<Node> getAllNodes() { if (mAllNodes == null) mAllNodes = new ArrayList<Node>(); return mAllNodes; } /** * 获取所有选中节点 * * @return */ public List<Node> getSelectedNode() { List<Node> checks = new ArrayList<Node>(); for (int i = 0; i < mAllNodes.size(); i++) { Node n = mAllNodes.get(i); if (n.isChecked()) { checks.add(n); } } return checks; } /** * 设置多选 * * @param node * @param checked */ protected void setChecked(final Node node, boolean checked) { node.setChecked(checked); setChildChecked(node, checked); if (node.getParent() != null) setNodeParentChecked(node.getParent(), checked); notifyDataSetChanged(); } /** * 设置是否选中 * * @param node * @param checked */ public <T> void setChildChecked(Node<T> node, boolean checked) { if (!node.isLeaf()) { node.setChecked(checked); for (Node childrenNode : node.getChildren()) { setChildChecked(childrenNode, checked); } } else { node.setChecked(checked); } } private void setNodeParentChecked(Node node, boolean checked) { if (checked) { node.setChecked(checked); if (node.getParent() != null) setNodeParentChecked(node.getParent(), checked); } else { List<Node> childrens = node.getChildren(); boolean isChecked = false; for (Node children : childrens) { if (children.isChecked()) { isChecked = true; } } //如果所有自节点都没有被选中 父节点也不选中 if (!isChecked) { node.setChecked(checked); } if (node.getParent() != null) setNodeParentChecked(node.getParent(), checked); } } /** * 清除掉之前数据并刷新 重新添加 * * @param mlists * @param defaultExpandLevel 默认展开几级列表 */ public void addDataAll(List<Node> mlists, int defaultExpandLevel) { mAllNodes.clear(); addData(-1, mlists, defaultExpandLevel); } /** * 在指定位置添加数据并刷新 可指定刷新后显示层级 * * @param index * @param mlists * @param defaultExpandLevel 默认展开几级列表 */ public void addData(int index, List<Node> mlists, int defaultExpandLevel) { this.defaultExpandLevel = defaultExpandLevel; notifyData(index, mlists); } /** * 在指定位置添加数据并刷新 * * @param index * @param mlists */ public void addData(int index, List<Node> mlists) { notifyData(index, mlists); } /** * 添加数据并刷新 * * @param mlists */ public void addData(List<Node> mlists) { addData(mlists, defaultExpandLevel); } /** * 添加数据并刷新 可指定刷新后显示层级 * * @param mlists * @param defaultExpandLevel */ public void addData(List<Node> mlists, int defaultExpandLevel) { this.defaultExpandLevel = defaultExpandLevel; notifyData(-1, mlists); } /** * 添加数据并刷新 * * @param node */ public void addData(Node node) { addData(node, defaultExpandLevel); } /** * 添加数据并刷新 可指定刷新后显示层级 * * @param node * @param defaultExpandLevel */ public void addData(Node node, int defaultExpandLevel) { List<Node> nodes = new ArrayList<>(); nodes.add(node); this.defaultExpandLevel = defaultExpandLevel; notifyData(-1, nodes); } /** * 刷新数据 * * @param index * @param mListNodes */ public void notifyData(int index, List<Node> mListNodes) { for (int i = 0; i < mListNodes.size(); i++) { Node node = mListNodes.get(i); node.getChildren().clear(); node.iconExpand = iconExpand; node.iconNoExpand = iconNoExpand; } for (int i = 0; i < mAllNodes.size(); i++) { Node node = mAllNodes.get(i); node.getChildren().clear(); //node.isNewAdd = false; } if (index != -1) { mAllNodes.addAll(index, mListNodes); } else { mAllNodes.addAll(mListNodes); } /** * 对所有的Node进行排序 */ mAllNodes = TreeHelper.getSortedNodes(mAllNodes, defaultExpandLevel); /** * 过滤出可见的Node */ mNodes = TreeHelper.filterVisibleNode(mAllNodes); //刷新数据 notifyDataSetChanged(); } public abstract View getConvertView(Node node, int position, View convertView, ViewGroup parent); }
5.接口回调:
选中状态改变的回调:
package com.xiaoyehai.multileveltreelist.treelist; /** * Created by xiaoyehai on 2018/7/12 0012. */ public interface OnTreeNodeCheckedChangeListener { void onCheckChange(Node node, int position, boolean isChecked); }
条目点击的回调:
package com.xiaoyehai.multileveltreelist.treelist; /** * Created by xiaoyehai on 2018-07-12. */ public interface OnTreeNodeClickListener { void onClick(Node node, int position); }
6.使用:
布局文件:
<ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent"></ListView>
Activity:
public class ListViewActivity extends AppCompatActivity { private ListView mListView; private List<Node> dataList = new ArrayList<>(); private ListViewAdapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_list_view); mListView = (ListView) findViewById(R.id.listview); initData(); //第一个参数 ListView //第二个参数 上下文 //第三个参数 数据集 //第四个参数 默认展开层级数 0为不展开 //第五个参数 展开的图标 //第六个参数 闭合的图标 mAdapter = new ListViewAdapter(mListView, this, dataList, 0, R.drawable.zoomout_yzs, R.drawable.zoomin_yzs); mListView.setAdapter(mAdapter); //获取所有节点 final List<Node> allNodes = mAdapter.getAllNodes(); for (Node allNode : allNodes) { //Log.e("xyh", "onCreate: " + allNode.getName()); } //选中状态监听 mAdapter.setCheckedChangeListener(new OnTreeNodeCheckedChangeListener() { @Override public void onCheckChange(Node node, int position, boolean isChecked) { //获取所有选中节点 List<Node> selectedNode = mAdapter.getSelectedNode(); for (Node n : selectedNode) { Log.e("xyh", "onCheckChange: " + n.getName()); } } }); } /** * 模拟数据,实际开发中对返回的json数据进行封装 */ private void initData() { //根节点 Node<NodeData> node = new Node<>("0", "-1", "根节点1"); dataList.add(node); dataList.add(new Node<>("1", "-1", "根节点2")); dataList.add(new Node<>("2", "-1", "根节点3")); //根节点1的二级节点 dataList.add(new Node<>("3", "0", "二级节点")); dataList.add(new Node<>("4", "0", "二级节点")); dataList.add(new Node<>("5", "0", "二级节点")); //根节点2的二级节点 dataList.add(new Node<>("6", "1", "二级节点")); dataList.add(new Node<>("7", "1", "二级节点")); dataList.add(new Node<>("8", "1", "二级节点")); //根节点3的二级节点 dataList.add(new Node<>("9", "2", "二级节点")); dataList.add(new Node<>("10", "2", "二级节点")); dataList.add(new Node<>("11", "2", "二级节点")); //三级节点 dataList.add(new Node<>("12", "3", "三级节点")); dataList.add(new Node<>("13", "3", "三级节点")); dataList.add(new Node<>("14", "3", "三级节点")); dataList.add(new Node<>("15", "4", "三级节点")); dataList.add(new Node<>("16", "4", "三级节点")); dataList.add(new Node<>("17", "4", "三级节点")); dataList.add(new Node<>("18", "5", "三级节点")); dataList.add(new Node<>("19", "5", "三级节点")); dataList.add(new Node<>("20", "5", "三级节点")); //四级节点 dataList.add(new Node<>("21", "12", "四级节点")); //... //可以有无线多层级 } }
adapter:
package com.xiaoyehai.multileveltreelist.adapter; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.CheckBox; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; import com.xiaoyehai.multileveltreelist.R; import com.xiaoyehai.multileveltreelist.treelist.OnTreeNodeCheckedChangeListener; import com.xiaoyehai.multileveltreelist.treelist.TreeListViewAdapter; import com.xiaoyehai.multileveltreelist.treelist.Node; import java.util.List; /** * Created by xiaoyehai on 2018/7/12 0012. */ public class ListViewAdapter extends TreeListViewAdapter { private OnTreeNodeCheckedChangeListener checkedChangeListener; public void setCheckedChangeListener(OnTreeNodeCheckedChangeListener checkedChangeListener) { this.checkedChangeListener = checkedChangeListener; } public ListViewAdapter(ListView listView, Context context, List<Node> datas, int defaultExpandLevel, int iconExpand, int iconNoExpand) { super(listView, context, datas, defaultExpandLevel, iconExpand, iconNoExpand); } @Override public View getConvertView(final Node node, final int position, View convertView, ViewGroup parent) { final ViewHolder holder; if (convertView == null) { convertView = View.inflate(mContext, R.layout.item, null); holder = new ViewHolder(convertView); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.tvName.setText(node.getName()); if (node.getIcon() == -1) { holder.ivExpand.setVisibility(View.INVISIBLE); } else { holder.ivExpand.setVisibility(View.VISIBLE); holder.ivExpand.setImageResource(node.getIcon()); } holder.checkBox.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { setChecked(node, holder.checkBox.isChecked()); if (checkedChangeListener != null) { checkedChangeListener.onCheckChange(node, position,holder.checkBox.isChecked()); } } }); if (node.isChecked()) { holder.checkBox.setChecked(true); } else { holder.checkBox.setChecked(false); } return convertView; } static class ViewHolder { private CheckBox checkBox; private TextView tvName; private ImageView ivExpand; public ViewHolder(View convertView) { checkBox = convertView.findViewById(R.id.cb); tvName = convertView.findViewById(R.id.tv_name); ivExpand = convertView.findViewById(R.id.iv_expand); } } }
也可以用RecycleView实现,在我的项目里面都有。
[项目地址]:MultilevelTreeList
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍Android 绘制多级树形选择列表实例代码,包括了Android 绘制多级树形选择列表实例代码的使用技巧和注意事项,需要的朋友参考一下 一、概述 前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等。另外需要加上展开与回收部门详情、关闭部分已开展的布局、勾选等功能。 效果图如下: 二、思路分
利用UITableView 显示多级树形目录。可以用于文件查看系统。 借助以下两个属性实现多级树形目录 @property(nonatomic) NSInteger indentationLevel; // adjust content indent. default is 0 @property(nonatomic) CGFloat indentationWidth; // width for
我需要在中选择多个图像,并在中添加共享和删除按钮。 My类别: 但是当我试图打开Gridview时,它给我一个错误。 我的Logcat细节 02-10 21:10:46.965 21658-21658/com。Android示例E/AndroidRuntime﹕ 致命异常:主进程:com。Android例如,PID:21658java。ClassCastException:android。小装置。
本文向大家介绍js实现无限级树形导航列表效果代码,包括了js实现无限级树形导航列表效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现无限级树形导航列表效果代码。分享给大家供大家参考。具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js
本文向大家介绍Android组件实现列表选择框功能,包括了Android组件实现列表选择框功能的使用技巧和注意事项,需要的朋友参考一下 android提供的列表选择框(Spinner)相当于web端用户注册时的选择下拉框,比如注册候选择省份城市等。如下图便是一个列表选择框 下拉列表的列表选择项能够通过xml文件的android:entries属性指定,或是在java代码中导入,属性android:
本文向大家介绍vue实现的树形结构加多选框示例,包括了vue实现的树形结构加多选框示例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考,具体如下: 前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如