如何实现 qq 联系人列表页的展开效果
关键字：android，recyclerview，qq 联系人列表
代码地址：https://github.com/gitzxon/qqcontactdemo
问题描述
一般来讲，实现 qq 联系人列表可以使用 ExpandableListView 来实现。看名字就知道，这是一个可以展开的 ListView，那么其实现自然也是继承自 ListView 了( public class ExpandableListView extends ListView）。那么我们为什么还要用 RecyclerView 来实现类似的效果，来“重复造轮子呢”？
RecyclerView 作为谷歌出品的增强版的 ListView ，其在处理需要添加动画支持的 item、需要频繁更新、需要局部刷新、需要深度定制等场景的下，会比使用 ListView 舒服许多。从个人经验出发，个人近期写的代码、最近看的 github 上的 demo 类型的代码，在需要展示一个列表页的时候，绝大多数采用了 RecyclerView。所以，从防患于未然的角度讲，用 RecyclerView 来实现以下 qq 联系人列表页的可扩展效果是绝对有必要的。
那么，我们该怎么做？
首先是对问题进行拆解。列表中，我们需要展示两种 item ：
- 分组
- 联系人
分组就是联系人属于哪个组，我们可以用 ContactGroup 来进行建模；联系人就是我们的 qq 好友，我们用 Contact进行建模。因为两个 model 都需要出现在列表中，为了方便说话，我们定义了一个 BaseContact 作为他们共同的父类。
open class BaseContact(val name: String)
class Contact(
name: String,
val summary: String
) : BaseContact(name)
class ContactGroup(
name: String,
var contacts: MutableList<Contact>
) : BaseContact(name)
定义好了 model，那么我们怎么组织这个数据呢？因为联系人是属于联系人组的，所以，我们可以很自然的让 ContactGroup持有一个var contacts: MutableList<Contact>。因此，我们在 RecyclerView 的 Adapter 类中就只需要管理一个 MutableList<ContactGroup>成员变量就可以了：
class ContactAdapter : RecyclerView.Adapter<BaseContactViewHolder>() {
...
val mContactGroups: MutableList<ContactGroup> = ArrayList()
...
}
如何记录一个ContactGroup是不是打开状态的呢？可以简单的利用一个集合，通过 ContactGroup 对象是否在集合中，来判断这个分组是打开的还是关闭的。比如：
class ContactAdapter : RecyclerView.Adapter<BaseContactViewHolder>() {
...
val mContactGroups: MutableList<ContactGroup> = ArrayList()
val mOpenedContactGroup: MutableSet<ContactGroup> = HashSet()
...
}
一些基本的数据结构整理清楚了，下面进入最核心的问题，怎么处理展开收起的效果呢？我们面临的问题是什么呢？
- 如何 override
getItemCount()- 我们的
ContactAdapter需要重写这个方法。一般的getItemCount() 都是直接返回mList.size()，但是我们持有的是mContactGroup，而这些ContactGroup中，有些是展开的，有些是未展开的，怎么计算呢？
- 我们的
- 如何 override
fun getItemViewType(position: Int)- 我们需要在列表中展示两个类型的 item：
Contact和ContactGroup。 - RecyclerView 利用
fun getItemViewType(position: Int)来通过返回的viewType不同来展示不同的类型的ViewHolder。
- 我们需要在列表中展示两个类型的 item：
- 如何处理
ContactGroup的点击事件。 - 如何通知 RecyclerView 进行局部刷新。
我们一个一个来解决。
如何 override getItemCount()
很简单。首先，ContactGroup对象是一直展示在列表中的，Contact 对象是根据 ContactGroup 对象的状态不同，有可能在列表中也有可能不在列表中。所以，我们只需要遍历一下 mContactGroups，发现如果当前 group 展开了，就把这个 group 对应的 contact 的数量计算进去，否则就不计算 contact 的数量。
override fun getItemCount(): Int {
var count = 0
mContactGroups.forEach {
count += 1
if (mOpenedContactGroup.contains(it)) {
count += it.contacts.size
}
}
return count
}
如何 override fun getItemViewType(position: Int)
这里，我们需要通过 position 来计算出对应的是ContactGroup还是 Contact。跟刚才的思路一样。为了方便调用，我们抽象出一个 fun getItem(position: Int): BaseContact 方法，输出一个 position，返回对应的 model 对象。
同样是对遍历 ContactGroup， 然后对ContactGroup是否打开进行分类讨论。
fun getItem(position: Int): BaseContact {
var remaining = position
var curGroupIndex = 0
while (remaining >= 0) {
val curGroup: ContactGroup = mContactGroups[curGroupIndex]
if (remaining == 0) {
return curGroup
}
remaining -= 1
if (mOpenedContactGroup.contains(curGroup)) {
if (remaining < curGroup.contacts.size) {
return curGroup.contacts[remaining]
} else {
remaining -= curGroup.contacts.size
curGroupIndex += 1
}
} else {
curGroupIndex += 1
}
}
throw IllegalStateException("can not find the BaseContact item")
}
如何处理ContactGroup的点击事件以及如何局部刷新
点击事件比较简单，可以对 ViewHolder 的 itemView 添加。在 listener 中，我们需要获取这个 viewHolder 对应的 position。幸好，强大的 RecyclerView 有现成的 api 给我们使用。进而， 我们就可以在 listener 中通知 ContactAdapter 进行刷新。需要注意的是，我们需要区分两种刷新的方法：notifyItemRangeRemoved 和 notifyItemRangeInserted。展开的时候调用 insert，收起的时候调用 remove。代码如下：
fun toggleContactGroup(contactGroup: ContactGroup, adapterPosition: Int) {
if (mOpenedContactGroup.contains(contactGroup)) {
mOpenedContactGroup.remove(contactGroup)
notifyItemRangeRemoved(adapterPosition + 1, contactGroup.contacts.size)
} else {
mOpenedContactGroup.add(contactGroup)
notifyItemRangeInserted(adapterPosition + 1, contactGroup.contacts.size)
}
}
至此，核心的逻辑已经叙述完毕。附上全部代码的 github，欢迎评论交流。也欢迎随手点个小星星 _ 。
