Android零基础入门第48节:可折叠列表ExpandableListView
上一期学习了AutoCompleteTextView和MultiAutoCompleteTextView,你已经掌握了吗?本期开始学习ExpandableListView的使用。
一、认识ExpandableListView
ExpandableListView 是 ListView 的子类,它在普通ListView的基础上进行了扩展,它把应用中的列表项分为几组,每组里又可包含多个列表项。
ExpandableListView的用法与普通 ListView的用法非常相似,只是 ExpandableListView所显示的列表项应 该由 ExpandableListAdapter 提供。ExpandableListAdapter 也是一个接口,该接口下提供的类继承关系图如下图所示。
与Adapter类似的是,实现 ExpandableListAdapter也有如下三种常用方式。
-
扩展 BaseExpandableListAdapter 实现 ExpandableListAdapter。
-
使用 SimpleExpandableListAdapter 将两个 List 集合包装成 ExpandableListAdapter。
-
使用 SimpleCursorTreeAdapter 将 Cursor 中的数据包装成 SimpleCursorTreeAdapter。
ExpandableListView支持的常用XML属性如下:
-
android:childDivider:指定各组内子类表项之间的分隔条,图片不会完全显示, 分离子列表项的是一条直线。
-
android:childIndicator:显示在子列表旁边的Drawable对象,可以是一个图像。
-
android:childIndicatorEnd:子列表项指示符的结束约束位置。
-
android:childIndicatorLeft:子列表项指示符的左边约束位置。
-
android:childIndicatorRight:子列表项指示符的右边约束位置。
-
android:childIndicatorStart:子列表项指示符的开始约束位置。
-
android:groupIndicator:显示在组列表旁边的Drawable对象,可以是一个图像。
-
android:indicatorEnd:组列表项指示器的结束约束位置。
-
android:indicatorLeft:组列表项指示器的左边约束位置。
-
android:indicatorRight:组列表项指示器的右边约束位置。
-
android:indicatorStart:组列表项指示器的开始约束位置。
二、ExpandableListView 示例
接下来通过一个简单的示例程序来学习ExpandableListView的使用方法。
继续使用WidgetSample工程的listviewsample模块,在app/main/res/layout/目录下创建expandlist_layout.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" > <ExpandableListView android:id="@+id/expendlist" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
在res/layout/目录创建expendlist_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="70dp" android:gravity="center_vertical" android:padding="10dp"> <ImageView android:id="@+id/group_img" android:layout_width="36dp" android:layout_height="36dp" android:layout_centerVertical="true" android:layout_marginLeft="20dp" android:src="@drawable/group_close" /> <TextView android:id="@+id/groupname_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/group_img" android:layout_marginLeft="10dp" android:text="张三" android:textSize="18sp" /> </RelativeLayout>
在res/layout/目录创建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="10dp" > <ImageView android:id="@+id/icon_img" android:layout_width="48dp" android:layout_height="48dp" android:layout_marginLeft="20dp" android:src="@drawable/item" /> <LinearLayout android:layout_width="match_parent" android:layout_height="60dp" android:gravity="center_vertical" android:orientation="vertical" > <TextView android:id="@+id/itemname_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="22sp" android:textStyle="bold" android:text="李大钊" /> <TextView android:id="@+id/info_tv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="今天是个好日子啊!" /> </LinearLayout> </LinearLayout>
新建MyExpandableListViewAdapter类,继承ExpandableListViewAdapter,并重写其方法,代码如下:
package com.jinyu.cqkxzsxy.android.listviewsample.adapter; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseExpandableListAdapter; import android.widget.ImageView; import android.widget.TextView; import com.jinyu.cqkxzsxy.android.listviewsample.R; import java.util.List; /** * @创建者 鑫鱻 * @描述 Android零基础入门到精通系列教程,欢迎关注微信公众号ShareExpert */ public class MyExpandableListViewAdapter extends BaseExpandableListAdapter { private Context mContext = null; private List<String> mGroupList = null; private List<List<String>> mItemList = null; public MyExpandableListViewAdapter(Context context, List<String> groupList, List<List<String>> itemList) { this.mContext = context; this.mGroupList = groupList; this.mItemList = itemList; } /** * 获取组的个数 * * @return * @see android.widget.ExpandableListAdapter#getGroupCount() */ @Override public int getGroupCount() { return mGroupList.size(); } /** * 获取指定组中的子元素个数 * * @param groupPosition * @return * @see android.widget.ExpandableListAdapter#getChildrenCount(int) */ @Override public int getChildrenCount(int groupPosition) { return mItemList.get(groupPosition).size(); } /** * 获取指定组中的数据 * * @param groupPosition * @return * @see android.widget.ExpandableListAdapter#getGroup(int) */ @Override public String getGroup(int groupPosition) { return mGroupList.get(groupPosition); } /** * 获取指定组中的指定子元素数据。 * * @param groupPosition * @param childPosition * @return * @see android.widget.ExpandableListAdapter#getChild(int, int) */ @Override public String getChild(int groupPosition, int childPosition) { return mItemList.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; } /** * 获取显示指定组的视图对象 * * @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(mContext).inflate(R.layout.expendlist_group, null); groupHolder = new GroupHolder(); groupHolder.groupNameTv = (TextView) convertView.findViewById(R.id.groupname_tv); groupHolder.groupImg = (ImageView) convertView.findViewById(R.id.group_img); convertView.setTag(groupHolder); } else { groupHolder = (GroupHolder) convertView.getTag(); } if (isExpanded) { groupHolder.groupImg.setImageResource(R.drawable.group_open); } else { groupHolder.groupImg.setImageResource(R.drawable.group_close); } groupHolder.groupNameTv.setText(mGroupList.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(mContext).inflate(R.layout.expendlist_item, null); itemHolder = new ItemHolder(); itemHolder.nameTv = (TextView) convertView.findViewById(R.id.itemname_tv); itemHolder.iconImg = (ImageView) convertView.findViewById(R.id.icon_img); convertView.setTag(itemHolder); } else { itemHolder = (ItemHolder) convertView.getTag(); } itemHolder.nameTv.setText(mItemList.get(groupPosition).get(childPosition)); itemHolder.iconImg.setBackgroundResource(R.drawable.item); return convertView; } /** * 组和子元素是否持有稳定的ID,也就是底层数据的改变不会影响到它们。 * * @return * @see android.widget.ExpandableListAdapter#hasStableIds() */ @Override public boolean hasStableIds() { return true; } /** * 是否选中指定位置上的子元素。 * * @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 groupNameTv; public ImageView groupImg; } class ItemHolder { public ImageView iconImg; public TextView nameTv; } }
上面程序的关键代码就是扩展BaseExpandableListAdapter来实现ExpandableListAdapter, 当扩展BaseExpandableListAdapter时,关键是实现如下4个方法。
-
getGroupCount():该方法返回包含的组列表项的数量。
-
getGroupView():该方法返回的View对象将作为组列表项。
-
getChildrenCount():该方法返回特定组所包含的子列表项的数量。
-
getChildView():该方法返回的View对象将作为特定组、特定位置的子列表项。
新建ExpandableListActivity.java文件,加载上面新建的布局文件,具体代码如下:
package com.jinyu.cqkxzsxy.android.listviewsample; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ExpandableListView; import android.widget.Toast; import com.jinyu.cqkxzsxy.android.listviewsample.adapter.MyExpandableListViewAdapter; import java.util.ArrayList; import java.util.List; public class ExpandableListActivity extends AppCompatActivity { private ExpandableListView mExpandableListView = null; // 列表数据 private List<String> mGroupNameList = null; private List<List<String>> mItemNameList = null; // 适配器 private MyExpandableListViewAdapter mAdapter = null; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.expandlist_layout); // 获取组件 mExpandableListView = (ExpandableListView) findViewById(R.id.expendlist); mExpandableListView.setGroupIndicator(null); // 初始化数据 initData(); // 为ExpandableListView设置Adapter mAdapter = new MyExpandableListViewAdapter(this, mGroupNameList, mItemNameList); mExpandableListView.setAdapter(mAdapter); // 监听组点击 mExpandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() { @Override public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id) { if (mGroupNameList.get(groupPosition).isEmpty()) { return true; } return false; } }); // 监听每个分组里子控件的点击事件 mExpandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() { @Override public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) { Toast.makeText(ExpandableListActivity.this, mAdapter.getGroup(groupPosition) + ":" + mAdapter.getChild(groupPosition, childPosition) , Toast.LENGTH_SHORT).show(); return false; } }); } // 初始化数据 private void initData(){ // 组名 mGroupNameList = new ArrayList<String>(); mGroupNameList.add("历代帝王"); mGroupNameList.add("华坛明星"); mGroupNameList.add("国外明星"); mGroupNameList.add("政坛人物"); mItemNameList = new ArrayList<List<String>>(); // 历代帝王组 List<String> itemList = new ArrayList<String>(); itemList.add("唐太宗李世民"); itemList.add("秦始皇嬴政"); itemList.add("汉武帝刘彻"); itemList.add("明太祖朱元璋"); itemList.add("宋太祖赵匡胤"); mItemNameList.add(itemList); // 华坛明星组 itemList = new ArrayList<String>(); itemList.add("范冰冰 "); itemList.add("梁朝伟"); itemList.add("谢霆锋"); itemList.add("章子怡"); itemList.add("杨颖"); itemList.add("张柏芝"); mItemNameList.add(itemList); // 国外明星组 itemList = new ArrayList<String>(); itemList.add("安吉丽娜•朱莉"); itemList.add("艾玛•沃特森"); itemList.add("朱迪•福斯特"); mItemNameList.add(itemList); // 政坛人物组 itemList = new ArrayList<String>(); itemList.add("唐纳德•特朗普"); itemList.add("金正恩"); itemList.add("奥巴马"); itemList.add("普京"); mItemNameList.add(itemList); } }
上述代码为ExpandableListView设置Adapter,并为ExpandableListView设置事件监听器。
修改程序启动的Activity,运行程序,可以看到下图所示界面效果。
点击组的时候,会将其子元素打开,如上图右侧所示,单击其中的列表会弹出消息提示。
至此,关于ExpandableListView的简单使用学习完毕,更多属性和方法建议多加练习并掌握。
今天就先到这里,如果有问题欢迎留言一起探讨,也欢迎加入Android零基础入门技术讨论微信群,共同成长!
此文章版权为微信公众号分享达人秀(ShareExpert)——鑫鱻所有,若需转载请联系作者授权,特此声明!
往期总结分享:
Android零基础入门第1节:Android的前世今生
Android零基础入门第2节:Android 系统架构和应用组件那些事
Android零基础入门第3节:带你一起来聊一聊Android开发环境
Android零基础入门第4节:正确安装和配置JDK, 高富帅养成第一招
Android零基础入门第5节:善用ADT Bundle, 轻松邂逅女神
Android零基础入门第6节:配置优化SDK Manager, 正式约会女神
Android零基础入门第7节:搞定Android模拟器,开启甜蜜之旅
Android零基础入门第8节:HelloWorld,我的第一趟旅程出发点
Android零基础入门第9节:Android应用实战,不懂代码也可以开发
Android零基础入门第10节:开发IDE大升级,终于迎来了Android Studio
Android零基础入门第11节:简单几步带你飞,运行Android Studio工程
Android零基础入门第12节:熟悉Android Studio界面,开始装逼卖萌
Android零基础入门第13节:Android Studio配置优化,打造开发利器
Android零基础入门第14节:使用高速Genymotion,跨入火箭时代
Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航
Android零基础入门第16节:Android用户界面开发概述
Android零基础入门第17节:TextView属性和方法大全
Android零基础入门第18节:EditText的属性和使用方法
Android零基础入门第19节:Button使用详解
Android零基础入门第20节:CheckBox和RadioButton使用大全
Android零基础入门第21节:ToggleButton和Switch使用大全
Android零基础入门第22节:ImageView的属性和方法大全
Android零基础入门第23节:ImageButton和ZoomButton使用大全
Android零基础入门第24节:自定义View简单使用,打造属于你的控件
Android零基础入门第25节:简单且最常用的LinearLayout线性布局
Android零基础入门第26节:两种对齐方式,layout_gravity和gravity大不同
Android零基础入门第27节:正确使用padding和margin
Android零基础入门第28节:轻松掌握RelativeLayout相对布局
Android零基础入门第29节:善用TableLayout表格布局
Android零基础入门第30节:两分钟掌握FrameLayout帧布局
Android零基础入门第31节:少用的AbsoluteLayout绝对布局
Android零基础入门第32节:新推出的GridLayout网格布局
Android零基础入门第33节:Android事件处理概述
Android零基础入门第34节:Android中基于监听的事件处理
Android零基础入门第35节:Android中基于回调的事件处理
Android零基础入门第36节:Android系统事件的处理
Android零基础入门第37节:初识ListView
Android零基础入门第38节:初识Adapter
Android零基础入门第39节:ListActivity和自定义列表项
Android零基础入门第40节:自定义ArrayAdapter
Android零基础入门第41节:使用SimpleAdapter
Android零基础入门第42节:自定义BaseAdapter
Android零基础入门第43节:ListView优化和列表首尾使用
Android零基础入门第44节:ListView数据动态更新
Android零基础入门第45节:网格视图GridView
Android零基础入门第46节:列表选项框Spinner
Android零基础入门第47节:自动完成文本框AutoCompleteTextView