android列表收缩与展开仿QQ好友列表（非常详细，附源码）

2024-11-06 技术教程

好友QQ列表，可以展开，可以收起，在android中，以往用的比较多的是listview，虽然可以实现列表的展示，但在某些情况下，我们还是希望用到可以分组并实现收缩的列表，那就要用到android的ExpandableListView，今天研究了一下这个的用法，也参考了很多资料动手写了一个小demo，实现了基本的功能，下面直接上效果图以及源代码~！

ExpandableListView是一个垂直滚动显示两级列表项的视图，与ListView不同的是，它可以有两层：每一层都能够被独立的展开并显示其子项。

本文效果：

效果一×××

效果二×××

一、实现原理

二、布局与代码

三、自定义图标

四、图标放置右边

一、实现原理

1,首先必须在布局文件中定义一个ExpandableListView

2,其次创建一级条目对应的布局文件group

3,创建二级条目对应的布局文件child

4,加载ExpandableListView组件的Activity必须继承自ExpandableListActivity

二、布局与代码

1、首先在主布局中activity_main.xml

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"><ExpandableListViewandroid:id="@id/android:list"android:layout_width="fill_parent"android:layout_height="fill_parent"/></LinearLayout>

2、其次在drawable文件夹定义布局一级列表groups.xml

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent"><TextViewandroid:id="@+id/textGroup"android:layout_width="fill_parent"android:layout_height="fill_parent"android:paddingLeft="40px"android:paddingTop="6px"android:paddingBottom="6px"android:textSize="25sp"android:text="Nodata"/></LinearLayout>

3、接着在drawable文件夹定义布局二级列表childs.xml

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">　　<TextViewandroid:id="@+id/textChild"android:layout_width="fill_parent"android:layout_height="fill_parent"android:paddingLeft="60px"android:paddingTop="10px"android:paddingBottom="10px"android:textSize="20sp"android:text="NoData"/></LinearLayout>

4、然后就是初始化和使用了

packagecom.example.expandablelistview;importjava.util.ArrayList;importjava.util.HashMap;importjava.util.List;importjava.util.Map;importandroid.os.Bundle;importandroid.app.ExpandableListActivity;importandroid.util.DisplayMetrics;importandroid.view.View;importandroid.widget.ExpandableListView;importandroid.widget.SimpleExpandableListAdapter;importandroid.widget.Toast;publicclassMainActivityextendsExpandableListActivity{/***创建一级条目容器*/List<Map<String,String>>gruops=newArrayList<Map<String,String>>();/***存放内容,以便显示在列表中*/List<List<Map<String,String>>>childs=newArrayList<List<Map<String,String>>>();@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);setListData();}/***设置列表内容*/publicvoidsetListData(){//创建二个一级条目标题Map<String,String>title_1=newHashMap<String,String>();Map<String,String>title_2=newHashMap<String,String>();Map<String,String>title_3=newHashMap<String,String>();title_1.put("group","林炳文");title_2.put("group","文炳林");gruops.add(title_1);gruops.add(title_2);//创建二级条目内容//内容一Map<String,String>title_1_content_1=newHashMap<String,String>();Map<String,String>title_1_content_2=newHashMap<String,String>();Map<String,String>title_1_content_3=newHashMap<String,String>();title_1_content_1.put("child","工人");title_1_content_2.put("child","学生");title_1_content_3.put("child","农民");List<Map<String,String>>childs_1=newArrayList<Map<String,String>>();childs_1.add(title_1_content_1);childs_1.add(title_1_content_2);childs_1.add(title_1_content_3);//内容二Map<String,String>title_2_content_1=newHashMap<String,String>();Map<String,String>title_2_content_2=newHashMap<String,String>();Map<String,String>title_2_content_3=newHashMap<String,String>();title_2_content_1.put("child","猩猩");title_2_content_2.put("child","老虎");title_2_content_3.put("child","狮子");List<Map<String,String>>childs_2=newArrayList<Map<String,String>>();childs_2.add(title_2_content_1);childs_2.add(title_2_content_2);childs_2.add(title_2_content_3);childs.add(childs_1);childs.add(childs_2);/***创建ExpandableList的Adapter容器参数:1.上下文2.一级集合3.一级样式文件4.一级条目键值*5.一级显示控件名6.二级集合7.二级样式8.二级条目键值9.二级显示控件名**/SimpleExpandableListAdaptersela=newSimpleExpandableListAdapter(this,gruops,R.drawable.groups,newString[]{"group"},newint[]{R.id.textGroup},childs,R.drawable.childs,newString[]{"child"},newint[]{R.id.textChild});//加入列表setListAdapter(sela);}/***列表内容按下*/@OverridepublicbooleanonChildClick(ExpandableListViewparent,Viewv,intgroupPosition,intchildPosition,longid){Toast.makeText(MainActivity.this,"您选择了"+gruops.get(groupPosition).toString()+"子编号"+childs.get(groupPosition).get(childPosition).toString(),Toast.LENGTH_SHORT).show();returnsuper.onChildClick(parent,v,groupPosition,childPosition,id);}/***二级标题按下*/@OverridepublicbooleansetSelectedChild(intgroupPosition,intchildPosition,booleanshouldExpandGroup){returnsuper.setSelectedChild(groupPosition,childPosition,shouldExpandGroup);}/***一级标题按下*/@OverridepublicvoidsetSelectedGroup(intgroupPosition){super.setSelectedGroup(groupPosition);}}

5、效果

这是我手机上的效果，点击工人。学生等二级列表时，我手机上会有提示框出现的，但是不知为什么录制下来就是没有。

三、自定义列表图标

上面的图标是系统自己生成的，下面我们要改成自己的

1、更改自定义图标

在drawable文件夹下新建expandablelistview_change.xml

<?xmlversion="1.0"encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_expanded="true"android:drawable="@drawable/w2"/><itemandroid:drawable="@drawable/w1"/></selector>

2、修改上面布局Activity.main.xml

其实就是加了一句android:groupIndicator="@drawable/expandablelistview_change"

下面我们再来看看效果：

四、图标放置右边

在上面MainActivity.java的函数setListData()加中：

//得到屏幕的大小DisplayMetricsdm=newDisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);//图标设置在右边getExpandableListView().setIndicatorBounds(dm.widthPixels-60,dm.widthPixels);//设置指示图标的位置

效果：