Android UI 之实现多级树形列表TreeView示例

所谓TreeView就是在Windows中常见的多级列表树,在Android中系统只默认提供了ListView和ExpandableListView两种列表,最多只支持到二级列表的实现,所以如果想要实现三级和更多层次的列表,就需要我们自己来做一些处理了。

其实这个效果很久以前就有人想办法实现了,但是实现的效果有一些问题,我的实现思路主要也是来自于网络,但是在其基础上修正了逻辑上的一些错误,做了一些优化。

先来看一下效果:

然后大体说一下思路:

其实这里实现的多级列表只是一个视觉效果,我们看到的分级效果是由于每行的缩进不同造成的。比如在上面的效果中,山东省和广东省是级别最高的层次,山东省下的青岛市作为山东省的子项,我们增加他的左缩进,这样看起来就有了层次感了。其他的层次也是同理。

也就是说,我们只用了一个ListView,工作的重点就在于不断变化ListView显示的数据,根据用户的操作,将数据修改为用户想要看到的数据内容,并根据每个数据项的不同,在显示效果上做不同的缩进处理,最终呈现出一个TreeView的效果。

具体的实现思路参考下面的项目结构和具体代码:

Element.Java:

package com.example.androidtreeviewdemo.treeview;
/**
 * Element类
 * @author carrey
 *
 */
public class Element {
  /** 文字内容 */
  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 Element(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;
  }
}

TreeViewAdapter.java:

package com.example.androidtreeviewdemo.treeview; 

import java.util.ArrayList; 

import com.example.androidtreeviewdemo.R; 

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * TreeViewAdapter
 * @author carrey
 *
 */
public class TreeViewAdapter extends BaseAdapter {
  /** 元素数据源 */
  private ArrayList<Element> elementsData;
  /** 树中元素 */
  private ArrayList<Element> elements;
  /** LayoutInflater */
  private LayoutInflater inflater;
  /** item的行首缩进基数 */
  private int indentionBase; 

  public TreeViewAdapter(ArrayList<Element> elements, ArrayList<Element> elementsData, LayoutInflater inflater) {
    this.elements = elements;
    this.elementsData = elementsData;
    this.inflater = inflater;
    indentionBase = 50;
  } 

  public ArrayList<Element> getElements() {
    return elements;
  } 

  public ArrayList<Element> getElementsData() {
    return elementsData;
  } 

  @Override
  public int getCount() {
    return elements.size();
  } 

  @Override
  public Object getItem(int position) {
    return elements.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.treeview_item, null);
      holder.disclosureImg = (ImageView) convertView.findViewById(R.id.disclosureImg);
      holder.contentText = (TextView) convertView.findViewById(R.id.contentText);
      convertView.setTag(holder);
    } else {
      holder = (ViewHolder) convertView.getTag();
    }
    Element element = elements.get(position);
    int level = element.getLevel();
    holder.disclosureImg.setPadding(
        indentionBase * (level + 1),
        holder.disclosureImg.getPaddingTop(),
        holder.disclosureImg.getPaddingRight(),
        holder.disclosureImg.getPaddingBottom());
    holder.contentText.setText(element.getContentText());
    if (element.isHasChildren() && !element.isExpanded()) {
      holder.disclosureImg.setImageResource(R.drawable.close);
      //这里要主动设置一下icon可见,因为convertView有可能是重用了"设置了不可见"的view,下同。
      holder.disclosureImg.setVisibility(View.VISIBLE);
    } else if (element.isHasChildren() && element.isExpanded()) {
      holder.disclosureImg.setImageResource(R.drawable.open);
      holder.disclosureImg.setVisibility(View.VISIBLE);
    } else if (!element.isHasChildren()) {
      holder.disclosureImg.setImageResource(R.drawable.close);
      holder.disclosureImg.setVisibility(View.INVISIBLE);
    }
    return convertView;
  } 

  /**
   * 优化Holder
   * @author carrey
   *
   */
  static class ViewHolder{
    ImageView disclosureImg;
    TextView contentText;
  }
}

TreeViewItemClickListener.java:

package com.example.androidtreeviewdemo.treeview; 

import java.util.ArrayList; 

import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
/**
 * TreeView item点击事件
 * @author carrey
 *
 */
public class TreeViewItemClickListener implements OnItemClickListener {
  /** adapter */
  private TreeViewAdapter treeViewAdapter; 

  public TreeViewItemClickListener(TreeViewAdapter treeViewAdapter) {
    this.treeViewAdapter = treeViewAdapter;
  } 

  @Override
  public void onItemClick(AdapterView<?> parent, View view, int position,
      long id) {
    //点击的item代表的元素
    Element element = (Element) treeViewAdapter.getItem(position);
    //树中的元素
    ArrayList<Element> elements = treeViewAdapter.getElements();
    //元素的数据源
    ArrayList<Element> elementsData = treeViewAdapter.getElementsData(); 

    //点击没有子项的item直接返回
    if (!element.isHasChildren()) {
      return;
    } 

    if (element.isExpanded()) {
      element.setExpanded(false);
      //删除节点内部对应子节点数据,包括子节点的子节点...
      ArrayList<Element> elementsToDel = new ArrayList<Element>();
      for (int i = position + 1; i < elements.size(); i++) {
        if (element.getLevel() >= elements.get(i).getLevel())
          break;
        elementsToDel.add(elements.get(i));
      }
      elements.removeAll(elementsToDel);
      treeViewAdapter.notifyDataSetChanged();
    } else {
      element.setExpanded(true);
      //从数据源中提取子节点数据添加进树,注意这里只是添加了下一级子节点,为了简化逻辑
      int i = 1;//注意这里的计数器放在for外面才能保证计数有效
      for (Element e : elementsData) {
        if (e.getParendId() == element.getId()) {
          e.setExpanded(false);
          elements.add(position + i, e);
          i ++;
        }
      }
      treeViewAdapter.notifyDataSetChanged();
    }
  } 

}

MainActivity.java:

package com.example.androidtreeviewdemo; 

import java.util.ArrayList; 

import com.example.androidtreeviewdemo.treeview.Element;
import com.example.androidtreeviewdemo.treeview.TreeViewAdapter;
import com.example.androidtreeviewdemo.treeview.TreeViewItemClickListener; 

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.Menu;
import android.widget.ListView; 

public class MainActivity extends Activity {
  /** 树中的元素集合 */
  private ArrayList<Element> elements;
  /** 数据源元素集合 */
  private ArrayList<Element> elementsData; 

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main); 

    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

    init(); 

    ListView treeview = (ListView) findViewById(R.id.treeview);
    TreeViewAdapter treeViewAdapter = new TreeViewAdapter(
        elements, elementsData, inflater);
    TreeViewItemClickListener treeViewItemClickListener = new TreeViewItemClickListener(treeViewAdapter);
    treeview.setAdapter(treeViewAdapter);
    treeview.setOnItemClickListener(treeViewItemClickListener);
  } 

  private void init() {
    elements = new ArrayList<Element>();
    elementsData = new ArrayList<Element>(); 

    //添加节点 -- 节点名称,节点level,节点id,父节点id,是否有子节点,是否展开 

    //添加最外层节点
    Element e1 = new Element("山东省", Element.TOP_LEVEL, 0, Element.NO_PARENT, true, false); 

    //添加第一层节点
    Element e2 = new Element("青岛市", Element.TOP_LEVEL + 1, 1, e1.getId(), true, false);
    //添加第二层节点
    Element e3 = new Element("市南区", Element.TOP_LEVEL + 2, 2, e2.getId(), true, false);
    //添加第三层节点
    Element e4 = new Element("香港中路", Element.TOP_LEVEL + 3, 3, e3.getId(), false, false); 

    //添加第一层节点
    Element e5 = new Element("烟台市", Element.TOP_LEVEL + 1, 4, e1.getId(), true, false);
    //添加第二层节点
    Element e6 = new Element("芝罘区", Element.TOP_LEVEL + 2, 5, e5.getId(), true, false);
    //添加第三层节点
    Element e7 = new Element("凤凰台街道", Element.TOP_LEVEL + 3, 6, e6.getId(), false, false); 

    //添加第一层节点
    Element e8 = new Element("威海市", Element.TOP_LEVEL + 1, 7, e1.getId(), false, false); 

    //添加最外层节点
    Element e9 = new Element("广东省", Element.TOP_LEVEL, 8, Element.NO_PARENT, true, false);
    //添加第一层节点
    Element e10 = new Element("深圳市", Element.TOP_LEVEL + 1, 9, e9.getId(), true, false);
    //添加第二层节点
    Element e11 = new Element("南山区", Element.TOP_LEVEL + 2, 10, e10.getId(), true, false);
    //添加第三层节点
    Element e12 = new Element("深南大道", Element.TOP_LEVEL + 3, 11, e11.getId(), true, false);
    //添加第四层节点
    Element e13 = new Element("10000号", Element.TOP_LEVEL + 4, 12, e12.getId(), false, false); 

    //添加初始树元素
    elements.add(e1);
    elements.add(e9);
    //创建数据源
    elementsData.add(e1);
    elementsData.add(e2);
    elementsData.add(e3);
    elementsData.add(e4);
    elementsData.add(e5);
    elementsData.add(e6);
    elementsData.add(e7);
    elementsData.add(e8);
    elementsData.add(e9);
    elementsData.add(e10);
    elementsData.add(e11);
    elementsData.add(e12);
    elementsData.add(e13);
  } 

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
  } 

}

treeview_item.xml:

<?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/disclosureImg"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_alignParentLeft="true"/> 

  <TextView
    android:id="@+id/contentText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@id/disclosureImg"/> 

</RelativeLayout>

activity_main.xml:

<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=".MainActivity" > 

  <ListView
    android:id="@+id/treeview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/> 

</RelativeLayout>

下载地址:AndroidTreeViewDemo_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿美团淘宝实现多级下拉列表菜单功能

    我们在常用的电商或者旅游APP中,例如美团,手机淘宝等等,都能够看的到有那种下拉式的二级列表菜单.具体如图所示: 上面两张图就是美团的一个二级列表菜单的一个展示.我相信很多人都想开发一个跟它一样的功能放到自己的APP中.好,接下来我们就开始动手,解决它. 1.结构分析 首先,我们给出这个下拉菜单需要的组建.我们用线框图来分析. 1)如上图所示,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的"美食,全城,理我最近,刷选&

  • Android多级树形列表控件

    我们开发app过程中,经常会碰到需要 多级列表展示的效果.而Android原生sdk中根本没有3级 4级甚至更多级别的列表控件. 所以我们就要自己去实现一个类似treeListView 的控件,下面这个是我项目中的一个效果图,可支持多级列表扩展. android中有ExpandListView控件,但是这个控件只支持两级列表.对于多级列表如果重写这个不是很好用. 实现这种列表 思想就是递归,构造一个子父级的关系. 话不多说 代码中体会 Activity package com.example.c

  • Android UI 之实现多级树形列表TreeView示例

    所谓TreeView就是在Windows中常见的多级列表树,在Android中系统只默认提供了ListView和ExpandableListView两种列表,最多只支持到二级列表的实现,所以如果想要实现三级和更多层次的列表,就需要我们自己来做一些处理了. 其实这个效果很久以前就有人想办法实现了,但是实现的效果有一些问题,我的实现思路主要也是来自于网络,但是在其基础上修正了逻辑上的一些错误,做了一些优化. 先来看一下效果: 然后大体说一下思路: 其实这里实现的多级列表只是一个视觉效果,我们看到的分

  • android RecycleView实现多级树形列表

    本文实例为大家分享了android RecycleView实现多级树形列表的具体代码,供大家参考,具体内容如下 实现多级树状列表: 1. Node.java public class Node<T, B> implements Serializable { /** * 传入的实体对象 */ public B bean; /** * 设置开启的图片 */ public int iconExpand = -1; /** * 设置关闭的图片 */ public int iconNoExpand =

  • SpringBoot mybatis 实现多级树形菜单的示例代码

    一.前言 iview-admin中提供了 v-org-tree这么一个vue组件可以实现树形菜单,下面小编来提供一下在element-ui中的使用教程(项目见:https://github.com/lison16/v-org-tree) 小编集成了el-dropdown下拉菜单(鼠标左击显示菜单),和右击自定义菜单,两种方式,效果图如下: 二.使用教程 (1)安装依赖 npm install clipboard npm install v-click-outside-x npm install

  • Android中RecyclerView实现多级折叠列表效果(二)

    前言 在本文开始之前请大家先看一下这篇文章:http://www.jb51.net/article/113510.htm 上面的这篇文章是之前写的,里面发现有很多不好用地方,也学到些新姿势,改动了许多地方.下面来看看详细的介绍: 要点: 1.可以通过后台控制Item的展示. 2.TreeRecyclerAdapter,可以展开,折叠.多级展示 3.adapter可以使用装饰者模式进行扩展.支持EmptyAdapter.可以添加headview和footview 4.item的样式可以编写文档,t

  • Android中RecyclerView实现多级折叠列表效果(TreeRecyclerView)

    前言 首先不得不吐槽一下产品,尼玛为啥要搞这样的功能....搞个两级的不就好了嘛...自带控件,多好.三级,四级,听说还有六级的....这样丧心病狂的设计,后台也不好给数据吧. 先看看效果: 两级的效果: 三级的效果: 全部展开的效果(我只写了五级) 说说为什么写这货吧: 公司产品提出三级这个需求后,我就在网上找啊找. 找的第一个,发现实现其实是ExpandListview嵌套. 找的第二个,ExpandRecyclview,然后就用呗,发现三级展开很卡,看源码, 发现是RecyclerView

  • Android 绘制多级树形选择列表实例代码

    一.概述 前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等.另外需要加上展开与回收部门详情.关闭部分已开展的布局.勾选等功能. 效果图如下: 二.思路分析 毫无疑问,对于这种数据可能达到几千几万行的列表视图,我们需要选择recyclerview等具有回收item功能的控件,因此Item的状态保持放在Model中而不是View中. 由于原始数据是树形结构的,我们需要先将树形结构转换为列表数据,类似根结点 -

  • Android实现多级树形选择列表

    项目中有多个地方要用到多级列表的菜单,最开始我用的是ExpandableListView,但问题是ExpandableListView只支持两级列表,于是我就用ExpandableListView嵌套ExpandableListView,但非常麻烦,而且关键的是具体分几级是不确定的,也就是可能一级,可能多级,这要是五六级嵌套ListView,于是我就去学习鸿洋大神之前写的一篇关于实现Android多级树形列表的文章,实现很巧妙,使用一个ListView就可以实现多级列表效果,我做了部分修改,功能

  • Android UI仿QQ好友列表分组悬浮效果

    本文实例为大家分享了Android UI仿QQ好友列表分组悬浮效果的具体代码,供大家参考,具体内容如下 楼主是在平板上測试的.图片略微有点大,大家看看效果就好 接下来贴源代码: PinnedHeaderExpandableListView.java 要注意的是 在 onGroupClick方法中parent.setSelectedGroup(groupPosition)这句代码的作用是点击分组置顶, 我这边不须要这个效果.QQ也没实用到,所以给凝视了.大家假设须要能够解开凝视 package c

  • Android 仿抖音的评论列表的UI和效果的实现代码

    抖音是一款音乐创意短视频社交软件,是一个专注年轻人的15秒音乐短视频社区.用户可以通过这款软件选择歌曲,拍摄15秒的音乐短视频,形成自己的作品.此App已在Android各大应用商店和APP Store均有上线. 在design包里面 有一个 BottomSheetDialogFragment 这个Fragment,他已经帮我们处理好了手势,所以实现起来很简单.下面是代码: public class ItemListDialogFragment extends BottomSheetDialog

随机推荐