Android UI编程(2)——多级列表(ExpandableListView)

浏览数：43 / 时间：2015年06月11日

参考博客：

http://blog.csdn.net/xyz_lmn/article/details/6906268

http://www.apkbus.com/android-124715-1-1.html

有时候，使用ListView并不能满足应用程序所需要的功能。有些应用程序需要多组ListViw，这时候我们就要使用一种新的控件ExpandableListView——可以扩展的ListView。它的作用就是将ListView进行分组。就好像我们使用QQ的时候，有"我的好友"，"陌生人"，"黑名单"一样，点击一下会扩展开，再点击一下又会收缩回去。ExpandableListView是一个垂直滚动显示两级列表项的视图，与ListView不同的是，它可以有两层：每一层都能够被独立的展开并显示其子项。这些子项来自于与该视图关联的ExpandableListAdapter。

每一个可以扩展的列表项的旁边都有一个指示箭头用来说明列表项目前的状态(这些状态一般是已经展开的列表项，还没有展开的列表项，子列表和最后一个子列表项)。可以使用方法：setChildIndicator(Drawable)，setGroupIndicator(Drawable)(或者相应的xml文件属性)去设置这些指示符的样式，当然也可以使用默认的指示符。

和ListView一样，ExpandableListView也是一个需要Adapter作为桥梁来取得数据的控件。一般适用于ExpandableListView的Adapter都要继承BaseExpandableListAdapter这个类，并且必须重载getGroupView和getChildView这两个最为重要的方法。

总结：

1、ExpandableListView可扩展列表需要配合BaseExpanableListAdapter的子类来实现，并且实现getGroupView和getChildView两个方法

2、一级列表与二级列举数据集合问题

技术分享

所以一级列表采用一级集合存储数据，二级列表采用二级集合存储数据，用代码实现如下：

<pre name="code" class="java">ArrayList<String> arrayList_groupData;
ArrayList<ArrayList<String>> arrayList_memberData;
arrayList_groupData = new ArrayList<String>();
arrayList_memberData = new ArrayList<ArrayList<String>>();
for (int i = 0; i < 5; i++)
{
     arrayList_groupData.add("Group "+i);
     ArrayList<String> arrayList_memberDataItem = new ArrayList<String>();
     for (int j = 0; j < 6; j++)
     {
        arrayList_memberDataItem.add("member "+j);
     }
     arrayList_memberData.add(arrayList_memberDataItem);
}

3、在调用expandableListView.setAdapter(exAdapter)的时候，只会调用getGroupView方法(其中expandableListView是ExpandableListView的实例化对象，而exAdapter是继承于BaseExpandableListAdap的类实例对象)。而当一级列表子项被展开，首先会多次调用getGroupView方法，当是被展开的一级列表子项，则调用getChildView方法依次陈列二级列表子项。

4、设置二级列表左侧离一级列表的距离

只需要设置二级列表所对应布局中的第一个控件的android:layout_marginLeft属性，即设置该控件左边离父布局的距离。

5、设置一级列表的高度

将一级列表对应的布局文件所有控件放在一个LinearLayout线性布局中，然后通过设置此LinearLayout线性布局的android:layout_height属性，设置为多少个dip。在此之前我没有把此布局文件放到一个新的LinearLayout线性布局中，因为本身父布局就是LinearLayout线性布局，同样去设置android:layout_height属性值，却不能改变一级列表的高度，只有将所有空间重新放到新的LinearLayout线性布局中并设置android:layout_height属性值才可以，这里有点不明白？

AndroidManifest.xml——没有做任何修改，默认

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.wxl.expandablelistview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.wxl.expandablelistview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name"> 多级列表</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>

</resources>

grouplayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    
    <LinearLayout 
        android:id="@+id/linearlayout"
        android:layout_width="match_parent"
    	android:layout_height="40dip">
        <ImageView 
	        android:id="@+id/grouplayout_imageView_group"
	        android:layout_width="wrap_content"
	        android:layout_height="wrap_content"
	        android:src="@drawable/user_group"/>
    	<RelativeLayout 
	        android:id="@+id/grouplayout_relativeLayout"
	        android:layout_width="match_parent"
	        android:layout_height="match_parent">
	        <TextView 
		        android:id="@+id/grouplayout_textView"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:text="Group"
		        android:textSize="15sp"
		        android:layout_marginTop="5dp" />
	    	<ImageView 
		        android:id="@+id/grouplayout_imageView_tubiao"
		        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
		        android:background="@drawable/btn_browser"
		        android:layout_alignParentRight="true"/>
    	</RelativeLayout>
    </LinearLayout>
    
</LinearLayout>

memberlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" 
    android:gravity="center_vertical">
    
    <ImageView 
        android:id="@+id/memberlayout_imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/child_image"
        android:layout_marginLeft="15dp"/>
    <TextView 
        android:id="@+id/memberlayout_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="member"
        android:textSize="20sp"/>

</LinearLayout>

activity_main.xml

<LinearLayout 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" >

    <ExpandableListView 
        android:id="@+id/expandableListView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/default_bg"></ExpandableListView>
</LinearLayout>

MainActivity.java

package com.wxl.expandablelistview;

import java.util.ArrayList;

import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.app.Activity;
import android.content.Context;

public class MainActivity extends Activity {
	ExpandableListView expandableListView;
	ArrayList<String> arrayList_groupData;
	ArrayList<ArrayList<String>> arrayList_memberData;
	ExAdapter exAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        expandableListView = (ExpandableListView)this.findViewById(R.id.expandableListView);
        arrayList_groupData = new ArrayList<String>();
        arrayList_memberData = new ArrayList<ArrayList<String>>();
        for (int i = 0; i < 5; i++)
        {
        	arrayList_groupData.add("Group "+i);
        	ArrayList<String> arrayList_memberDataItem = new ArrayList<String>();
        	for (int j = 0; j < 6; j++)
        	{
        		arrayList_memberDataItem.add("member "+j);
        	}
        	arrayList_memberData.add(arrayList_memberDataItem);
        }
        
        exAdapter = new ExAdapter(this);
        expandableListView.setAdapter(exAdapter);
        //expandableListView.expandGroup(0);//设置第一组张开
        //expandableListView.collapseGroup(0); 将第group组收起
        expandableListView.setGroupIndicator(null);//除去自带的箭头，自带的箭头在父列表的最左边，不展开向下，展开向上
        expandableListView.setDivider(null);//这个是设定每个Group之间的分割线。,默认有分割线，设置null没有分割线
        
        expandableListView.setOnChildClickListener(new OnChildClickListener() {
			
			@Override
			public boolean onChildClick(ExpandableListView parent, View view, int groupPosition,
					int childPosition, long id) {
				// TODO Auto-generated method stub
				exAdapter.setChildSelection(groupPosition,childPosition);
				exAdapter.notifyDataSetChanged();
				return true;
			}
		});
    }
    
    public class ExAdapter extends BaseExpandableListAdapter
    {
    	Context context;
    	int selectParentItem = -1;
    	int selectChildItem = -1;

    	public ExAdapter(Context context) {
			// TODO Auto-generated constructor stub
    		this.context = context;
		}
    	
    	public void setChildSelection(int groupPosition, int childPosition)
    	{
    		selectParentItem = groupPosition;
    		selectChildItem = childPosition;
    	}
    	
		@Override
		public Object getChild(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return arrayList_memberData.get(groupPosition).get(childPosition);
		}

		@Override
		public long getChildId(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return childPosition;
		}

		@Override
		public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,
				ViewGroup parent) {
			// TODO Auto-generated method stub
			View view = convertView;
			Log.i("++++++++++", "groupPosition="+groupPosition+","+"childPosition"+childPosition);
			if (null == view)
			{
				//获取LayoutInflater
				LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
				//获取对应的布局
				view = layoutInflater.inflate(R.layout.memberlayout, null);
			}
			TextView textView = (TextView)view.findViewById(R.id.memberlayout_textView);
			textView.setText(arrayList_memberData.get(groupPosition).get(childPosition));
			if (selectChildItem == childPosition && selectParentItem == groupPosition)
			{
				Log.i("++++++++++", "点击："+groupPosition+","+childPosition);
			}

			return view;
		}

		@Override
		public int getChildrenCount(int groupPosition) {
			// TODO Auto-generated method stub
			return arrayList_memberData.get(groupPosition).size();
		}

		@Override
		public Object getGroup(int groupPosition) {
			// TODO Auto-generated method stub
			return arrayList_groupData.get(groupPosition);
		}

		@Override
		public int getGroupCount() {
			// TODO Auto-generated method stub
			return arrayList_groupData.size();
		}

		@Override
		public long getGroupId(int groupPosition) {
			// TODO Auto-generated method stub
			return groupPosition;
		}

		@Override
		public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
				ViewGroup parent) {
			// TODO Auto-generated method stub
			View view = convertView;
			Log.i("++++++++++", "groupPosition="+groupPosition);
			if (null == view)
			{
				LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
				view = layoutInflater.inflate(R.layout.grouplayout, null);
			}
			TextView textView = (TextView)view.findViewById(R.id.grouplayout_textView);
			textView.setText(arrayList_groupData.get(groupPosition));
			ImageView image=(ImageView) view.findViewById(R.id.grouplayout_imageView_tubiao);
			if(isExpanded)
			{
				image.setBackgroundResource(R.drawable.btn_browser2);
			}
			else 
			{
				image.setBackgroundResource(R.drawable.btn_browser);
			}
			return view;
		}

		@Override
		public boolean hasStableIds() {
			// TODO Auto-generated method stub
			return true;
		}

		@Override
		public boolean isChildSelectable(int groupPosition, int childPosition) {
			// TODO Auto-generated method stub
			return true;
		}
    	
    }
    
}