android自定义ExpandableListView

有时候我们项目里面可能需要二级列表，大多数会使用系统自带的ExpandableListView来实现，毕竟自己写一个是时间，另一个是性能问题，但是想要把ExpandableListView设计成自己想要的样式还需要花费一定的时间，这里自定义一个ExpandableListView来实现如下图的效果：

首先看看没有展开的布局界面：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
  >
    <ImageView 
        android:id="@id/ImageView_Top" 
        android:background="@drawable/card_detail_list_item_top" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" />
    <RelativeLayout 
        android:id="@id/RelativeLayout_Content" 
        android:background="@drawable/card_detail_list_item_middle" 
        android:paddingLeft="15.0dip" 
        android:paddingRight="15.0dip" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/ImageView_Top">
    	<TextView 
    	   android:layout_width="match_parent" 
    	   android:layout_height="wrap_content"
    	   android:text="自定义ExpandableList使用" 
    	    />
    </RelativeLayout>
    <ImageView 
        android:id="@id/ImageView_Bottom" 
        android:background="@drawable/card_detail_list_item_bottom" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/RelativeLayout_Content" />
    <ImageView 
        android:id="@id/ImageView_Divider_Line" 
        android:background="@drawable/card_detail_blue_full_line" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:layout_margin="5.0dip" 
        android:layout_below="@id/RelativeLayout_Content" />
</RelativeLayout>

其实上面的Group是分为4部分的，第一个是头部的波浪，第二部分是显示区域，第三部分是蓝线，第四部分是下面的波浪

而Child的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/card_detail_list_item_middle" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
 >
        <LinearLayout
            android:id="@+id/tip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="5.0dip"
            android:layout_marginRight="3.0dip"
            android:orientation="vertical" >

            <TextView android:textSize="14.0sp" android:textColor="#ff444444" android:id="@id/TextView_Card_Detail_Bill_Detail_Title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="測試使用" />
            <TextView android:textSize="12.0sp" android:textColor="#ffababab" android:id="@id/TextView_Card_Detail_Bill_Detail_Title2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="3.0dip" android:text="測試使用" />
            <TextView android:textSize="10.0sp" android:textColor="#ffababab" android:id="@id/TextView_Card_Detail_Bill_Detail_Time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5.0dip" android:text="[測試使用] 測試使用 測試使用" />
        </LinearLayout>
    <ImageView
        android:id="@id/ImageView_Card_Detail_Edit_Divider"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="20.0dip"
        android:layout_marginTop="5.0dip"
        android:layout_below="@id/tip"
        android:background="@drawable/blue_dash_line_bg" />
</RelativeLayout>

对于实现上面的效果也就是图片的替换，而展开后如何在底部添加波浪，也就是把波浪图片放在一个LinearLayout布局里面，当判断是最后一个时，返回的是波浪的布局而不是你的convertView，所以添加child数据的时候记得多添加一条，给波浪线用，主要的代码在BaseExpandableListAdapter实现

HistoryBillAdapter.java

package com.example.credoit;

import java.util.List;

import android.app.Activity;
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 HistoryBillAdapter extends BaseExpandableListAdapter{

	private LayoutInflater mLayoutInflater;
	protected Activity activity;
	private List<String> groupArray;
	private List<List<String>> childArray;
	
	public HistoryBillAdapter(Activity activity,  List<String> groupArray, List<List<String>> childArray){
		this.activity = activity;
		this.groupArray = groupArray;
		this.childArray = childArray;
		mLayoutInflater = LayoutInflater.from(activity); 
	}
	
	public HistoryBillAdapter(Activity activity){
		this.activity = activity;
		mLayoutInflater = LayoutInflater.from(activity); 
	}
	
	@Override
	public Object getChild(int groupPosition, int childPosition) {
		return childArray.get(groupPosition).get(childPosition);
	}

	@Override
	public long getChildId(int groupPosition, int childPosition) {
		return childPosition;
	}
	
	@Override
	public int getChildType(int groupPosition, int childPosition) {
		if (childPosition == (-1 + getChildrenCount(groupPosition))) {
			return 1;
		}else {
			return 0;
		}
	}
	
	@Override
	public int getChildTypeCount() {
		return 2;
	}
	
	@Override
	public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView,
			ViewGroup parent) {
		ChildViewHolder childViewHolder;
		View view = convertView;
		int i1 = getChildType(groupPosition, childPosition);
		if (view == null) {
			childViewHolder = new ChildViewHolder();
			view = mLayoutInflater.inflate(R.layout.list_item_card_detail_bill_detail, null);
			view.setTag(childViewHolder);
		}else {
			childViewHolder = (ChildViewHolder)view.getTag();
		}
		if ( i1 != 0) {
			return mLayoutInflater.inflate(R.layout.list_item_card_detail_foot, null);
		}
		return view;
	}

	class ChildViewHolder{
		ImageView bankIcon;
		TextView consumerInfo;
		TextView consumerMoney;
	}
	
	@Override
	public int getChildrenCount(int groupPosition) {
		return childArray.get(groupPosition).size();
	}

	@Override
	public Object getGroup(int groupPosition) {
		return groupArray.get(groupPosition);  
	}

	@Override
	public int getGroupCount() {
		 if (groupArray != null) {  
	            return groupArray.size();  
	     }else {  
	            return 0;  
	     }  
	}

	@Override
	public long getGroupId(int groupPosition) {
		return groupPosition;
	}

	@Override
	public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
		GroupViewHolder groupViewHolder;
		if (convertView == null) {
			groupViewHolder = new GroupViewHolder();
			convertView = mLayoutInflater.inflate(R.layout.his_group_item, null);
			groupViewHolder.view_bottom = (ImageView)convertView.findViewById(R.id.ImageView_Bottom);
			groupViewHolder.view_bottom_line = (ImageView)convertView.findViewById(R.id.ImageView_Divider_Line);
			convertView.setTag(groupViewHolder);
		}else{
			groupViewHolder = (GroupViewHolder)convertView.getTag();
		}
		if (isExpanded) {
			groupViewHolder.view_bottom_line.setVisibility(View.VISIBLE);
			groupViewHolder.view_bottom.setBackgroundResource(R.drawable.card_detail_list_item_middle);
		}else {
			groupViewHolder.view_bottom_line.setVisibility(View.INVISIBLE);
			groupViewHolder.view_bottom.setBackgroundResource(R.drawable.card_detail_list_item_bottom);
		}
		
		return convertView;
	}
	
	class GroupViewHolder{
		ImageView view_bottom;
		ImageView view_bottom_line;
	}
	
	@Override
	public boolean hasStableIds() {
		return false;
	}

	@Override
	public boolean isChildSelectable(int groupPosition, int childPosition) {
		return true;
	}
}

其中下面代码就是判断是否是最后一条，同时你还要覆写getChildTypeCount,因为我们这样做child的类型是两个而不是一个

@Override
	public int getChildType(int groupPosition, int childPosition) {
		if (childPosition == (-1 + getChildrenCount(groupPosition))) {
			return 1;
		}else {
			return 0;
		}
	}
	
	@Override
	public int getChildTypeCount() {
		return 2