Android UI 之实现多级列表TreeView .

精选转载

donglindonglin 2015-09-30 09:27:42 博主文章分类：Android

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

然后大体说一下思路：
    其实这里实现的多级列表只是一个视觉效果，我们看到的分级效果是由于每行的缩进不同造成的。比如在上面的效果中，山东省和广东省是级别最高的层次，山东省下的青岛市作为山东省的子项，我们增加他的左缩进，这样看起来就有了层次感了。其他的层次也是同理。
    也就是说，我们只用了一个ListView，工作的重点就在于不断变化ListView显示的数据，根据用户的操作，将数据修改为用户想要看到的数据内容，并根据每个数据项的不同，在显示效果上做不同的缩进处理，最终呈现出一个TreeView的效果。
    具体的实现思路参考下面的项目结构和具体代码：

Element.java:
[java] view plaincopyprint?
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;
    }
}
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:
[java] view plaincopyprint?
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;
    }
}
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:
[java] view plaincopyprint?
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();
        }
    }

}
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:
[java] view plaincopyprint?
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;
    }

}
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:
[html] view plaincopyprint?
<?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>
<?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:
[html] view plaincopyprint?
<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>
<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" >