可展开和收起的LinearLayout

时间 2021-01-16

今日科技快讯

随着芝麻信用分开始进入更多的生活场景（如果芝麻分够高，可以开通花呗、借呗，用于借款；甚至免押金，骑走一辆小蓝车。），近期地下黑市突然兴起一条特殊产业链：伪造各种数据，试图刷高芝麻信用分。因为在芝麻信用分里，可以绑定公积金、房产证、海外征信报告等个人信息，而黑市上伪造这13项数据，只需要400元。

作者简介

本篇是 Chay_Chan 的第五篇投稿，分享了一个可收起可展开的控件，效果不错，希望大家喜欢。

Chay_Chan 的博客地址：

http://blog.csdn.net/chay_chan

ExpandableLinearLayout介绍

场景介绍

开发的过程中，有时我们需要使用到这样一个功能，在展示一些商品的时候，默认只显示前几个，例如先显示前三个，这样子不会一进入页面就被商品列表占据了大部分，可以先让用户可以看到页面的大概，当用户需要查看更多的商品时，点击“展开”，就可以看到被隐藏的商品，点击“收起”，则又回到一开始的状态，只显示前几个，其他的收起来了。就拿美团外卖的订单详情页的布局作为例子，请看以下图片：

订单详情页面一开始只显示购买的前三样菜，当点击“点击展开”时，则将购买的所有外卖都展示出来，当点击“点击收起”时，则将除了前三样菜以外的都隐藏起来。其实要完成这样的功能并不难，为了方便自己和大家以后的开发，我将其封装成一个控件，取名为 ExpandableLinearLayout，下面开始介绍它如何使用以及源码解析。

使用方式

一、使用默认展开和收起的底部

在布局文件中，使用 ExpandableLinearLayout，代码如下：

和 LinearLayout 的使用方法类似，如果是静态数据，可以在两个标签中间插入子条目布局的代码，也可以在 Java文件中使用代码动态插入。useDefaultBottom 是指是否使用默认底部（默认为 true，如果需要使用默认底部，可不写这个属性），如果是自定义的底部，则设置为 false，下面会介绍自定义底部的用法，defaultItemCount=”2” 设置默认显示的个数为 2，expandText 为待展开时的文字提示，hideText 为待收起时的文字提示。

在 java文件中，根据id找到控件，动态往 ExpandableLinearLayout 中插入子条目并设置数据即可，代码如下：

效果如下：

1. 支持修改默认显示的个数

可以修改默认显示的个数，比如将其修改为 3，即 defaultItemCount=”3”。效果如下：

2. 支持修改待展开和待收起状态下的文字提示

可以修改待展开状态和待收起状态下的文字提示，比如修改 expandText=”查看更多”，hideText=”收起更多”。效果如下：

3. 支持修改提示文字的大小、颜色

可以修改提示文字的大小和颜色，对应的属性分别是 tipTextSize，tipTextColor。比如修改 tipTextSize=”16sp”，tipTextColor=”#ff7300”。效果如下：

4. 支持更换箭头的图标

可以修改箭头的图标，只需配置 arrowDownImg 属性，引用对应的图标，这里的箭头图标需要是向下的箭头，这样当展开和收起时，箭头会做相应的旋转动画。设置 arrowDownImg=”@mipmap/arrow_down_grey”，修改为灰色的向下图标。效果如下：

二、使用自定义底部

布局文件中，ExpandableLinearLayout 配置 useDefaultBottom=”false”,声明不使用默认底部。自己定义底部的布局。

java文件中，代码如下：

主要的代码是为 ExpandableLinearLayout 设置状态改变的回调，rlBottom 为自定义底部的根布局 RelativeLayout,为其设置点击事件，当点击的时候调用 ExpandableLinearLayout 的 toggle()方法，当收到回调时，根据状态旋转箭头以及更改文字提示。效果如下：

到这里，ExpandableLinearLayout 的使用就介绍完毕了，接下来是对源码进行解析。

源码解析

ExpandableLinearLayout 的原理其实很简单，当使用默认的底部时，如果子条目的个数小于或者等于默认显示的个数，则不添加底部，如果子条目的个数大于默认显示的个数，则往最后插入一个默认的底部，一开始的时候，将 ExpandableLinearLayout 除了默认显示的条目和底部不隐藏以外，其他的子条目都进行隐藏，当点击“展开”的时候，将被隐藏的条目设置为显示状态，当点击“收起”的时候，将默认显示条目以下的那些条目都隐藏。

首先介绍下 ExpandableLinearLayout 自定义的属性：

ExpandableLinearLayout 继承于 LinearLayout：

添加子条目的方法 addItem(View view)：

当添加条目的时候，获取所有子条目的个数，如果是不使用默认底部的话，则只是将 View 添加到 ExpandableLinearLayout 中，当数目超过默认显示个数时，则调用 hide()方法，收起除了默认显示条目外的其他条目，即将它们设置为隐藏。

如果是使用默认底部，hasBottom 为是否已经有底部的标志，如果还没有底部则是直接往 ExpandableLinearLayout 中顺序添加，如果已经有底部，则是往底部前一个的位置添加 View。调用的相关方法代码如下：

默认底部的点击事件：

点击的时候调用 toggle() 会根据当前状态，进行展开或收起，如果当前是展开状态，即 isExpand 为 true，则调用 hide()方法收起，否则，当前是收起状态时，调用 expand( ) 进行展开。这里判断如果有设置状态改变的监听，如果有则调用接口的方法将状态传递出去，expand( )方法的代码如下：

到这里为止，ExpandableLinearLayout 的源码解析就结束了，希望这个控件可以帮助到大家。

导入方式

在项目根目录下的 build.gradle 中的 allprojects{} 中，添加 jitpack 仓库地址，如下：

打开 app 的 module 中的 build.gradle，在 dependencies{} 中，添加依赖，如下：

源码github地址：

https://github.com/chaychan/ExpandableLinearLayout

同时也收录在 PowfulViewLibrary 中，如果想要在 PowfulViewLibrary 也有这个控件，更新下 PowfulViewLibrary 的版本。以下版本为目前最新：

compile ‘com.github.chaychan:PowerfulViewLibrary:1.1.6’

PowerfulViewLibrary 源码地址:

https://github.com/chaychan/PowerfulViewLibrary

每天学习累了，看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号，每天都有好心情。

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：