ExpandableListView的自定义布局以及注意事项

android开发中常常需要使用到ExpandableListView来对一组数据进行分组， 使用ExpandableListView能够达到类似QQ分组的效果，类似于下面两张效果图：





要达到这种效果其实并不难，因为ExpandableListView跟ListView很相似，如果你对ListView很熟悉的话，很快就能掌握它，如果对ListView不熟悉的话，建议 先看看之前的博文 android学习之ListView的基本使用

首先定义一个主布局：activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<ExpandableListView
android:id="@+id/expandableView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></ExpandableListView>

</RelativeLayout>

然后自定义ExpandableListView中的组名显示布局：item_group.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_group_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:text="title"
android:textSize="30sp"
android:layout_marginLeft="30dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/iv_group_img"
android:layout_alignParentRight="true"/>
</RelativeLayout>

接着定义每个组下子项的布局：item_child.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_child_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="30dp"
android:textSize="20sp"
android:layout_alignParentLeft="true"
android:text="test"/>
<TextView
android:id="@+id/tv_child_explain"
android:layout_width="wrap_content"
android:layout_alignLeft="@id/tv_child_title"
android:layout_below="@id/tv_child_title"
android:layout_height="wrap_content"
android:text="explain"/>
<ImageView
android:id="@+id/iv_child_img"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>

为了方便，可以建立一个类为每个布局的组件创建一个字段，如给子项定义一个Child类：

/**
* Created by mhwang on 2015/11/25.
*/
public class Child {
/**子项标题*/
private String title;
/**子项解释*/
private String explain;
public Child(){
title = "title";
explain = "explain";
}

public String getTitle() {
return title;
}

public String getExplain() {
return explain;
}

public void setTitle(String title) {
this.title = title;
}

public void setExplain(String explain) {
this.explain = explain;
}
}

如果需要，也可以为群组建立类。

然后到了关键部分，为ExpandableListView创建一个适配器，适配器是连接视图与数据的桥梁。负责将数据送到视图中。这里自定义MyAdapter适配器继承BaseExpandableListAdapter,并重写其所有方法。

/**
* Created by mhwang on 2015/11/25.
*/
public class MyAdapter extends BaseExpandableListAdapter {
/**群组名*/
private ArrayList<String> groups;
/**群组下的子项*/
private ArrayList<ArrayList<Child>> childs;
private Context mContext;
public MyAdapter(Context context){
mContext = context;
init();
}
/**为了测试方便，先初始化一些数据*/
public void init(){
groups = new ArrayList<String>();
//添加一些群组
for(int i = 0; i < 10; i++){
groups.add("群组"+i);
}
childs = new ArrayList<ArrayList<Child>>();
//为每个群组添加一些子项
for(int i = 0; i < groups.size(); i++){
//如果该群组是偶数，为其添加5个子项,奇数添加3项
ArrayList<Child> values = new ArrayList<>();
if(i % 2 == 0 ){
for(int j = 0; j < 5; j++) {
Child child = new Child();
child.setTitle("子项"+j);
child.setExplain("解释"+j);
values.add(child);
childs.add(values);
}
}else{
for(int j = 0; j < 3; j++){
Child child = new Child();
child.setTitle("子项"+j);
child.setExplain("解释"+j);
values.add(child);
childs.add(values);
}

}
}

}
@Override
public int getGroupCount() {
return groups.size();
}

@Override
public int getChildrenCount(int groupPosition) {
return childs.get(groupPosition).size();
}

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

@Override
public Object getChild(int groupPosition, int childPosition) {
return childs.get(groupPosition).get(childPosition);
}

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

@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}

@Override
public boolean hasStableIds() {
return true;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
/**创建view */
View v = LayoutInflater.from(mContext).inflate(R.layout.item_group,null);
/**通过创建的view与自定义布局绑定，就要以找到布局里的组件了*/
TextView tvGroupTitle = (TextView)v.findViewById(R.id.tv_group_title);
ImageView ivGroupImg = (ImageView)v.findViewById(R.id.iv_group_img);
tvGroupTitle.setText(groups.get(groupPosition));
ivGroupImg.setBackgroundResource(R.drawable.m1);
return v;
}

@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
View v = LayoutInflater.from(mContext).inflate(R.layout.item_child,null);
TextView tvChildTitle = (TextView)v.findViewById(R.id.tv_child_title);
TextView tvChildExplain = (TextView)v.findViewById(R.id.tv_child_explain);
ImageView ivChildImg = (ImageView)v.findViewById(R.id.iv_child_img);
tvChildTitle.setText(childs.get(groupPosition).get(childPosition).getTitle());
tvChildExplain.setText(childs.get(groupPosition).get(childPosition).getExplain());
ivChildImg.setBackgroundResource(R.drawable.m2);
return v;
}

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

最后一步，在MainActivity中获取ExpandableListView实例并调用其setAdapter方法将自定义的MyAdapter对象传进去即可。

public class MainActivity extends AppCompatActivity {
ExpandableListView expandableListView;
MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
expandableListView = (ExpandableListView)findViewById(R.id.expandableView);
adapter = new MyAdapter(this);
expandableListView.setAdapter(adapter);
}

}

这里有几点值得注意：

1、与ListView不同，在ExpandableListView中使用ViewHolder的话会出问题，因为ExpandableListView中的每一个组下子项数目并不是相同的，重用之前的convertView会崩溃。

2、如果是从外部读入数据到列表项中，如数据库等，要特别注意列表项数据为null的情形，否则会有空指针异常并崩溃。