【Android UI设计】ExpandableListView详解
1、前言
今天咱们来实现一下以下这个效果，相似于QQ好友分组的UI效果，废话很少说，先上效果图：
ExpandableListView是一个用来显示二级节点的listview。默认展现的是第一级的分组，点击某个分组后会展开该分组下的子列表，下面咱们就一步步来实现这个效果。java
2、实现过程
1.首先在activity_main.xml中指定ExpandableListView组件android
<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.xmlweb
- 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，该类中的关键代码是app
MyExpandableListViewAdapter适配器，适配器中有两个关键方法，分别是getGroupView（相似于ListView的getView方法）,每次加载组列表时都会执行该方法从新绘制页面；另外一个是getChildView,当展开分组时会调用此方法来绘制当前分组的子项，值得注意的是，当用户点击某个分组时，ExpandableListView页面的其余分组也会从新绘制（即每次都会从新绘制全部的分组）；下面贴出MainActivity.java的代码，关键部分已经作了注释，很容易理解。ide
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;
}
}
——–至此，该实例已经基本完成，固然这只是简单的实现，你们能够根据本身的需求自行定制优化，文中有错误地方欢迎批评指正，共同窗习。svg