在某些android开发群里，看到有些新手问怎么实现QQ好友列表，其实网上一搜挺多的。接触Android，也才一年的时间，大部分时间花在工作上（解bug。。。），界面上开发很少参与。自己维护的系统应用里，有个ExpandableListView的界面（其实android例子APIDemo也有类似的例子）就在这里写个Demo供新手参考。
ExpandableListView的用法：难点就是重写BaseExpandableListAdapter及提供的数据源。
下面看看继承BaseExpandableListAdapter的适配器：
package com.xyz.expande;import java.util.List;import android.app.AlertDialog;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.PixelFormat;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.graphics.Rect;import android.graphics.RectF;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseExpandableListAdapter;import android.widget.ImageView;import android.widget.TextView;public class ExpandeAdapter extends BaseExpandableListAdapter {private Context mContext;private LayoutInflater mInflater = null;private String[] mGroupStrings = null;private List<List<Item>> mData = null;public ExpandeAdapter(Context ctx, List<List<Item>> list) {mContext = ctx;mInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);mGroupStrings = mContext.getResources().getStringArray(R.array.groups);mData = list;}public void setData(List<List<Item>> list) {mData = list;}@Overridepublic int getGroupCount() {// TODO Auto-generated method stubreturn mData.size();}@Overridepublic int getChildrenCount(int groupPosition) {// TODO Auto-generated method stubreturn mData.get(groupPosition).size();}@Overridepublic List<Item> getGroup(int groupPosition) {// TODO Auto-generated method stubreturn mData.get(groupPosition);}@Overridepublic Item getChild(int groupPosition, int childPosition) {// TODO Auto-generated method stubreturn mData.get(groupPosition).get(childPosition);}@Overridepublic long getGroupId(int groupPosition) {// TODO Auto-generated method stubreturn groupPosition;}@Overridepublic long getChildId(int groupPosition, int childPosition) {// TODO Auto-generated method stubreturn childPosition;}@Overridepublic boolean hasStableIds() {// TODO Auto-generated method stubreturn false;}@Overridepublic View getGroupView(int groupPosition, boolean isExpanded,View convertView, ViewGroup parent) {// TODO Auto-generated method stubif (convertView == null) {convertView = mInflater.inflate(R.layout.group_item_layout, null);}GroupViewHolder holder = new GroupViewHolder();holder.mGroupName = (TextView) convertView.findViewById(R.id.group_name);holder.mGroupName.setText(mGroupStrings[groupPosition]);holder.mGroupCount = (TextView) convertView.findViewById(R.id.group_count);holder.mGroupCount.setText("[" + mData.get(groupPosition).size() + "]");return convertView;}@Overridepublic View getChildView(int groupPosition, int childPosition,boolean isLastChild, View convertView, ViewGroup parent) {// TODO Auto-generated method stubif (convertView == null) {convertView = mInflater.inflate(R.layout.child_item_layout, null);}ChildViewHolder holder = new ChildViewHolder();holder.mIcon = (ImageView) convertView.findViewById(R.id.img);holder.mIcon.setBackgroundDrawable(getRoundCornerDrawable(getChild(groupPosition, childPosition).getImageId(), 10));holder.mChildName = (TextView) convertView.findViewById(R.id.item_name);holder.mChildName.setText(getChild(groupPosition, childPosition).getName());holder.mDetail = (TextView) convertView.findViewById(R.id.item_detail);holder.mDetail.setText(getChild(groupPosition, childPosition).getDetail());return convertView;}@Overridepublic boolean isChildSelectable(int groupPosition, int childPosition) {// TODO Auto-generated method stub/* 很重要：实现ChildView点击事件，必须返回true */return true;}private Drawable getRoundCornerDrawable(int resId, float roundPX /* 圆角的半径 */) {Drawable drawable = mContext.getResources().getDrawable(resId);int w = mContext.getResources().getDimensionPixelSize(R.dimen.image_width);int h = w;Bitmap bitmap = Bitmap.createBitmap(w,h,drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888: Bitmap.Config.RGB_565);Canvas canvas = new Canvas(bitmap);drawable.setBounds(0, 0, w, h);drawable.draw(canvas);int width = bitmap.getWidth();int height = bitmap.getHeight();Bitmap retBmp = Bitmap.createBitmap(width, height, Config.ARGB_8888);Canvas can = new Canvas(retBmp);final int color = 0xff424242;final Paint paint = new Paint();final Rect rect = new Rect(0, 0, width, height);final RectF rectF = new RectF(rect);paint.setColor(color);paint.setAntiAlias(true);can.drawARGB(0, 0, 0, 0);can.drawRoundRect(rectF, roundPX, roundPX, paint);paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));can.drawBitmap(bitmap, rect, rect, paint);return new BitmapDrawable(retBmp);}private class GroupViewHolder {TextView mGroupName;TextView mGroupCount;}private class ChildViewHolder {ImageView mIcon;TextView mChildName;TextView mDetail;}}
里面用到的有两个布局，GroupView（ChildViewt没展开的情况）如图：
布局group_item_layout.xml如下:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="?android:attr/listPreferredItemHeight"android:orientation="horizontal" ><TextViewandroid:id="@+id/group_name"android:layout_width="wrap_content"android:layout_height="?android:attr/listPreferredItemHeight"android:textAppearance="?android:attr/textAppearanceMedium"android:layout_marginLeft="35dip"android:gravity="center_vertical"android:singleLine="true" /><TextViewandroid:id="@+id/group_count"android:layout_width="wrap_content"android:layout_height="?android:attr/listPreferredItemHeight"android:textAppearance="?android:attr/textAppearanceMedium"android:layout_marginLeft="5dip"android:gravity="center_vertical"android:singleLine="true"/></LinearLayout>
另外一个就是ChildView，本例仿QQ好友列表，如图：
哈哈，熟悉吧。布局child_item_layout.xml如下：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"android:minHeight="@dimen/min_Height"android:descendantFocusability="blocksDescendants" android:orientation="horizontal" ><ImageViewandroid:id="@+id/img"android:layout_width="@dimen/image_width"android:layout_height="@dimen/image_width"android:layout_marginLeft="2dip"android:layout_marginRight="10dip"android:layout_gravity="center_vertical" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/item_name"android:layout_width="wrap_content"android:layout_height="0.0dip"android:gravity="center_vertical"android:layout_weight="1" /><TextViewandroid:id="@+id/item_detail"android:layout_width="wrap_content"android:layout_height="0.0dip"android:gravity="center_vertical"android:singleLine="true"android:ellipsize="end"android:layout_weight="1" /></LinearLayout></LinearLayout>
适配器弄好了，ExpandableListView就用系统的，现在只剩下显示的问题啦
先来几张效果图：
主Activity如下：
package com.xyz.expande;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInterface;import android.content.DialogInterface.OnClickListener;import android.os.Bundle;import android.view.View;import android.view.ViewGroup.LayoutParams;import android.widget.ExpandableListView;import android.widget.ExpandableListView.OnChildClickListener;public class HomeActivity extends Activity implements OnChildClickListener {private ExpandableListView mListView = null;private ExpandeAdapter mAdapter = null;private List<List<Item>> mData = new ArrayList<List<Item>>();private int[] mGroupArrays = new int[] { R.array.tianlongbabu,R.array.shediaoyingxiongzhuan, R.array.shendiaoxialv };private int[] mDetailIds = new int[] { R.array.tianlongbabu_detail,R.array.shediaoyingxiongzhuan_detail, R.array.shendiaoxialv_detail };private int[][] mImageIds = new int[][] {{ R.drawable.img_00, R.drawable.img_01, R.drawable.img_02 },{ R.drawable.img_10, R.drawable.img_11, R.drawable.img_12,R.drawable.img_13, R.drawable.img_14, R.drawable.img_15,R.drawable.img_16 },{ R.drawable.img_20,R.drawable.img_21 } };/** Called when the activity is first created. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);initData();mListView = new ExpandableListView(this);mListView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));setContentView(mListView);mListView.setGroupIndicator(getResources().getDrawable(R.drawable.expander_floder));mAdapter = new ExpandeAdapter(this, mData);mListView.setAdapter(mAdapter);mListView.setOnChildClickListener(this);}/** ChildView 设置 布局很可能onChildClick进不来，要在 ChildView layout 里加上* android:descendantFocusability="blocksDescendants",* 还有isChildSelectable里返回true*/ @Overridepublic boolean onChildClick(ExpandableListView parent, View v,int groupPosition, int childPosition, long id) {// TODO Auto-generated method stubItem item = mAdapter.getChild(groupPosition, childPosition);new AlertDialog.Builder(this).setTitle(item.getName()).setMessage(item.getDetail()).setIcon(android.R.drawable.ic_menu_more).setNegativeButton(android.R.string.cancel,new OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int which) {// TODO Auto-generated method stub}}).create().show();return true;}private void initData() {for (int i = 0; i < mGroupArrays.length; i++) {List<Item> list = new ArrayList<Item>();String[] childs = getStringArray(mGroupArrays[i]);String[] details = getStringArray(mDetailIds[i]);for (int j = 0; j < childs.length; j++) {Item item = new Item(mImageIds[i][j], childs[j], details[j]);list.add(item);}mData.add(list);}}private String[] getStringArray(int resId) {return getResources().getStringArray(resId);}}
写这个demo的时候，想实现ChildView的点击事件，实现接口onChildClick，发现不进来，很尴尬。。。最后还是在网上找到答案了，第一，在适配器里isChildSelectable 必须返回true，第二，ChildView布局child_item_layout.xml最外层的layout设置个属性：
android:descendantFocusability="blocksDescendants"
上面已标示红色的啦。
细心的同学会发现 Item 是啥？也贴出来吧
package com.xyz.expande;public class Item {private int resId;private String name;private String detail;public Item(int resId, String name, String detail) {this.resId = resId;this.name = name;this.detail = detail;}public void setImageId(int resId) {this.resId = resId;}public int getImageId() {return resId;}public void setName(String name) {this.name = name;}public String getName() {return name;}public void setDetail(String detail) {this.detail = detail;}public String getDetail() {return detail;}public String toString() {return "Item[" + resId + ", " + name + ", " + detail + "]";}}
。。。这不是面向对象程序设计（OOP)类及类的实现最简单的例子么。
有不对的地方请指正，互相学习！（ChildView左边的图片处理成圆角：请看函数getRoundCornerDrawable：具体细节请看：Android --- 图片的特效处理
免分下载源码路径：/detail/zhouyuanjing/4843520
~~完~~
