Android中的树状(tree)列表

Home / Android MrLee 2016-10-23 4361
树状列表前端挺常用的，还有人专门写过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);

效果如下:

Android中的树状(tree)列表


全部展开：

Android中的树状(tree)列表


这个时候把treeActivity中那个node7注释取消，也就是加了第三层节点的效果: 
TreeNode
node7= new TreeNode("辉煌国际",
TreeNode.TOP_LEVEL + 3,
6,
node3.getId(), false,
false);

效果如下:

Android中的树状(tree)列表

本文链接:http://www.it72.com/11013.htm

收藏的用户（0） X
正在加载信息~
推荐阅读
cmake 添加头文件目录，链接动态、静态库
基于jbox2d的仿愤怒的小鸟游戏-百度网盘
Android Studio 提示Session 'app':Error Installing APK
XMPP协议入门
Android开发之布局优化
Android图片下载、缓存框架——Picasso
Android孤儿进程防止清理
FastJson工具类库使用例子
解读Android Scroller
Android——自绘牛叉的进度条
最新回复 (0)
返回
站点信息
  • 文章
    2313
  • 用户
    1336
  • 访客
    11758878
每日一句
Happiness depends on your mindset.
幸福取决于你的心态。
新会员