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

2019-12-12 03:32:02

字体：大中小

来源：转载

供稿：网友

所谓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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Android利用CountDownTimer实现点击获取验证码倒计时效果

下一篇：Android编程实现简单设置按钮颜色的方法