Android之实现QQ好友分组(ExpandableListView)

在项目开发中，也许我们遇到过ListView中嵌套ListView，但谷歌建议我们最好别这样做，因此他们写好了一个ExpandableListView类，他继承ListView，可以实现ListView中嵌套ListView的效果，好了，废话不多说，先上效果图：

点击下载源码：仿QQ好友分组源代码

主代码：

[java] view plain copy print ?

1. public class ExListView extends Activity { 
2.     private static final String GROUP_TEXT = "group_text";//大组成员Map的key 
3.     private static final String CHILD_TEXT1 = "child_text1";//小组成员Map的第一个key 
4.     private static final String CHILD_TEXT2 = "child_text2";//小组成员Map的第二个key 
5.  
6.     List<Map<String, String>> groupData = new ArrayList<Map<String, String>>();//大组成员 
7.     List<List<Map<String, String>>> childData = new ArrayList<List<Map<String, String>>>();//小组成员 
8.  
9.     ExAdapter adapter; 
10.     ExpandableListView exList;//可扩展的ListView 
11.  
12.     @Override 
13.     public void onCreate(Bundle savedInstanceState) { 
14.         super.onCreate(savedInstanceState); 
15.         setContentView(R.layout.main); 
16.         //为大小组中添加数据 
17.         for (int i = 1; i < 6; i++) { 
18.             Map<String, String> curGroupMap = new HashMap<String, String>(); 
19.             groupData.add(curGroupMap); 
20.             curGroupMap.put(GROUP_TEXT, "第" + i + "大组"); 
21.  
22.             List<Map<String, String>> children = new ArrayList<Map<String, String>>(); 
23.             for (int j = 1; j < 6; j++) { 
24.                 Map<String, String> curChildMap = new HashMap<String, String>(); 
25.                 children.add(curChildMap); 
26.                 curChildMap.put(CHILD_TEXT1, "第" + j + "小组"); 
27.                 curChildMap.put(CHILD_TEXT2, "第" + j + "小组签名"); 
28.             } 
29.             childData.add(children); 
30.         } 
31.  
32.         adapter = new ExAdapter(ExListView.this); 
33.         exList = (ExpandableListView) findViewById(R.id.list); 
34.         exList.setAdapter(adapter); 
35.         exList.setGroupIndicator(null);//不设置大组指示器图标，因为我们自定义设置了 
36.         exList.setDivider(null);//设置图片可拉伸的 
37.     } 
38.     //关键代码是这个可扩展的listView适配器 
39.     class ExAdapter extends BaseExpandableListAdapter { 
40.         Context context; 
41.  
42.         public ExAdapter(Context context) { 
43.             super(); 
44.             this.context = context; 
45.         } 
46.         //得到大组成员的view 
47.         public View getGroupView(int groupPosition, boolean isExpanded, 
48.                 View convertView, ViewGroup parent) { 
49.             View view = convertView; 
50.             if (view == null) { 
51.                 LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
52.                 view = inflater.inflate(R.layout.member_listview, null); 
53.             } 
54.  
55.             TextView title = (TextView) view.findViewById(R.id.content_001); 
56.             title.setText(getGroup(groupPosition).toString());//设置大组成员名称 
57.  
58.             ImageView image = (ImageView) view.findViewById(R.id.tubiao);//是否展开大组的箭头图标 
59.             if (isExpanded)//大组展开时 
60.                 image.setBackgroundResource(R.drawable.btn_browser2); 
61.             else//大组合并时 
62.                 image.setBackgroundResource(R.drawable.btn_browser); 
63.  
64.             return view; 
65.         } 
66.         //得到大组成员的id 
67.         public long getGroupId(int groupPosition) { 
68.             return groupPosition; 
69.         } 
70.         //得到大组成员名称 
71.         public Object getGroup(int groupPosition) { 
72.             return groupData.get(groupPosition).get(GROUP_TEXT).toString(); 
73.         } 
74.         //得到大组成员总数 
75.         public int getGroupCount() { 
76.             return groupData.size(); 
77.  
78.         } 
79.  
80.         // 得到小组成员的view 
81.         public View getChildView(int groupPosition, int childPosition, 
82.                 boolean isLastChild, View convertView, ViewGroup parent) { 
83.             View view = convertView; 
84.             if (view == null) { 
85.                 LayoutInflater inflater = LayoutInflater.from(context); 
86.                 view = inflater.inflate(R.layout.member_childitem, null); 
87.             } 
88.             final TextView title = (TextView) view 
89.                     .findViewById(R.id.child_text); 
90.             title.setText(childData.get(groupPosition).get(childPosition) 
91.                     .get(CHILD_TEXT1).toString());//大标题 
92.             final TextView title2 = (TextView) view 
93.                     .findViewById(R.id.child_text2); 
94.             title2.setText(childData.get(groupPosition).get(childPosition) 
95.                     .get(CHILD_TEXT2).toString());//小标题 
96.  
97.             return view; 
98.         } 
99.         //得到小组成员id 
100.         public long getChildId(int groupPosition, int childPosition) { 
101.             return childPosition; 
102.         } 
103.         //得到小组成员的名称 
104.         public Object getChild(int groupPosition, int childPosition) { 
105.             return childData.get(groupPosition).get(childPosition).get(CHILD_TEXT1) 
106.                     .toString(); 
107.         } 
108.         //得到小组成员的数量 
109.         public int getChildrenCount(int groupPosition) { 
110.             return childData.get(groupPosition).size(); 
111.         } 
112.         /**
113.          * Indicates whether the child and group IDs are stable across changes to the
114.          * underlying data.
115.          * 表明大組和小组id是否稳定的更改底层数据。
116.          * @return whether or not the same ID always refers to the same object
117.          * @see Adapter#hasStableIds()
118.          */ 
119.         public boolean hasStableIds() { 
120.             return true; 
121.         } 
122.         //得到小组成员是否被选择 
123.         public boolean isChildSelectable(int groupPosition, int childPosition) { 
124.             return true; 
125.         } 
126.  
127.     } 
128. } 

public class ExListView extends Activity {
	private static final String GROUP_TEXT = "group_text";//大组成员Map的key
	private static final String CHILD_TEXT1 = "child_text1";//小组成员Map的第一个key
	private static final String CHILD_TEXT2 = "child_text2";//小组成员Map的第二个key

	List<Map<String, String>> groupData = new ArrayList<Map<String, String>>();//大组成员
	List<List<Map<String, String>>> childData = new ArrayList<List<Map<String, String>>>();//小组成员

	ExAdapter adapter;
	ExpandableListView exList;//可扩展的ListView

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		//为大小组中添加数据
		for (int i = 1; i < 6; i++) {
			Map<String, String> curGroupMap = new HashMap<String, String>();
			groupData.add(curGroupMap);
			curGroupMap.put(GROUP_TEXT, "第" + i + "大组");

			List<Map<String, String>> children = new ArrayList<Map<String, String>>();
			for (int j = 1; j < 6; j++) {
				Map<String, String> curChildMap = new HashMap<String, String>();
				children.add(curChildMap);
				curChildMap.put(CHILD_TEXT1, "第" + j + "小组");
				curChildMap.put(CHILD_TEXT2, "第" + j + "小组签名");
			}
			childData.add(children);
		}

		adapter = new ExAdapter(ExListView.this);
		exList = (ExpandableListView) findViewById(R.id.list);
		exList.setAdapter(adapter);
		exList.setGroupIndicator(null);//不设置大组指示器图标，因为我们自定义设置了
		exList.setDivider(null);//设置图片可拉伸的
	}
	//关键代码是这个可扩展的listView适配器
	class ExAdapter extends BaseExpandableListAdapter {
		Context context;

		public ExAdapter(Context context) {
			super();
			this.context = context;
		}
		//得到大组成员的view
		public View getGroupView(int groupPosition, boolean isExpanded,
				View convertView, ViewGroup parent) {
			View view = convertView;
			if (view == null) {
				LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
				view = inflater.inflate(R.layout.member_listview, null);
			}

			TextView title = (TextView) view.findViewById(R.id.content_001);
			title.setText(getGroup(groupPosition).toString());//设置大组成员名称

			ImageView image = (ImageView) view.findViewById(R.id.tubiao);//是否展开大组的箭头图标
			if (isExpanded)//大组展开时
				image.setBackgroundResource(R.drawable.btn_browser2);
			else//大组合并时
				image.setBackgroundResource(R.drawable.btn_browser);

			return view;
		}
		//得到大组成员的id
		public long getGroupId(int groupPosition) {
			return groupPosition;
		}
		//得到大组成员名称
		public Object getGroup(int groupPosition) {
			return groupData.get(groupPosition).get(GROUP_TEXT).toString();
		}
		//得到大组成员总数
		public int getGroupCount() {
			return groupData.size();

		}

		// 得到小组成员的view
		public View getChildView(int groupPosition, int childPosition,
				boolean isLastChild, View convertView, ViewGroup parent) {
			View view = convertView;
			if (view == null) {
				LayoutInflater inflater = LayoutInflater.from(context);
				view = inflater.inflate(R.layout.member_childitem, null);
			}
			final TextView title = (TextView) view
					.findViewById(R.id.child_text);
			title.setText(childData.get(groupPosition).get(childPosition)
					.get(CHILD_TEXT1).toString());//大标题
			final TextView title2 = (TextView) view
					.findViewById(R.id.child_text2);
			title2.setText(childData.get(groupPosition).get(childPosition)
					.get(CHILD_TEXT2).toString());//小标题

			return view;
		}
		//得到小组成员id
		public long getChildId(int groupPosition, int childPosition) {
			return childPosition;
		}
		//得到小组成员的名称
		public Object getChild(int groupPosition, int childPosition) {
			return childData.get(groupPosition).get(childPosition).get(CHILD_TEXT1)
					.toString();
		}
		//得到小组成员的数量
		public int getChildrenCount(int groupPosition) {
			return childData.get(groupPosition).size();
		}
		/**
	     * Indicates whether the child and group IDs are stable across changes to the
	     * underlying data.
	     * 表明大組和小组id是否稳定的更改底层数据。
	     * @return whether or not the same ID always refers to the same object
	     * @see Adapter#hasStableIds()
	     */
		public boolean hasStableIds() {
			return true;
		}
		//得到小组成员是否被选择
		public boolean isChildSelectable(int groupPosition, int childPosition) {
			return true;
		}

	}
}

主界面配置文件main.xml:

[html] view plain copy print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2.     xmlns:tools="http://schemas.android.com/tools" 
3.     android:layout_width="fill_parent" 
4.     android:layout_height="fill_parent" 
5.     android:background="@drawable/default_bg" > 
6.  
7.     <ExpandableListView 
8.         android:id="@+id/list" 
9.         android:layout_width="fill_parent" 
10.         android:layout_height="fill_parent" 
11.         android:layout_alignParentLeft="true" android:cacheColorHint="#00000000" /><!-- 背景设置为透明，防止滑动时，白屏 --> 
12.  
13. </RelativeLayout> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/default_bg" >

    <ExpandableListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true" android:cacheColorHint="#00000000" /><!-- 背景设置为透明，防止滑动时，白屏 -->

</RelativeLayout>

大组成员配置文件member_listview.xml：

[html] view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2.     xmlns:tools="http://schemas.android.com/tools" 
3.     android:layout_width="fill_parent" 
4.     android:layout_height="wrap_content" 
5.     android:layout_gravity="center_horizontal" > 
6.  
7.     <LinearLayout 
8.         android:id="@+id/layout_013" 
9.         android:layout_width="fill_parent" 
10.         android:layout_height="wrap_content" 
11.         android:orientation="horizontal" > 
12.  
13.         <ImageView 
14.             android:id="@+id/ImageView01" 
15.             android:layout_width="wrap_content" 
16.             android:layout_height="wrap_content" 
17.             android:gravity="center_vertical" 
18.             android:paddingTop="10dp" 
19.             android:src="@drawable/user_group" > 
20.         </ImageView> 
21.  
22.         <RelativeLayout 
23.             android:id="@+id/layout_013" 
24.             android:layout_width="wrap_content" 
25.             android:layout_height="wrap_content" > 
26.  
27.             <TextView 
28.                 android:id="@+id/content_001" 
29.                 android:layout_width="wrap_content" 
30.                 android:layout_height="fill_parent" 
31.                 android:layout_gravity="center_vertical" 
32.                 android:gravity="center_vertical" 
33.                 android:paddingLeft="10dp" 
34.                 android:textColor="#FFFFFF" 
35.                 android:textSize="30sp" > 
36.             </TextView> 
37.  
38.             <ImageView 
39.                 android:id="@+id/tubiao" 
40.                 android:layout_width="wrap_content" 
41.                 android:layout_height="wrap_content" 
42.                 android:layout_alignParentRight="true" > 
43.             </ImageView> 
44.         </RelativeLayout> 
45.     </LinearLayout> 
46.  
47.     <!-- 
48.    <RelativeLayout android:id="@+id/layout_013"  
49.                 android:layout_width="fill_parent"  
50.                 android:layout_height="fill_parent"> 
51.        <ImageView android:id="@+id/ImageView01"  
52.                   android:layout_width="wrap_content"  
53.                   android:layout_height="wrap_content" 
54.                   android:src="@drawable/icon"></ImageView> 
55.        <TextView android:id="@+id/content_001"  
56.                  android:text="@+id/TextView01"  
57.                  android:layout_width="wrap_content"  
58.                  android:layout_toRightOf="@+id/ImageView01"  
59.                  android:layout_height="wrap_content"></TextView> 
60.       <ImageView android:layout_width="wrap_content"  
61.                  android:layout_toRightOf="@+id/content_001"  
62.                  android:layout_height="wrap_content"  
63.                  android:id="@+id/tubiao"></ImageView> 
64.    </RelativeLayout> 
65.  
66.  
67.     --> 
68.  
69. </LinearLayout> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" >

    <LinearLayout
        android:id="@+id/layout_013"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:paddingTop="10dp"
            android:src="@drawable/user_group" >
        </ImageView>

        <RelativeLayout
            android:id="@+id/layout_013"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/content_001"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical"
                android:paddingLeft="10dp"
                android:textColor="#FFFFFF"
                android:textSize="30sp" >
            </TextView>

            <ImageView
                android:id="@+id/tubiao"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true" >
            </ImageView>
        </RelativeLayout>
    </LinearLayout>

    <!--
   <RelativeLayout android:id="@+id/layout_013" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent">
       <ImageView android:id="@+id/ImageView01" 
                  android:layout_width="wrap_content" 
                  android:layout_height="wrap_content"
                  android:src="@drawable/icon"></ImageView>
       <TextView android:id="@+id/content_001" 
                 android:text="@+id/TextView01" 
                 android:layout_width="wrap_content" 
                 android:layout_toRightOf="@+id/ImageView01" 
                 android:layout_height="wrap_content"></TextView>
      <ImageView android:layout_width="wrap_content" 
                 android:layout_toRightOf="@+id/content_001" 
                 android:layout_height="wrap_content" 
                 android:id="@+id/tubiao"></ImageView>
   </RelativeLayout>


    -->

</LinearLayout>

小组成员配置文件member_childitem.xml：

[html] view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
2.     xmlns:tools="http://schemas.android.com/tools" 
3.     android:id="@+id/childlayout" 
4.     android:layout_width="fill_parent" 
5.     android:layout_height="fill_parent" 
6.     android:orientation="horizontal" > 
7.  
8.     <ImageView 
9.         android:id="@+id/child_image" 
10.         android:layout_width="wrap_content" 
11.         android:layout_height="wrap_content" 
12.         android:layout_marginLeft="40dp" 
13.         android:background="@drawable/child_image" 
14.         android:paddingTop="10dp" > 
15.     </ImageView> 
16.  
17.     <LinearLayout 
18.         android:layout_width="wrap_content" 
19.         android:layout_height="wrap_content" 
20.         android:orientation="vertical" > 
21.  
22.         <TextView 
23.             android:id="@+id/child_text" 
24.             android:layout_width="wrap_content" 
25.             android:layout_height="wrap_content" 
26.             android:layout_gravity="center_vertical" 
27.             android:gravity="center_vertical" 
28.             android:text="" 
29.             android:textColor="#FFFFFF" 
30.             android:textSize="25sp" > 
31.         </TextView> 
32.  
33.         <TextView 
34.             android:id="@+id/child_text2" 
35.             android:layout_width="wrap_content" 
36.             android:layout_height="wrap_content" 
37.             android:layout_gravity="center_vertical" 
38.             android:gravity="center_vertical" 
39.             android:text="" 
40.             android:textColor="#FFFFFF" 
41.             android:textSize="20sp" > 
42.         </TextView> 
43.     </LinearLayout> 
44.  
45. </LinearLayout> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/childlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/child_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:background="@drawable/child_image"
        android:paddingTop="10dp" >
    </ImageView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/child_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:text=""
            android:textColor="#FFFFFF"
            android:textSize="25sp" >
        </TextView>

        <TextView
            android:id="@+id/child_text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:gravity="center_vertical"
            android:text=""
            android:textColor="#FFFFFF"
            android:textSize="20sp" >
        </TextView>
    </LinearLayout>

</LinearLayout>

好了，今天就到这里，中午休息一会。。。