ExpandableListView多级列表(二级列表)

今天研究下ExpandableListView 多级列表的用法，先来看看效果图：



我们分析下效果图：

1.效果图中左边是一个ListView ，右边是一个ExpandableListView  ，并且左右联动，点击左边右边也会相应的发生变化。

2.右边ExpandableListView 是一个二级列表（这篇文章我们先介绍二级列表，三级列表或四级列表以后介绍），点击一级列表会展开二级列表。其主要实现的控件就是ExpandableListView 

1.先看下布局文件xml ：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/color_bg_selected">

<ImageView
android:id="@+id/ib_back"
android:layout_width="45dp"
android:layout_height="48dp"
android:layout_marginLeft="5dp"
android:padding="15dp"
android:scaleType="centerInside"
android:src="@drawable/back" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="全部分类"
android:textColor="@color/white"
android:textSize="@dimen/titlebar_title_tv_size" />

</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<ListView
android:id="@+id/listView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="4dp"
android:layout_weight="2"
android:background="@color/white"
android:choiceMode="singleChoice"
android:divider="@color/tv_f3"
android:listSelector="#00000000"
android:scrollbars="none">

</ListView>

<ExpandableListView
android:id="@+id/expendlistview"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:numColumns="2"
android:layout_marginTop="10dp"
android:horizontalSpacing="8dp"
android:verticalSpacing="8dp"
android:layout_marginLeft="10dp"
android:divider="@null"
android:layout_marginRight="10dp"
android:scrollbars="none">

</ExpandableListView>

</LinearLayout>
</LinearLayout>

通过布局文件我们可以看到，左边是listView ，右边是ExpandableListView.

2.看下代码： 先看下主类

/**
* Created by FanHaiChao on 2017/2/10.
* 需求类目的分类列表
*/
public class DemandClassifyActivity extends BaseActivity {
private ImageView ib_back;
private ListView listView;
private ExpandableListView expendlistview;
private DemandClassifyBean demandClassifyBean;
private DemandExpandAdapter demandExpandAdapter;
private DemandClassifyFirstAdapter firstAdapter;

@Override
public int getLayoutResId() {
return R.layout.activity_demand_classify;
}

@Override
protected void initView() {
ib_back = (ImageView) findViewById(R.id.ib_back);
listView = (ListView) findViewById(R.id.listView);
expendlistview = (ExpandableListView) findViewById(R.id.expendlistview);
//取消默认的左边的上下翻箭头
expendlistview.setGroupIndicator(null);
}

@Override
protected void initListener() {
ib_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//左边ListView 的点击事件，关联右边的多级列表
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
//点击ListView的条目，展示与LIstView中该条目对应的ExpandableListView的列表
demandExpandAdapter = new DemandExpandAdapter(activity,demandClassifyBean.classList.get(position).dataList);
expendlistview.setAdapter(demandExpandAdapter);

for(int i = 0; i < demandExpandAdapter.getGroupCount(); i++){
expendlistview.expandGroup(i);//多级列表初始化展开状态
//                    expendlistview.collapseGroup(i);//关闭
}
firstAdapter.setSelectedPosition(position);//设置选中的条目
firstAdapter.notifyDataSetInvalidated();
}
});
}

@Override
protected void initData() {
if (demandClassifyBean != null){
List<DemandClassifyBean.ClassListBean> classFirstList = demandClassifyBean.classList;
//ListView 的Adapter
firstAdapter = new DemandClassifyFirstAdapter(activity,classFirstList);
listView.setAdapter(firstAdapter);

if (demandClassifyBean.classList != null && demandClassifyBean.classList.size() != 0) {
//Expandable 的Adapter   ，get(0).dataList 默认展示ListView中第一个条目对应的ExpandableListView列表。
demandExpandAdapter = new DemandExpandAdapter(activity, demandClassifyBean.classList.get(0).dataList);
expendlistview.setAdapter(demandExpandAdapter);

for(int i = 0; i < demandExpandAdapter.getGroupCount(); i++){
expendlistview.expandGroup(i);//多级列表初始化展开状态
//                    expendlistview.collapseGroup(i);//多级列表初始关闭状态
}
}
}else {
onLoad();
}

}

/**
* 获取需求类目
*/
private void onLoad(){
ServiceApi.getDemandClasses(new MyString2Callback() {
@Override
public void onError(Call call, Exception e) {
ToastUtils.showInternetErrorToast();
}

@Override
public void onResponse(Call call, String s) {
// TODO: 2017/2/9
demandClassifyBean = new Gson().fromJson(s,DemandClassifyBean.class);
if (demandClassifyBean.code == 0){
initData();

}else {
ToastUtils.showToast(demandClassifyBean.msg);
}
}
});
}
}

2.之后我们看一下adapter  的代码

先看下ListVIew 的Adapter

/**
* Created by FanHaiChao on 2017/2/10.
* 需求类目一级
*/
public class DemandClassifyFirstAdapter extends BaseAdapter {
private List<DemandClassifyBean.ClassListBean> list;
Activity activity;
LayoutInflater inflater;
private int selectedPosition = 0;

public DemandClassifyFirstAdapter(Activity activity, List<DemandClassifyBean.ClassListBean> list) {
this.activity = activity;
this.list = list;
inflater = LayoutInflater.from(activity);
}

@Override
public int getCount() {
return list.size();
}

@Over
4000
ride
public Object getItem(int position) {
return list.get(position);
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) {
convertView = inflater.inflate(R.layout.item_demand_classify_left, null);
holder = new ViewHolder();
holder.textView = (TextView) convertView.findViewById(R.id.textview);
holder.colorlayout = (LinearLayout) convertView.findViewById(R.id.colorlayout);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
// 设置选中效果
if (selectedPosition == position) {
holder.textView.setTextColor(Color.parseColor("#ff8400"));
holder.colorlayout.setBackgroundColor(Color.parseColor("#fff3f3f3"));

} else {//默认效果
holder.textView.setTextColor(Color.BLACK);
holder.colorlayout.setBackgroundColor(Color.WHITE);
}

holder.textView.setText(list.get(position).CLASS_NAME.trim());

return convertView;
}

public static class ViewHolder {
public TextView textView;
public LinearLayout colorlayout;
}

//设置选中的条目
public void setSelectedPosition(int position) {
selectedPosition = position;
}
}

再看下ExpandableListView的Adapter

/**
* Created by FanHaiChao on 2017/2/10.
*
* 需求管理二三级菜单
*/
public class DemandExpandAdapter extends BaseExpandableListAdapter {
private List<DemandClassifyBean.ClassListBean.DataListBeanX> groupData;
private Activity activity;

public DemandExpandAdapter(Activity activity, List<DemandClassifyBean.ClassListBean.DataListBeanX> groupData) {
this.activity = activity;
this.groupData = groupData;
}

@Override
public int getGroupCount() {
return groupData.size();//一级列表数量
}

@Override
public int getChildrenCount(int groupPosition) {
return groupData.get(groupPosition).dataList == null ? 0:groupData.get(groupPosition).dataList.size();//二级列表数量
}

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

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

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

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

@Override //  按函数的名字来理解应该是是否具有稳定的id，这个方法目前一直都是返回false，没有去改动过
public boolean hasStableIds() {
return false;
}

@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
GroupHolder groupHolder;
if (convertView == null){
convertView = LayoutInflater.from(activity).inflate(R.layout.item_demand_classify_group,null);
groupHolder = new GroupHolder();
groupHolder.tv_item = (TextView) convertView.findViewById(R.id.tv_item);
convertView.setTag(groupHolder);
}else {
groupHolder = (GroupHolder) convertView.getTag();
}

groupHolder.tv_item.setText(groupData.get(groupPosition).CLASS_NAME);
if (isExpanded){ //一级条目展开和关闭展示的不同颜色
groupHolder.tv_item.setSelected(true);
}else {
groupHolder.tv_item.setSelected(false);
}
return convertView;
}

@Override
public View getChildView(final int groupPosition, final int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
ChildHolder childHolder;
if (convertView == null){
convertView =  LayoutInflater.from(activity).inflate(R.layout.item_demand_classify_expand,null);
childHolder = new ChildHolder();
childHolder.tv_item = (TextView) convertView.findViewById(R.id.tv_item);
convertView.setTag(childHolder);
}else {
childHolder = (ChildHolder) convertView.getTag();
}

childHolder.tv_item.setText(groupData.get(groupPosition).dataList.get(childPosition).CLASS_NAME);
//二级列表条目点击事件，返回数据
childHolder.tv_item.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.putExtra("id",groupData.get(groupPosition).dataList.get(childPosition).ID);
intent.putExtra("name",groupData.get(groupPosition).dataList.get(childPosition).CLASS_NAME);
activity.setResult(Activity.RESULT_OK,intent);
activity.finish();
}
});
return convertView;
}

@Override //  子项是否可选中，如果需要设置子项的点击事件，需要返回true
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}

private class GroupHolder{
TextView tv_item;
}

private class ChildHolder{
TextView tv_item;
}
}

详细的介绍在代码中已经介绍了，我就不在一一介绍了，不了解的请参阅：http://blog.csdn.net/shexiaoheng/article/details/41351247 

http://blog.csdn.net/wangkeke1860/article/details/46477361