有时候我们项目里面可能需要二级列表,大多数会使用系统自带的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