• Android UI 之实现多级列表TreeView

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

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

        先来看一下效果：

    然后大体说一下思路：

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

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

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

    Element.Java:

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. package com.example.androidtreeviewdemo.treeview;  
    2. /** 
    3.  * Element类 
    4.  * @author carrey 
    5.  * 
    6.  */  
    7. public class Element {  
    8.     /** 文字内容 */  
    9.     private String contentText;  
    10.     /** 在tree中的层级 */  
    11.     private int level;  
    12.     /** 元素的id */  
    13.     private int id;  
    14.     /** 父元素的id */  
    15.     private int parendId;  
    16.     /** 是否有子元素 */  
    17.     private boolean hasChildren;  
    18.     /** item是否展开 */  
    19.     private boolean isExpanded;  
    20.       
    21.     /** 表示该节点没有父元素，也就是level为0的节点 */  
    22.     public static final int NO_PARENT = -1;  
    23.     /** 表示该元素位于最顶层的层级 */  
    24.     public static final int TOP_LEVEL = 0;  
    25.       
    26.     public Element(String contentText, int level, int id, int parendId,  
    27.             boolean hasChildren, boolean isExpanded) {  
    28.         super();  
    29.         this.contentText = contentText;  
    30.         this.level = level;  
    31.         this.id = id;  
    32.         this.parendId = parendId;  
    33.         this.hasChildren = hasChildren;  
    34.         this.isExpanded = isExpanded;  
    35.     }  
    36.   
    37.     public boolean isExpanded() {  
    38.         return isExpanded;  
    39.     }  
    40.   
    41.     public void setExpanded(boolean isExpanded) {  
    42.         this.isExpanded = isExpanded;  
    43.     }  
    44.   
    45.     public String getContentText() {  
    46.         return contentText;  
    47.     }  
    48.   
    49.     public void setContentText(String contentText) {  
    50.         this.contentText = contentText;  
    51.     }  
    52.   
    53.     public int getLevel() {  
    54.         return level;  
    55.     }  
    56.   
    57.     public void setLevel(int level) {  
    58.         this.level = level;  
    59.     }  
    60.   
    61.     public int getId() {  
    62.         return id;  
    63.     }  
    64.   
    65.     public void setId(int id) {  
    66.         this.id = id;  
    67.     }  
    68.   
    69.     public int getParendId() {  
    70.         return parendId;  
    71.     }  
    72.   
    73.     public void setParendId(int parendId) {  
    74.         this.parendId = parendId;  
    75.     }  
    76.   
    77.     public boolean isHasChildren() {  
    78.         return hasChildren;  
    79.     }  
    80.   
    81.     public void setHasChildren(boolean hasChildren) {  
    82.         this.hasChildren = hasChildren;  
    83.     }  
    84. }  

    TreeViewAdapter.java:

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. package com.example.androidtreeviewdemo.treeview;  
    2.   
    3. import java.util.ArrayList;  
    4.   
    5. import com.example.androidtreeviewdemo.R;  
    6.   
    7. import android.view.LayoutInflater;  
    8. import android.view.View;  
    9. import android.view.ViewGroup;  
    10. import android.widget.BaseAdapter;  
    11. import android.widget.ImageView;  
    12. import android.widget.TextView;  
    13. /** 
    14.  * TreeViewAdapter 
    15.  * @author carrey 
    16.  * 
    17.  */  
    18. public class TreeViewAdapter extends BaseAdapter {  
    19.     /** 元素数据源 */  
    20.     private ArrayList<Element> elementsData;  
    21.     /** 树中元素 */  
    22.     private ArrayList<Element> elements;  
    23.     /** LayoutInflater */  
    24.     private LayoutInflater inflater;  
    25.     /** item的行首缩进基数 */  
    26.     private int indentionBase;  
    27.       
    28.     public TreeViewAdapter(ArrayList<Element> elements, ArrayList<Element> elementsData, LayoutInflater inflater) {  
    29.         this.elements = elements;  
    30.         this.elementsData = elementsData;  
    31.         this.inflater = inflater;  
    32.         indentionBase = 50;  
    33.     }  
    34.       
    35.     public ArrayList<Element> getElements() {  
    36.         return elements;  
    37.     }  
    38.       
    39.     public ArrayList<Element> getElementsData() {  
    40.         return elementsData;  
    41.     }  
    42.       
    43.     @Override  
    44.     public int getCount() {  
    45.         return elements.size();  
    46.     }  
    47.   
    48.     @Override  
    49.     public Object getItem(int position) {  
    50.         return elements.get(position);  
    51.     }  
    52.   
    53.     @Override  
    54.     public long getItemId(int position) {  
    55.         return position;  
    56.     }  
    57.   
    58.     @Override  
    59.     public View getView(int position, View convertView, ViewGroup parent) {  
    60.         ViewHolder holder = null;  
    61.         if (convertView == null) {  
    62.             holder = new ViewHolder();  
    63.             convertView = inflater.inflate(R.layout.treeview_item, null);  
    64.             holder.disclosureImg = (ImageView) convertView.findViewById(R.id.disclosureImg);  
    65.             holder.contentText = (TextView) convertView.findViewById(R.id.contentText);  
    66.             convertView.setTag(holder);  
    67.         } else {  
    68.             holder = (ViewHolder) convertView.getTag();  
    69.         }  
    70.         Element element = elements.get(position);  
    71.         int level = element.getLevel();  
    72.         holder.disclosureImg.setPadding(  
    73.                 indentionBase * (level + 1),   
    74.                 holder.disclosureImg.getPaddingTop(),   
    75.                 holder.disclosureImg.getPaddingRight(),   
    76.                 holder.disclosureImg.getPaddingBottom());  
    77.         holder.contentText.setText(element.getContentText());  
    78.         if (element.isHasChildren() && !element.isExpanded()) {  
    79.             holder.disclosureImg.setImageResource(R.drawable.close);  
    80.             //这里要主动设置一下icon可见，因为convertView有可能是重用了"设置了不可见"的view，下同。  
    81.             holder.disclosureImg.setVisibility(View.VISIBLE);  
    82.         } else if (element.isHasChildren() && element.isExpanded()) {  
    83.             holder.disclosureImg.setImageResource(R.drawable.open);  
    84.             holder.disclosureImg.setVisibility(View.VISIBLE);  
    85.         } else if (!element.isHasChildren()) {  
    86.             holder.disclosureImg.setImageResource(R.drawable.close);  
    87.             holder.disclosureImg.setVisibility(View.INVISIBLE);  
    88.         }  
    89.         return convertView;  
    90.     }  
    91.       
    92.     /** 
    93.      * 优化Holder 
    94.      * @author carrey 
    95.      * 
    96.      */  
    97.     static class ViewHolder{  
    98.         ImageView disclosureImg;  
    99.         TextView contentText;  
    100.     }  
    101. }  

    TreeViewItemClickListener.java:

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. package com.example.androidtreeviewdemo.treeview;  
    2.   
    3. import java.util.ArrayList;  
    4.   
    5. import android.view.View;  
    6. import android.widget.AdapterView;  
    7. import android.widget.AdapterView.OnItemClickListener;  
    8. /** 
    9.  * TreeView item点击事件 
    10.  * @author carrey 
    11.  * 
    12.  */  
    13. public class TreeViewItemClickListener implements OnItemClickListener {  
    14.     /** adapter */  
    15.     private TreeViewAdapter treeViewAdapter;  
    16.       
    17.     public TreeViewItemClickListener(TreeViewAdapter treeViewAdapter) {  
    18.         this.treeViewAdapter = treeViewAdapter;  
    19.     }  
    20.       
    21.     @Override  
    22.     public void onItemClick(AdapterView<?> parent, View view, int position,  
    23.             long id) {  
    24.         //点击的item代表的元素  
    25.         Element element = (Element) treeViewAdapter.getItem(position);  
    26.         //树中的元素  
    27.         ArrayList<Element> elements = treeViewAdapter.getElements();  
    28.         //元素的数据源  
    29.         ArrayList<Element> elementsData = treeViewAdapter.getElementsData();  
    30.           
    31.         //点击没有子项的item直接返回  
    32.         if (!element.isHasChildren()) {  
    33.             return;  
    34.         }  
    35.           
    36.         if (element.isExpanded()) {  
    37.             element.setExpanded(false);  
    38.             //删除节点内部对应子节点数据，包括子节点的子节点...  
    39.             ArrayList<Element> elementsToDel = new ArrayList<Element>();  
    40.             for (int i = position + 1; i < elements.size(); i++) {  
    41.                 if (element.getLevel() >= elements.get(i).getLevel())  
    42.                     break;  
    43.                 elementsToDel.add(elements.get(i));  
    44.             }  
    45.             elements.removeAll(elementsToDel);  
    46.             treeViewAdapter.notifyDataSetChanged();  
    47.         } else {  
    48.             element.setExpanded(true);  
    49.             //从数据源中提取子节点数据添加进树，注意这里只是添加了下一级子节点，为了简化逻辑  
    50.             int i = 1;//注意这里的计数器放在for外面才能保证计数有效  
    51.             for (Element e : elementsData) {  
    52.                 if (e.getParendId() == element.getId()) {  
    53.                     e.setExpanded(false);  
    54.                     elements.add(position + i, e);  
    55.                     i ++;  
    56.                 }  
    57.             }  
    58.             treeViewAdapter.notifyDataSetChanged();  
    59.         }  
    60.     }  
    61.   
    62. }  

    MainActivity.java:

    [java] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. package com.example.androidtreeviewdemo;  
    2.   
    3. import java.util.ArrayList;  
    4.   
    5. import com.example.androidtreeviewdemo.treeview.Element;  
    6. import com.example.androidtreeviewdemo.treeview.TreeViewAdapter;  
    7. import com.example.androidtreeviewdemo.treeview.TreeViewItemClickListener;  
    8.   
    9. import android.os.Bundle;  
    10. import android.app.Activity;  
    11. import android.content.Context;  
    12. import android.view.LayoutInflater;  
    13. import android.view.Menu;  
    14. import android.widget.ListView;  
    15.   
    16. public class MainActivity extends Activity {  
    17.     /** 树中的元素集合 */  
    18.     private ArrayList<Element> elements;  
    19.     /** 数据源元素集合 */  
    20.     private ArrayList<Element> elementsData;  
    21.       
    22.     @Override  
    23.     protected void onCreate(Bundle savedInstanceState) {  
    24.         super.onCreate(savedInstanceState);  
    25.         setContentView(R.layout.activity_main);  
    26.           
    27.         LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
    28.           
    29.         init();  
    30.           
    31.         ListView treeview = (ListView) findViewById(R.id.treeview);  
    32.         TreeViewAdapter treeViewAdapter = new TreeViewAdapter(  
    33.                 elements, elementsData, inflater);  
    34.         TreeViewItemClickListener treeViewItemClickListener = new TreeViewItemClickListener(treeViewAdapter);  
    35.         treeview.setAdapter(treeViewAdapter);  
    36.         treeview.setOnItemClickListener(treeViewItemClickListener);  
    37.     }  
    38.       
    39.     private void init() {  
    40.         elements = new ArrayList<Element>();  
    41.         elementsData = new ArrayList<Element>();  
    42.           
    43.         //添加节点  -- 节点名称，节点level，节点id，父节点id，是否有子节点，是否展开  
    44.           
    45.         //添加最外层节点  
    46.         Element e1 = new Element("山东省", Element.TOP_LEVEL, 0, Element.NO_PARENT, true, false);  
    47.           
    48.         //添加第一层节点  
    49.         Element e2 = new Element("青岛市", Element.TOP_LEVEL + 1, 1, e1.getId(), true, false);  
    50.         //添加第二层节点  
    51.         Element e3 = new Element("市南区", Element.TOP_LEVEL + 2, 2, e2.getId(), true, false);  
    52.         //添加第三层节点  
    53.         Element e4 = new Element("香港中路", Element.TOP_LEVEL + 3, 3, e3.getId(), false, false);  
    54.           
    55.         //添加第一层节点  
    56.         Element e5 = new Element("烟台市", Element.TOP_LEVEL + 1, 4, e1.getId(), true, false);  
    57.         //添加第二层节点  
    58.         Element e6 = new Element("芝罘区", Element.TOP_LEVEL + 2, 5, e5.getId(), true, false);  
    59.         //添加第三层节点  
    60.         Element e7 = new Element("凤凰台街道", Element.TOP_LEVEL + 3, 6, e6.getId(), false, false);  
    61.           
    62.         //添加第一层节点  
    63.         Element e8 = new Element("威海市", Element.TOP_LEVEL + 1, 7, e1.getId(), false, false);  
    64.           
    65.         //添加最外层节点  
    66.         Element e9 = new Element("广东省", Element.TOP_LEVEL, 8, Element.NO_PARENT, true, false);  
    67.         //添加第一层节点  
    68.         Element e10 = new Element("深圳市", Element.TOP_LEVEL + 1, 9, e9.getId(), true, false);  
    69.         //添加第二层节点  
    70.         Element e11 = new Element("南山区", Element.TOP_LEVEL + 2, 10, e10.getId(), true, false);  
    71.         //添加第三层节点  
    72.         Element e12 = new Element("深南大道", Element.TOP_LEVEL + 3, 11, e11.getId(), true, false);  
    73.         //添加第四层节点  
    74.         Element e13 = new Element("10000号", Element.TOP_LEVEL + 4, 12, e12.getId(), false, false);  
    75.           
    76.         //添加初始树元素  
    77.         elements.add(e1);  
    78.         elements.add(e9);  
    79.         //创建数据源  
    80.         elementsData.add(e1);  
    81.         elementsData.add(e2);  
    82.         elementsData.add(e3);  
    83.         elementsData.add(e4);  
    84.         elementsData.add(e5);  
    85.         elementsData.add(e6);  
    86.         elementsData.add(e7);  
    87.         elementsData.add(e8);  
    88.         elementsData.add(e9);  
    89.         elementsData.add(e10);  
    90.         elementsData.add(e11);  
    91.         elementsData.add(e12);  
    92.         elementsData.add(e13);  
    93.     }  
    94.   
    95.     @Override  
    96.     public boolean onCreateOptionsMenu(Menu menu) {  
    97.         // Inflate the menu; this adds items to the action bar if it is present.  
    98.         getMenuInflater().inflate(R.menu.activity_main, menu);  
    99.         return true;  
    100.     }  
    101.   
    102. }  

    treeview_item.xml:

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent" >  
    5.       
    6.     <ImageView   
    7.         android:id="@+id/disclosureImg"  
    8.         android:layout_width="wrap_content"  
    9.         android:layout_height="wrap_content"  
    10.         android:layout_centerVertical="true"  
    11.         android:layout_alignParentLeft="true"/>  
    12.       
    13.     <TextView   
    14.         android:id="@+id/contentText"  
    15.         android:layout_width="wrap_content"  
    16.         android:layout_height="wrap_content"  
    17.         android:layout_centerVertical="true"  
    18.         android:layout_toRightOf="@id/disclosureImg"/>  
    19.   
    20. </RelativeLayout>  

    activity_main.xml:

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent"  
    5.     tools:context=".MainActivity" >  
    6.   
    7.     <ListView   
    8.         android:id="@+id/treeview"  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="match_parent"/>  
    11.   
    12. </RelativeLayout>  

    转载请注明：http://blog.csdn.net/carrey1989/article/details/10227165

    源码下载
  • 相关阅读:
    classic problem: select sortjava
    【转】排序算法复习（Java实现）(二）： 归并排序，堆排序，桶式排序，基数排序
    【转】排序算法复习（Java实现）(一）： 插入，冒泡，选择，Shell,快速排序
    classic problem: 100 horse and 100 dan
    good chocolate
    【转】Java内存模型 http://blog.csdn.net/silentbalanceyh
    http header/ eclipse package path
    design patterns: factory and abstractFactory
    阅读笔记
    提取Dump文件的Callstack,创建windbg的一个扩展应用
  • 原文地址：https://www.cnblogs.com/wangfeng520/p/6145993.html
Copyright © 2020-2023  润新知