在某些android开发群里，看到有些新手问怎么实现QQ好友列表，其实网上一搜挺多的。接触Android，也才一年的时间，大部分时间花在工作上（解bug。。。），界面上开发很少参与。自己维护的系统应用里，有个ExpandableListView的界面（其实android例子APIDemo也有类似的例子）就在这里写个Demo供新手参考。

ExpandableListView的用法：难点就是重写BaseExpandableListAdapter及提供的数据源。

下面看看继承BaseExpandableListAdapter的适配器：

[java] view plain copy

1. <spanxmlns="http://www.w3.org/1999/xhtml">packagecom.xyz.expande;
3. importjava.util.List;
5. importandroid.app.AlertDialog;
6. importandroid.content.Context;
7. importandroid.graphics.Bitmap;
8. importandroid.graphics.Bitmap.Config;
9. importandroid.graphics.Canvas;
10. importandroid.graphics.Paint;
11. importandroid.graphics.PixelFormat;
12. importandroid.graphics.PorterDuff.Mode;
13. importandroid.graphics.PorterDuffXfermode;
14. importandroid.graphics.Rect;
15. importandroid.graphics.RectF;
16. importandroid.graphics.drawable.BitmapDrawable;
17. importandroid.graphics.drawable.Drawable;
18. importandroid.util.Log;
19. importandroid.view.LayoutInflater;
20. importandroid.view.View;
21. importandroid.view.ViewGroup;
22. importandroid.widget.BaseExpandableListAdapter;
23. importandroid.widget.ImageView;
24. importandroid.widget.TextView;
26. publicclassExpandeAdapterextendsBaseExpandableListAdapter{
28. privateContextmContext;
29. privateLayoutInflatermInflater=null;
30. privateString[]mGroupStrings=null;
31. privateList<List<Item>>mData=null;
33. publicExpandeAdapter(Contextctx,List<List<Item>>list){
34. mContext=ctx;
35. mInflater=(LayoutInflater)mContext
36. .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
37. mGroupStrings=mContext.getResources().getStringArray(R.array.groups);
38. mData=list;
39. }
41. publicvoidsetData(List<List<Item>>list){
42. mData=list;
43. }
45. @Override
46. publicintgetGroupCount(){
47. //TODOAuto-generatedmethodstub
48. returnmData.size();
49. }
51. @Override
52. publicintgetChildrenCount(intgroupPosition){
53. //TODOAuto-generatedmethodstub
54. returnmData.get(groupPosition).size();
55. }
57. @Override
58. publicList<Item>getGroup(intgroupPosition){
59. //TODOAuto-generatedmethodstub
60. returnmData.get(groupPosition);
61. }
63. @Override
64. publicItemgetChild(intgroupPosition,intchildPosition){
65. //TODOAuto-generatedmethodstub
66. returnmData.get(groupPosition).get(childPosition);
67. }
69. @Override
70. publiclonggetGroupId(intgroupPosition){
71. //TODOAuto-generatedmethodstub
72. returngroupPosition;
73. }
75. @Override
76. publiclonggetChildId(intgroupPosition,intchildPosition){
77. //TODOAuto-generatedmethodstub
78. returnchildPosition;
79. }
81. @Override
82. publicbooleanhasStableIds(){
83. //TODOAuto-generatedmethodstub
84. returnfalse;
85. }
87. @Override
88. publicViewgetGroupView(intgroupPosition,booleanisExpanded,
89. ViewconvertView,ViewGroupparent){
90. //TODOAuto-generatedmethodstub
91. if(convertView==null){
92. convertView=mInflater.inflate(R.layout.group_item_layout,null);
93. }
94. GroupViewHolderholder=newGroupViewHolder();
95. holder.mGroupName=(TextView)convertView
96. .findViewById(R.id.group_name);
97. holder.mGroupName.setText(mGroupStrings[groupPosition]);
98. holder.mGroupCount=(TextView)convertView
99. .findViewById(R.id.group_count);
100. holder.mGroupCount.setText("["+mData.get(groupPosition).size()+"]");
101. returnconvertView;
102. }
104. @Override
105. publicViewgetChildView(intgroupPosition,intchildPosition,
106. booleanisLastChild,ViewconvertView,ViewGroupparent){
107. //TODOAuto-generatedmethodstub
108. if(convertView==null){
109. convertView=mInflater.inflate(R.layout.child_item_layout,null);
110. }
111. ChildViewHolderholder=newChildViewHolder();
112. holder.mIcon=(ImageView)convertView.findViewById(R.id.img);
113. holder.mIcon.setBackgroundDrawable(getRoundCornerDrawable(
114. getChild(groupPosition,childPosition).getImageId(),10));
115. holder.mChildName=(TextView)convertView.findViewById(R.id.item_name);
116. holder.mChildName.setText(getChild(groupPosition,childPosition)
117. .getName());
118. holder.mDetail=(TextView)convertView.findViewById(R.id.item_detail);
119. holder.mDetail.setText(getChild(groupPosition,childPosition)
120. .getDetail());
121. returnconvertView;
122. }
124. @Override
125. publicbooleanisChildSelectable(intgroupPosition,intchildPosition){
126. //TODOAuto-generatedmethodstub
127. /*很重要：实现ChildView点击事件，必须返回true*/
128. returntrue;
129. }
131. privateDrawablegetRoundCornerDrawable(intresId,floatroundPX/*圆角的半径*/){
132. Drawabledrawable=mContext.getResources().getDrawable(resId);
133. intw=mContext.getResources().getDimensionPixelSize(R.dimen.image_width);
134. inth=w;
136. Bitmapbitmap=Bitmap
137. .createBitmap(w,h,
138. drawable.getOpacity()!=PixelFormat.OPAQUE?Bitmap.Config.ARGB_8888
139. :Bitmap.Config.RGB_565);
140. Canvascanvas=newCanvas(bitmap);
141. drawable.setBounds(0,0,w,h);
142. drawable.draw(canvas);
144. intwidth=bitmap.getWidth();
145. intheight=bitmap.getHeight();
146. BitmapretBmp=Bitmap.createBitmap(width,height,Config.ARGB_8888);
147. Canvascan=newCanvas(retBmp);
149. finalintcolor=0xff424242;
150. finalPaintpaint=newPaint();
151. finalRectrect=newRect(0,0,width,height);
152. finalRectFrectF=newRectF(rect);
154. paint.setColor(color);
155. paint.setAntiAlias(true);
156. can.drawARGB(0,0,0,0);
157. can.drawRoundRect(rectF,roundPX,roundPX,paint);
159. paint.setXfermode(newPorterDuffXfermode(Mode.SRC_IN));
160. can.drawBitmap(bitmap,rect,rect,paint);
161. returnnewBitmapDrawable(retBmp);
162. }
164. privateclassGroupViewHolder{
165. TextViewmGroupName;
166. TextViewmGroupCount;
167. }
169. privateclassChildViewHolder{
170. ImageViewmIcon;
171. TextViewmChildName;
172. TextViewmDetail;
173. }
175. }
176. </span>

里面用到的有两个布局，GroupView（ChildViewt没展开的情况）如图：

布局group_item_layout.xml如下:

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="match_parent"
4. android:layout_height="?android:attr/listPreferredItemHeight"
5. android:orientation="horizontal">
7. <TextView
8. android:id="@+id/group_name"
9. android:layout_width="wrap_content"
10. android:layout_height="?android:attr/listPreferredItemHeight"
11. android:textAppearance="?android:attr/textAppearanceMedium"
12. android:layout_marginLeft="35dip"
13. android:gravity="center_vertical"
14. android:singleLine="true"/>
16. <TextView
17. android:id="@+id/group_count"
18. android:layout_width="wrap_content"
19. android:layout_height="?android:attr/listPreferredItemHeight"
20. android:textAppearance="?android:attr/textAppearanceMedium"
21. android:layout_marginLeft="5dip"
22. android:gravity="center_vertical"
23. android:singleLine="true"/>
25. </LinearLayout>

另外一个就是ChildView，本例仿QQ好友列表，如图：

哈哈，熟悉吧。布局child_item_layout.xml如下：

[html] view plain copy

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="wrap_content"
5. android:minHeight="@dimen/min_Height"
6. <spanstyle="color:#ff0000;">android:descendantFocusability="blocksDescendants"
7. </span>android:orientation="horizontal">
9. <ImageView
10. android:id="@+id/img"
11. android:layout_width="@dimen/image_width"
12. android:layout_height="@dimen/image_width"
13. android:layout_marginLeft="2dip"
14. android:layout_marginRight="10dip"
15. android:layout_gravity="center_vertical"/>
17. <LinearLayout
18. android:layout_width="wrap_content"
19. android:layout_height="match_parent"
20. android:orientation="vertical">
22. <TextView
23. android:id="@+id/item_name"
24. android:layout_width="wrap_content"
25. android:layout_height="0.0dip"
26. android:gravity="center_vertical"
27. android:layout_weight="1"/>
29. <TextView
30. android:id="@+id/item_detail"
31. android:layout_width="wrap_content"
32. android:layout_height="0.0dip"
33. android:gravity="center_vertical"
34. android:singleLine="true"
35. android:ellipsize="end"
36. android:layout_weight="1"/>
38. </LinearLayout>
40. </LinearLayout>

适配器弄好了，ExpandableListView就用系统的，现在只剩下显示的问题啦

先来几张效果图：

主Activity如下：

[java] view plain copy

1. packagecom.xyz.expande;
3. importjava.util.ArrayList;
4. importjava.util.List;
6. importandroid.app.Activity;
7. importandroid.app.AlertDialog;
8. importandroid.content.DialogInterface;
9. importandroid.content.DialogInterface.OnClickListener;
10. importandroid.os.Bundle;
11. importandroid.view.View;
12. importandroid.view.ViewGroup.LayoutParams;
13. importandroid.widget.ExpandableListView;
14. importandroid.widget.ExpandableListView.OnChildClickListener;
16. publicclassHomeActivityextendsActivityimplementsOnChildClickListener{
18. privateExpandableListViewmListView=null;
19. privateExpandeAdaptermAdapter=null;
20. privateList<List<Item>>mData=newArrayList<List<Item>>();
22. privateint[]mGroupArrays=newint[]{
23. R.array.tianlongbabu,
24. R.array.shediaoyingxiongzhuan,
25. R.array.shendiaoxialv};
27. privateint[]mDetailIds=newint[]{
28. R.array.tianlongbabu_detail,
29. R.array.shediaoyingxiongzhuan_detail,
30. R.array.shendiaoxialv_detail};
32. privateint[][]mImageIds=newint[][]{
33. {R.drawable.img_00,
34. R.drawable.img_01,
35. R.drawable.img_02},
36. {R.drawable.img_10,
37. R.drawable.img_11,
38. R.drawable.img_12,
39. R.drawable.img_13,
40. R.drawable.img_14,
41. R.drawable.img_15,
42. R.drawable.img_16},
43. {R.drawable.img_20,
44. R.drawable.img_21}};
46. /**Calledwhentheactivityisfirstcreated.*/
47. @Override
48. publicvoidonCreate(BundlesavedInstanceState){
49. super.onCreate(savedInstanceState);
50. initData();
51. mListView=newExpandableListView(this);
52. mListView.setLayoutParams(newLayoutParams(LayoutParams.FILL_PARENT,
53. LayoutParams.FILL_PARENT));
54. setContentView(mListView);
56. mListView.setGroupIndicator(getResources().getDrawable(
57. R.drawable.expander_floder));
58. mAdapter=newExpandeAdapter(this,mData);
59. mListView.setAdapter(mAdapter);
60. mListView.setOnChildClickListener(this);
61. }
63. <spanstyle="color:#ff0000;">/*
64. *ChildView设置布局很可能onChildClick进不来，要在ChildViewlayout里加上
65. *android:descendantFocusability="blocksDescendants",
66. *还有isChildSelectable里返回true
67. */
68. </span>@Override
69. publicbooleanonChildClick(ExpandableListViewparent,Viewv,
70. intgroupPosition,intchildPosition,longid){
71. //TODOAuto-generatedmethodstub
72. Itemitem=mAdapter.getChild(groupPosition,childPosition);
73. newAlertDialog.Builder(this)
74. .setTitle(item.getName())
75. .setMessage(item.getDetail())
76. .setIcon(android.R.drawable.ic_menu_more)
77. .setNegativeButton(android.R.string.cancel,
78. newOnClickListener(){
79. @Override
80. publicvoidonClick(DialogInterfacedialog,
81. intwhich){
82. //TODOAuto-generatedmethodstub
84. }
85. }).create().show();
86. returntrue;
87. }
89. privatevoidinitData(){
90. for(inti=0;i<mGroupArrays.length;i++){
91. List<Item>list=newArrayList<Item>();
92. String[]childs=getStringArray(mGroupArrays[i]);
93. String[]details=getStringArray(mDetailIds[i]);
94. for(intj=0;j<childs.length;j++){
95. Itemitem=newItem(mImageIds[i][j],childs[j],details[j]);
96. list.add(item);
97. }
98. mData.add(list);
99. }
100. }
102. privateString[]getStringArray(intresId){
103. returngetResources().getStringArray(resId);
104. }
106. }

写这个demo的时候，想实现ChildView的点击事件，实现接口onChildClick，发现不进来，很尴尬。。。最后还是在网上找到答案了，第一，在适配器里isChildSelectable 必须返回true，第二，ChildView布局child_item_layout.xml最外层的layout设置个属性：

[java] view plain copy

1. <spanstyle="FONT-SIZE:14px"><spanxmlns="http://www.w3.org/1999/xhtml"><spanxmlns="http://www.w3.org/1999/xhtml"><spanxmlns="http://www.w3.org/1999/xhtml"><spanxmlns="http://www.w3.org/1999/xhtml">android:descendantFocusability="blocksDescendants"</span></span></span></span></span>

上面已标示红色的啦。

细心的同学会发现 Item 是啥？也贴出来吧

[java] view plain copy

1. packagecom.xyz.expande;
3. publicclassItem{
5. privateintresId;
6. privateStringname;
7. privateStringdetail;
9. publicItem(intresId,Stringname,Stringdetail){
10. this.resId=resId;
11. this.name=name;
12. this.detail=detail;
13. }
15. publicvoidsetImageId(intresId){
16. this.resId=resId;
17. }
19. publicintgetImageId(){
20. returnresId;
21. }
23. publicvoidsetName(Stringname){
24. this.name=name;
25. }
27. publicStringgetName(){
28. returnname;
29. }
31. publicvoidsetDetail(Stringdetail){
32. this.detail=detail;
33. }
35. publicStringgetDetail(){
36. returndetail;
37. }
39. publicStringtoString(){
40. return"Item["+resId+","+name+","+detail+"]";
41. }
43. }

。。。这不是面向对象程序设计（OOP)类及类的实现最简单的例子么。

有不对的地方请指正，互相学习！（ChildView左边的图片处理成圆角：请看函数getRoundCornerDrawable：具体细节请看：Android --- 图片的特效处理

免分下载源码路径：http://download.csdn.net/detail/zhouyuanjing/4843520

~~完~~

更多相关文章

1. 室内定位导航系统设计实现指南
2. [Android]Android(安卓)FTP server based on Apache FTPServer
3. 关于android读取用户号码，手机串号，SIM卡序列号
4. Xposed框架之函数Hook学习
5. 自定义实现简单的Android颜色选择器（附带源码）
6. Android调用WebService之服务端实现（一）
7. Android中activity切换动画的两种实现（附种17种动画效果）
8. Android(安卓)API Demos学习(1) - Hello World
9. 浅谈Java中Collections.sort对List排序的两种方法

随机推荐

1. flutter [!] Android toolchain - develo
2. Android之开源中国客户端源码分析（二）
3. 自定义对话框Dialog
4. Layout1.3
5. android manifest.xml
6. Android 5.1 SDK下载与配置
7. android图片缩放平移
8. Android 全退出
9. Android录音应用
10. 时钟控件AnalogClock和DigitalClock