能伸能缩的ExpandableListView(仿智联招聘专业选择列表页面)

一、前言

前些日子项目中需要实现一个类似于智联招聘的专业选择页面,简单地说就是点击一级专业列表中的某一项就会展开二级专业列表,一级列表就是一个个组(组选项),二级列表就是一个组里面的成员(子选项)。智联招聘的效果如下:

智联招聘-未展开样式

智联招聘-展开子列表

现在的主流列表控件毫无疑问是RecyclerView,所以你也许会想到用一个RecyclerView来显示组列表,然后在其item里面再嵌套一个RecyclerView显示子选项列表。点击组选项就将嵌套的RecyclerView布局设为visible或者gone来展开和关闭子列表。这种做法有如下的缺点:

  1. RecyclerView的嵌套容易造成卡顿;
  2. 点击组列表的最后一项时,虽然子列表已经显示了,但是在屏幕之外,需要向上滑动才能看到,用户体验不是很好。

虽然RecyclerView是当红炸子鸡,但是解决这些问题还是得老司机ExpandableListView出马了。这是有点年头的控件了,不过宝刀未老,我们可以用它轻松实现下拉列表效果。在这里我不打算一一罗列ExpandableListView的用法,而是采取实战的方式,以实现需求为中心,用到哪个再讲那个。因为我觉得在实战中学习和填坑更有趣味,更有效果。所以,下面我们就一起来做一个智联招聘的专业选择页面吧。

先提前看看我们要实现的效果:

专业列表选择页效果图

二、布局

2.1 主布局

整体布局很简单,放一个ExpandableListView就可以了:

<FrameLayout 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"
  >

    <ExpandableListView
        android:id="@+id/expandable_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

2.2 组选项的item布局

组选项只需要显示文字,所以先放一个TextView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:paddingLeft="20dp"
    android:gravity="center_vertical"
    android:background="@android:color/white"
    android:orientation="vertical">

    <TextView
        android:text="dd"
        android:gravity="center_vertical"
        android:id="@+id/tv_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="16sp" />

</LinearLayout>

2.3 子选项的item布局

子选项的item布局与组选项的唯一区别就是它的背景是灰色的(android:background="#F2F2F2"),代码就不重复贴了。

三、数据准备

一个组选项对应的是一组子选项,所以组选项的数据是一个一级数组,子选项的数据是二级数组。为了添加数据方便,我这里使用的是集合,每一组的子选项数据个数设为随机:

    private void initData(){
        //初始化一级专业数据
        for (int i = 1; i <= 15; i++) {
            groupList.add(new StringBuffer("一级专业").append(i).toString());
        }
        //初始化二级专业数据
        Random random = new Random();
        for (String s : groupList) {
            List<String> childDatas = new ArrayList<>();
            int size = random.nextInt(10) + 5;
            for (int i = 1; i <= size; i++) {
                childDatas.add(new StringBuffer("二级专业").append(i).toString());
            }
            childList.add(childDatas);
        }
    }

运行之后发现数据都有了,但是见鬼,为什么组选项和子选项的高度都那么窄呢?

四、选项高度为wrap_content的坑

这可以算是ExpandableListView的一个小坑,当组选项或者子选项的根布局高度设置为固定值,实际出来的效果却是wrap_content。解决这个问题可以给根布局再加一个属性android:minHeight="50dp",或者也给子控件TextView加上固定的高度(如果你的item里面的控件比较简单可以采取这个方法)。当然,如果你的item高度不是一个固定值,也可以将高度设为wrap_content,然后在里面设置padding或者margin值,比如:

        android:paddingTop="10dp"
        android:paddingBottom="10dp"

你可以根据需求采取合适的方案。

五、修改组选项的指示器

仔细观察我们可以发现,ExpandableListView默认显示了一个指示器,也就是左边的小箭头,并且提供了属性android:groupIndicator来设置其样式。这个指示器是固定在左边的,虽然可以设置上下左右的距离,但是很难控制,一不小心就会跟文字重叠,所以我做法是干脆设置android:groupIndicator="@null"让其消失,然后自己在组选项的布局中用两张图片来替代。

组选项的布局修改如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/white"
    android:gravity="center_vertical"
    android:minHeight="50dp"
    android:orientation="vertical"
    android:paddingLeft="20dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_toLeftOf="@+id/iv_indicator"
            android:layout_centerVertical="true"
            android:id="@+id/tv_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:textColor="@android:color/black"
            android:textSize="16sp" />

        <ImageView
            android:layout_marginRight="20dp"
            android:id="@+id/iv_indicator"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>
</LinearLayout>

回到MajorAdapter,在getGroupView方法中有一个isExpanded参数,它表示的是组选项的展开状态,true时表示展开,false则是闭合。有了它,我们就可以轻松决定箭头指示器的方向了。

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded,
                             View convertView, ViewGroup parent) {
        ……
        //根据列表的展开状态来决定箭头的方向
        groupHolder.ivIndicator.setImageResource(isExpanded ?
                R.drawable.ic_arrow_up : R.drawable.ic_arrow_down);
        return convertView;
    }

六、修改分割线样式

ExpandableListView是继承于ListView,所以它也可以通过android:divider属性来同时设置组选项和子选项的分割线。我们需要的分割线左边有20dp的间距,所以只好设置android:divider="@null"来去掉原生的分割线,并且自己写一条了。

创建一个layout_divider.xml的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#d4d4d4"
    android:layout_height="0.5dp"
    >
</RelativeLayout>

然后在组选项和子选项的布局中include进去:

<include layout="@layout/layout_divider" />

至此,我们的界面就已经完成了,现在来实现它的点击事件吧。

七、组选项和子选项的点击事件

ExpandableListView提供了setOnGroupClickListenersetOnChildClickListener两个方法来分别监听组选项和子选项的点击事件。比如监听子选项的点击事件:

        //子选项的点击事件
        expandableList.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition,
                                        int childPosition, long id) {
                String toastStr = new StringBuffer("你选择了").append(groupList.get(groupPosition))
                        .append("的").append(childList.get(groupPosition).get(childPosition)).toString();
                Toast.makeText(context, toastStr, Toast.LENGTH_SHORT).show();
                return false;
            }
        });

组选项的点击监听事件相似,这里就不再赘述了。

八、组选项的展开监听事件

现在我们来实现一个智联招聘中没有的功能吧,即点击某一组选项时,被点击的组选项展开,其他展开的组选项自动关闭,也就是每次只能有一个组选项展开子列表。你也许会想到用上一节中的setOnGroupClickListener,但是这个是每次组选项被点击时都会监听,哪怕是已经关闭了,所以性能上会有点浪费。除此之外,我们还有更好的选择,那就是使用setOnGroupExpandListener监听列表的展开事件:

        //实现每次只展开一个组选项列表的功能
        expandableList.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
            @Override
            public void onGroupExpand(int groupPosition) {
                //获取组选项个数
                int groupSize = expandableList.getExpandableListAdapter().getGroupCount();
                for (int i = 0; i < groupSize; i++) {
                    if (i != groupPosition && expandableList.isGroupExpanded(i)) {
                        //不是当前点击的组选项且处于展开状态的就关闭
                        expandableList.collapseGroup(i);
                    }
                }
            }
        });

每次点击展开某个组选项时,我们就遍历组选项列表,比较它们的groupPosition,如果不是当前点击的组选项且处于展开状态,就调用collapseGroup将其关闭。

你一定会想到,既然有方法可以将某一组选项里面的列表关闭,是不是也有对应的方法展开呢?没错,相对于collapseGroup,还有对应的expandGroup方法,而且它的第二个参数可以设置展开时是否显示动画效果。如果你想页面显示时就展开某一特定的子列表,那么就可以使用expandGroup了。

九、总结

至此,我们的界面和功能都已经实现完毕了。现在就来梳理用到的属性和API吧。

首先是xml属性:

属性 作用
android:groupIndicator 设置组选项的指示器
android:divider 设置组选项和子选项列表的分割线

然后是用到的方法:

方法 作用
setOnGroupExpandListener 组选项的点击监听事件
setOnChildClickListener 子选项的点击监听事件
setOnGroupExpandListener 组选项的展开监听事件
getExpandableListAdapter 获取ExpandableListView绑定的Adapter
collapseGroup 关闭某一组选项下的列表
expandGroup 展开某一组选项下的列表

如果你还想深入学习ExpandableListView,可以阅读这份官方文档:
http://www.android-doc.com/reference/android/widget/ExpandableListView.html#getFlatListPosition(long))

十、源码提供

源码我放做了码云上,但是由于里面还有我的一些乱七八糟的代码,所以不建议大家把整个工程下载下来,只需关注ExpandableListView包下面这几个文件就行了:

  • ExpandableListViewActivity
  • MajorFragment
  • MajorAdapter

我也将本项目的代码和资源文件打包上传到了百度网盘,你可以直接下载使用:
百度网盘

事实上,这里代码难度不大,所以我强烈建议你亲自动手敲一遍。最后,祝大家学习愉快。

阅读 3k

推荐阅读