【深入篇】自定义ExpandableListView，实现二级列表效果
先看效果图：
上图是我们要实现的效果，那么现在我们开始着手去做，主要分为以下几步：
一丶我们需要根据效果图去思考该如何动手，从上图分析看，我们可以用一个相对布局RelativeLayout来完成group(一级item)的布局设计，至于child(二级item)的布局，我们可以用一个TextView来完成，当然，如果如要更复杂的效果可以参照一级item的布局方式进行。
以下是main.xml丶group.xml和child.xml的布局：
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ExpandableListView
android:id="@+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:cacheColorHint="#00000000"
android:listSelector="#00000000"
>
</ExpandableListView>
</LinearLayout>
group.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/group_layout">
<ImageView
android:id="@+id/group_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:contentDescription="@string/list_logo" />
<TextView
android:id="@+id/group_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/group_logo"
android:textColor="#130c0e"
android:textSize="18sp" />
<TextView
android:id="@+id/group_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/group_title"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/group_logo"
android:textColor="#838B8B"
android:textSize="15sp" />
<ImageView
android:id="@+id/group_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_marginRight="10dp"
android:contentDescription="@string/list_state" />
</RelativeLayout>
child.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/child_text"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_centerInParent="true"
android:layout_marginTop="15dp"
android:textColor="#130c0e"
android:textSize="15sp" />
</RelativeLayout>
二、布局文件设置好以后，我们开始着手去实现代码，首先谈谈我在实现过程中遇到的问题：
一：在刚开始为二级item(expandableListView.setOnChildClickListener)设置点击事件时，自己思维进入了一个误区，刷新代码写错位置导致二级item不能实时表明选中状态，实验了一番发现自己脑子发抽，其实把代码转移到点击事件中就OK了。
二：为一级item设置点击事件时，刚开始想套用二级Item点击事件的方法去做，发现行不通后，自己实验了一番，定义了一个整型数组来存放对应groupPosition的点击次数，根据点击次数来设置状态图标，功能虽然实现了，但是感觉自己的这个方法不大实用，如果是动态加入就有点问题了，这个还希望各位看官给点建议。
好了，废话不多说了，下面是实现的代码，希望各位不吝指教：
/**
* 自定义ExpandableList列表类
*
* @author jgduan
*
*/
public class ExpandableList extends Activity {
// 这个数组是用来存储一级item的点击次数的，根据点击次数设置一级标签的选中、为选中状态
private int[] group_checked = new int[]{0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};
// 用来标识是否设置二級item背景色为绿色,初始值为-1既为选中状态
private int child_groupId = -1;
private int child_childId = -1;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 隐藏标题
requestWindowFeature(Window.FEATURE_NO_TITLE);
// 指定布局
setContentView(R.layout.main);
// 新建一个ExpandableListView
ExpandableListView expandableListView = (ExpandableListView) findViewById(R.id.list);
// 设置默认图标为不显示状态
expandableListView.setGroupIndicator(null);
// 为列表绑定数据源
expandableListView.setAdapter(adapter);
// 设置一级item点击的监听器
expandableListView.setOnGroupClickListener(new OnGroupClickListener() {
@Override
public boolean onGroupClick(ExpandableListView parent, View v,
int groupPosition, long id) {
group_checked[groupPosition] = group_checked[groupPosition]+1;
// 刷新界面
((BaseExpandableListAdapter) adapter).notifyDataSetChanged();
return false;
}
});
// 设置二级item点击的监听器
expandableListView.setOnChildClickListener(new OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v,
int groupPosition, int childPosition, long id) {
// 将被点击的一丶二级标签的位置记录下来
child_groupId = groupPosition;
child_childId = childPosition;
// 刷新界面
((BaseExpandableListAdapter) adapter).notifyDataSetChanged();
return false;
}
});
}
final ExpandableListAdapter adapter = new BaseExpandableListAdapter() {
// 一级标签上的logo图片数据源
int[] group_logo_array = new int[] { R.drawable.map,
R.drawable.message, R.drawable.music, R.drawable.children };
// 一级标签上的标题数据源
private String[] group_title_arry = new String[] { "中医常识", "中医养生",
"美容养颜", "育儿百科" };
// 一级标签的描述文本数据源
private String[] group_text_array = new String[] { "四诊法、穴位、经络等",
"药膳食疗，安神醒脑等", "减肥、明目等", "关注幼儿保健" };
// 子视图显示文字
private String[][] child_text_array = new String[][] {
{ "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" },
{ "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" },
{ "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" },
{ "孕吐怎么办", "新生儿黄疸的治疗", "婴儿吐奶怎么办", "小儿感冒咳嗽怎么办" } };
// 一级标签上的状态图片数据源
int[] group_state_array = new int[] { R.drawable.group_down,
R.drawable.group_up };
// 重写ExpandableListAdapter中的各个方法
/**
* 获取一级标签总数
*/
@Override
public int getGroupCount() {
return group_text_array.length;
}
/**
* 获取一级标签内容
*/
@Override
public Object getGroup(int groupPosition) {
return group_text_array[groupPosition];
}
/**
* 获取一级标签的ID
*/
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
/**
* 获取一级标签下二级标签的总数
*/
@Override
public int getChildrenCount(int groupPosition) {
return child_text_array[groupPosition].length;
}
/**
* 获取一级标签下二级标签的内容
*/
@Override
public Object getChild(int groupPosition, int childPosition) {
return child_text_array[groupPosition][childPosition];
}
/**
* 获取二级标签的ID
*/
@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) {
// 为视图对象指定布局
convertView = (RelativeLayout) RelativeLayout.inflate(
getBaseContext(), R.layout.group, null);
/**
* 声明视图上要显示的控件
*/
// 新建一个ImageView对象，用来显示一级标签上的logo图片
ImageView group_logo = (ImageView) convertView
.findViewById(R.id.group_logo);
// 新建一个TextView对象，用来显示一级标签上的标题信息
TextView group_title = (TextView) convertView
.findViewById(R.id.group_title);
// 新建一个TextView对象，用来显示一级标签上的大体描述的信息
TextView group_text = (TextView) convertView
.findViewById(R.id.group_text);
// 新建一个ImageView对象，根据用户点击来标识一级标签的选中状态
ImageView group_state = (ImageView) convertView
.findViewById(R.id.group_state);
/**
* 设置相应控件的内容
*/
// 设置要显示的图片
group_logo.setBackgroundResource(group_logo_array[groupPosition]);
// 设置标题上的文本信息
group_title.setText(group_title_arry[groupPosition]);
// 设置整体描述上的文本信息
group_text.setText(group_text_array[groupPosition]);
if(group_checked[groupPosition] % 2 == 1){
// 设置默认的图片是选中状态
group_state.setBackgroundResource(group_state_array[1]);
}else{
for(int test : group_checked){
if(test == 0 || test % 2 == 0){
// 设置默认的图片是未选中状态
group_state.setBackgroundResource(group_state_array[0]);
}
}
}
// 返回一个布局对象
return convertView;
}
/**
* 对一级标签下的二级标签进行设置
*/
@Override
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
// 为视图对象指定布局
convertView = (RelativeLayout) RelativeLayout.inflate(
getBaseContext(), R.layout.child, null);
/**
* 声明视图上要显示的控件
*/
// 新建一个TextView对象，用来显示具体内容
TextView child_text = (TextView) convertView
.findViewById(R.id.child_text);
/**
* 设置相应控件的内容
*/
// 设置要显示的文本信息
child_text.setText(child_text_array[groupPosition][childPosition]);
// 判断item的位置是否相同，如相同，则表示为选中状态，更改其背景颜色，如不相同，则设置背景色为白色
if (child_groupId == groupPosition
&& child_childId == childPosition) {
// 设置背景色为绿色
convertView.setBackgroundColor(Color.GREEN);
} else {
// 设置背景色为白色
convertView.setBackgroundColor(Color.WHITE);
}
// 返回一个布局对象
return convertView;
}
/**
* 当选择子节点的时候，调用该方法
*/
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
};
}
}
一、前言
今天我们来实现一下如下这个效果，类似于QQ好友分组的UI效果，废话不多说，先上效果图：
ExpandableListView是一个用来显示二级节点的listview。默认展示的是第一级的分组，点击某个分组后会展开该分组下的子列表，下面我们就一步步来实现这个效果。
二、实现过程
1.首先在activity_main.xml中指定ExpandableListView组件
<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:background="#FFFFFF"
tools:context=".MainActivity" >
<!-- cacheColorHint：系统默认拖动过程中列表背景是黑的,设置为透明 -->
<ExpandableListView
android:id="@+id/expendlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#00000000"
android:divider="@drawable/gbt"
android:childDivider="@drawable/fij">
</ExpandableListView>
</RelativeLayout>
2.分别添加一级布局expendlist_group.xml和二级布局（子布局）expendlist_item.xml
- expendlist_group.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:gravity="center_vertical"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp" >
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_centerVertical="true"
/>
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/img"
android:layout_marginLeft="20dp"
android:textSize="18sp"
android:text="张三" />
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:gravity="right"
android:text="4/17" />
</RelativeLayout>
</LinearLayout>
- expendlist_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="10.0dp" >
<ImageView
android:id="@+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="20dp"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="李大钊" />
<TextView
android:id="@+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="今天是个好日子啊，咿呀咿呀呀" />
</LinearLayout>
</LinearLayout>
3.关键代码MainActivity.java，该类中的关键代码是
MyExpandableListViewAdapter适配器，适配器中有两个关键方法，分别是getGroupView（类似于ListView的getView方法）,每次加载组列表时都会执行该方法重新绘制页面；另一个是getChildView,当展开分组时会调用此方法来绘制当前分组的子项，值得注意的是，当用户点击某个分组时，ExpandableListView页面的其他分组也会重新绘制（即每次都会重新绘制所有的分组）；下面贴出MainActivity.java的代码，关键部分已经做了注释，很容易理解。
package com.example.android.expandable.listview;
import java.util.ArrayList;
import java.util.List;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ExpandableListView;
import android.widget.ExpandableListView.OnChildClickListener;
import android.widget.ExpandableListView.OnGroupClickListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends Activity
{
private ExpandableListView expandableListView;
private List<String> group_list;
private List<String> item_lt;
private List<List<String>> item_list;
private List<List<Integer>> item_list2;
private List<List<Integer>> gr_list2;
private MyExpandableListViewAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 随便一堆测试数据
group_list = new ArrayList<String>();
group_list.add("我的好友");
group_list.add("我的家人");
group_list.add("兄弟姐妹");
group_list.add("我的同学");
item_lt = new ArrayList<String>();
item_lt.add("张三丰");
item_lt.add("董存瑞");
item_lt.add("李大钊");
item_list = new ArrayList<List<String>>();
item_list.add(item_lt);
item_list.add(item_lt);
item_list.add(item_lt);
item_list.add(item_lt);
List<Integer> tmp_list = new ArrayList<Integer>();
tmp_list.add(R.drawable.ic_launcher);
tmp_list.add(R.drawable.ic_launcher);
tmp_list.add(R.drawable.ic_launcher);
tmp_list.add(R.drawable.ic_launcher);
item_list2 = new ArrayList<List<Integer>>();
item_list2.add(tmp_list);
item_list2.add(tmp_list);
item_list2.add(tmp_list);
item_list2.add(tmp_list);
List<Integer> gr_list = new ArrayList<Integer>();
gr_list.add(R.drawable.group_img);
gr_list.add(R.drawable.group_img);
gr_list.add(R.drawable.group_img);
gr_list.add(R.drawable.group_img);
gr_list2 = new ArrayList<List<Integer>>();
gr_list2.add(gr_list);
gr_list2.add(gr_list);
gr_list2.add(gr_list);
gr_list2.add(gr_list);
expandableListView = (ExpandableListView)findViewById(R.id.expendlist);
expandableListView.setGroupIndicator(null);
// 监听组点击
expandableListView.setOnGroupClickListener(new OnGroupClickListener()
{
@SuppressLint("NewApi")
@Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id)
{
if (item_list.get(groupPosition).isEmpty())
{
return true;
}
return false;
}
});
// 监听每个分组里子控件的点击事件
expandableListView.setOnChildClickListener(new OnChildClickListener()
{
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id)
{
Toast.makeText(MainActivity.this, "group=" + groupPosition + "---child=" + childPosition + "---" + item_list.get(groupPosition).get(childPosition), Toast.LENGTH_SHORT).show();
return false;
}
});
adapter = new MyExpandableListViewAdapter(this);
expandableListView.setAdapter(adapter);
}
// 用过ListView的人一定很熟悉，只不过这里是BaseExpandableListAdapter
class MyExpandableListViewAdapter extends BaseExpandableListAdapter
{
private Context context;
public MyExpandableListViewAdapter(Context context)
{
this.context = context;
}
/**
*
* 获取组的个数
*
* @return
* @see android.widget.ExpandableListAdapter#getGroupCount()
*/
@Override
public int getGroupCount()
{
return group_list.size();
}
/**
*
* 获取指定组中的子元素个数
*
* @param groupPosition
* @return
* @see android.widget.ExpandableListAdapter#getChildrenCount(int)
*/
@Override
public int getChildrenCount(int groupPosition)
{
return item_list.get(groupPosition).size();
}
/**
*
* 获取指定组中的数据
*
* @param groupPosition
* @return
* @see android.widget.ExpandableListAdapter#getGroup(int)
*/
@Override
public Object getGroup(int groupPosition)
{
return group_list.get(groupPosition);
}
/**
*
* 获取指定组中的指定子元素数据。
*
* @param groupPosition
* @param childPosition
* @return
* @see android.widget.ExpandableListAdapter#getChild(int, int)
*/
@Override
public Object getChild(int groupPosition, int childPosition)
{
return item_list.get(groupPosition).get(childPosition);
}
/**
*
* 获取指定组的ID，这个组ID必须是唯一的
*
* @param groupPosition
* @return
* @see android.widget.ExpandableListAdapter#getGroupId(int)
*/
@Override
public long getGroupId(int groupPosition)
{
return groupPosition;
}
/**
*
* 获取指定组中的指定子元素ID
*
* @param groupPosition
* @param childPosition
* @return
* @see android.widget.ExpandableListAdapter#getChildId(int, int)
*/
@Override
public long getChildId(int groupPosition, int childPosition)
{
return childPosition;
}
/**
*
* 组和子元素是否持有稳定的ID,也就是底层数据的改变不会影响到它们。
*
* @return
* @see android.widget.ExpandableListAdapter#hasStableIds()
*/
@Override
public boolean hasStableIds()
{
return true;
}
/**
*
* 获取显示指定组的视图对象
*
* @param groupPosition 组位置
* @param isExpanded 该组是展开状态还是伸缩状态
* @param convertView 重用已有的视图对象
* @param parent 返回的视图对象始终依附于的视图组
* @return
* @see android.widget.ExpandableListAdapter#getGroupView(int, boolean, android.view.View,
* android.view.ViewGroup)
*/
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent)
{
GroupHolder groupHolder = null;
if (convertView == null)
{
convertView = LayoutInflater.from(context).inflate(R.layout.expendlist_group, null);
groupHolder = new GroupHolder();
groupHolder.txt = (TextView)convertView.findViewById(R.id.txt);
groupHolder.img = (ImageView)convertView.findViewById(R.id.img);
convertView.setTag(groupHolder);
}
else
{
groupHolder = (GroupHolder)convertView.getTag();
}
if (!isExpanded)
{
groupHolder.img.setBackgroundResource(R.drawable.group_img);
}
else
{
groupHolder.img.setBackgroundResource(R.drawable.group_open_two);
}
groupHolder.txt.setText(group_list.get(groupPosition));
return convertView;
}
/**
*
* 获取一个视图对象，显示指定组中的指定子元素数据。
*
* @param groupPosition 组位置
* @param childPosition 子元素位置
* @param isLastChild 子元素是否处于组中的最后一个
* @param convertView 重用已有的视图(View)对象
* @param parent 返回的视图(View)对象始终依附于的视图组
* @return
* @see android.widget.ExpandableListAdapter#getChildView(int, int, boolean, android.view.View,
* android.view.ViewGroup)
*/
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent)
{
ItemHolder itemHolder = null;
if (convertView == null)
{
convertView = LayoutInflater.from(context).inflate(R.layout.expendlist_item, null);
itemHolder = new ItemHolder();
itemHolder.txt = (TextView)convertView.findViewById(R.id.txt);
itemHolder.img = (ImageView)convertView.findViewById(R.id.img);
convertView.setTag(itemHolder);
}
else
{
itemHolder = (ItemHolder)convertView.getTag();
}
itemHolder.txt.setText(item_list.get(groupPosition).get(childPosition));
itemHolder.img.setBackgroundResource(item_list2.get(groupPosition).get(childPosition));
return convertView;
}
/**
*
* 是否选中指定位置上的子元素。
*
* @param groupPosition
* @param childPosition
* @return
* @see android.widget.ExpandableListAdapter#isChildSelectable(int, int)
*/
@Override
public boolean isChildSelectable(int groupPosition, int childPosition)
{
return true;
}
}
class GroupHolder
{
public TextView txt;
public ImageView img;
}
class ItemHolder
{
public ImageView img;
public TextView txt;
}
}