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

最新推荐文章于 2021-06-04 10:54:43 发布

Lindroy

最新推荐文章于 2021-06-04 10:54:43 发布

阅读量766

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android学习 UI控件

本文链接：https://blog.youkuaiyun.com/Lindroid20/article/details/80150651

本文介绍了如何使用ExpandableListView组件来创建一个类似智联招聘专业选择的页面，包括布局设计、数据准备、选项高度问题、指示器修改、分割线样式调整、点击事件监听以及展开监听事件的实现。通过实例详细讲解了每个步骤，最终实现了单次只能展开一个组选项的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

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

智联招聘-未展开样式

智联招聘-展开子列表

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

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

虽然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"></