小松的技术博客

六和敬

若今生迷局深陷,射影含沙。便许你来世袖手天下,一幕繁华。 你可愿转身落座,掌间朱砂,共我温酒煮茶。

RecyclerView 折叠/展开功能的实现

最近这一两个周都没有怎么更新 QMUI。因为我一直在搞忙于搞微信读书的讲书界面。沉醉于写 bug 和改 bug 之中。

微信读书的讲书界面与功能都比较复杂,这次我把其中的折叠、展开、loading 的功能单独拿出来,写了一个 Demo,分享给大家。

先说说这个 Demo 所具有的功能:

  1. section 展开/折叠,带动画效果
  2. 如果展开,往上滚动,当前 section 的 header 会附着在顶部
  3. 每个 section 都有上 loading 和 下 loading

数据结构

首先我们需要定义数据结构,这块比较简单,先上一个基础版的数据结构:

data class Section<H: Cloneable<H>, T: Cloneable<T>>(  
        val header: H, 
        val list: MutableList<T>,
        var hasBefore: Boolean,
        var hasAfter: Boolean,
        var isFold: Boolean,
        var isLocked: Boolean): Cloneable<Section<H, T>>{

    var isLoadBeforeError: Boolean = false
    var isLoadAfterError: Boolean = false

    fun count() = list.size

    override fun clone(): Section<H, T> {
        val newList = ArrayList<T>()
        list.forEach{ it: T ->
            newList.add(it.clone())
        }
        val section =  Section(header.clone(), newList, hasBefore, hasAfter, isFold, isLocked)
        section.isLoadBeforeError = isLoadBeforeError
        section.isLoadAfterError = isLoadAfterError
        return section
    }
}

基本不需要太多的解释,每一个 section 由 一个 header 和 一个 list 组成,isFold 指示折叠状态,hasBefore、hasAfter 指示是否需要上加载、下加载。 另外还有一个 isLocked, 这个我们后续再说,是一个很重要的状态。

目前数据结构很简单,但当我们把一个 List<Section> 的数据结构传递给 Adapter 时, 问题就出现了: 我们目前的数据是一个二维的数据结构,但 Adapter 喜欢的是一维数据结构。我们需要方便的实现下列两个 find:

  1. 已知 adpater 的 position, 能方便的 find 出 section 的信息 以及 section 下 item 对应的信息
  2. 已知 setcion 的某个 item 的信息,能方便的 find 出其在 adapter 中的 position

我直接给出我的解决方案。使用两个 SparseArray 来做索引:

  • 一个 SparseArray(sectionIndex) 是 adapterPosition: position in List<Section> 的 kv 存储;
  • 另一个 SparseArray(itemIndex) 是adapterPosition: position in section.list 的 kv 存储

当我们想从 adapterPosition 找到 section 中某个 item 的值时,我们需要两步:

  1. 从 sectionIndex 中 找到 section 所在的位置, 从而获取 section
  2. 从 itemIndex 中 找到 item 在 section.list 的位置, 根据第一步获取的 section, 从而拿到 item 信息

如果已知 section 中某个 item, 去获取 adapterPosition 时,就通过遍历,这个是省不掉的。

那如果是 header/loadMore 这些数据,如何确定其与 adapterPosition 的对应关系呢? 很简单,在 itemIndex 中引入负数,在 demo 中, 如果读取到 itemIndex 的 value 为 -1, 则表示 header, 如果为 -2 则表示 上 loading,如果为 -3,则为下 loading。 在微信读书中,还有 headerView 等更多类型,可以通过负数方便的扩展。

接下来看看 index 生成的工具方法:

fun <H, T> generateIndex(list: List<Section<H, T>>,  
                         sectionIndex: SparseArray<Int>,
                         itemIndex: SparseArray<Int>){
    sectionIndex.clear()
    itemIndex.clear()
    var i = 0
    list.forEachIndexed { index, it ->
        if (!it.isLocked) {
            sectionIndex.append(i, index)
            itemIndex.append(i, ITEM_INDEX_SECTION_HEADER)
            i++
            if (!it.isFold && it.count() > 0) {
                if (it.hasBefore) {
                    sectionIndex.append(i, index)
                    itemIndex.append(i, ITEM_INDEX_LOAD_BEFORE)
                    i++
                }

                for (j in 0 until it.count()) {
                    sectionIndex.append(i, index)
                    itemIndex.append(i, j)
                    i++
                }

                if (it.hasAfter) {
                    sectionIndex.append(i, index)
                    itemIndex.append(i, ITEM_INDEX_LOAD_AFTER)
                    i++
                }
            }
        }
    }
}

每次数据更新时,我都去更新两份 index,接下来 adapter 就只需要根据 两份 index 去实现各个方法了:

// getItemCount
override fun getItemCount(): Int = mItemIndex.size()

// getItemViewType
override fun getItemViewType(position: Int): Int {  
    val itemIndex = mItemIndex[position]
    return when (itemIndex) {
        DiffCallback.ITEM_INDEX_SECTION_HEADER -> ITEM_TYPE_SECTION_HEADER
        DiffCallback.ITEM_INDEX_LOAD_AFTER -> ITEM_TYPE_SECTION_LOADING
        DiffCallback.ITEM_INDEX_LOAD_BEFORE -> ITEM_TYPE_SECTION_LOADING
        else -> ITEM_TYPE_SECTION_ITEM
    }
}

// onCreateViewHolder
override fun onCreateViewHolder(parent: ViewGroup?, viewType: Int): FoldViewHolder {  
    val view = when (viewType) {
        ITEM_TYPE_SECTION_HEADER -> SectionHeaderView(context)
        ITEM_TYPE_SECTION_LOADING -> SectionLoadingView(context)
        else -> SectionItemView(context)
    }
    val viewHolder = FoldViewHolder(view)
    view.setOnClickListener {
        val position = viewHolder.adapterPosition
        if (position != RecyclerView.NO_POSITION) {
            onItemClick(viewHolder, position)
        }
    }
    return viewHolder
}

// onBindViewHolder
override fun onBindViewHolder(holder: FoldViewHolder, position: Int) {  
    val sectionIndex = mSectionIndex[position]
    val itemIndex = mItemIndex[position]
    val section = mData[sectionIndex]
    when (itemIndex) {
        DiffCallback.ITEM_INDEX_SECTION_HEADER -> (holder.itemView as SectionHeaderView).render(section)
        DiffCallback.ITEM_INDEX_LOAD_BEFORE -> (holder.itemView as SectionLoadingView).render(true, section.isLoadBeforeError)
        DiffCallback.ITEM_INDEX_LOAD_AFTER -> (holder.itemView as SectionLoadingView).render(false, section.isLoadAfterError)
        else -> {
            val view = holder.itemView as SectionItemView
            val item = section.list[itemIndex]
            view.render(item)
        }
    }
}

数据展开与折叠

我们的二维数据与 Adapter 之间的连接已经建立了,那么数据更改时,我们如何通知 Adapter 呢?如果直接 notifyDataSetChanged, 则丢失了 RecyclerView 的动画, 如果用 notifyItemXXX,则维护起来又很困难。还好,Android 官方为我们提供了 DiffUtil,配合两个 index,写起代码来非常舒心:

class DiffCallback<H: Cloneable<H>, T: Cloneable<T>>(private val oldList: List<Section<H, T>>, private val newList: List<Section<H, T>>) : DiffUtil.Callback() {

    private val mOldSectionIndex: SparseArray<Int> = SparseArray()
    private val mOldItemIndex: SparseArray<Int> = SparseArray()

    private val mNewSectionIndex: SparseArray<Int> = SparseArray()
    private val mNewItemIndex: SparseArray<Int> = SparseArray()

    init {
        generateIndex(oldList, mOldSectionIndex, mOldItemIndex)
        generateIndex(newList, mNewSectionIndex, mNewItemIndex)

    }

    override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {

        val oldSectionIndex = mOldSectionIndex[oldItemPosition]
        val oldItemIndex = mOldItemIndex[oldItemPosition]
        val oldModel = oldList[oldSectionIndex]

        val newSectionIndex = mNewSectionIndex[newItemPosition]
        val newItemIndex = mNewItemIndex[newItemPosition]
        val newModel = newList[newSectionIndex]

        if (oldModel.header != newModel.header) {
            return false
        }

        if (oldItemIndex < 0 && oldItemIndex == newItemIndex) {
            return true
        }

        if (oldItemIndex < 0 || newItemIndex < 0) {
            return false
        }
        return oldModel.list[oldItemIndex] == newModel.list[newItemIndex]
    }

    override fun getOldListSize() = mOldSectionIndex.size()

    override fun getNewListSize() = mNewSectionIndex.size()

    override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {

        val oldSectionIndex = mOldSectionIndex[oldItemPosition]
        val oldItemIndex = mOldItemIndex[oldItemPosition]
        val oldModel = oldList[oldSectionIndex]

        val newSectionIndex = mNewSectionIndex[newItemPosition]
        val newModel = newList[newSectionIndex]

        if (oldItemIndex == ITEM_INDEX_SECTION_HEADER) {
            return oldModel.isFold == newModel.isFold
        }

        if (oldItemIndex == ITEM_INDEX_LOAD_BEFORE || oldItemIndex == ITEM_INDEX_LOAD_AFTER) {
            // load more 强制返回 false,这样可以通过 FolderAdapter.onViewAttachedToWindow 触发 load more
            return false
        }

        return true
    }
}

这里也可以看到那两份 index 在数据对比时发挥的作用,逻辑应该非常清晰。因此在数据变更或者折叠展开时,我都通过 DiffUtil 来对比更改:

// 数据更新
fun setData(list: MutableList<Section<Header, Item>>) {  
    mData.clear()
    mData.addAll(list)
    diff(true)
}

// 折叠 与 展开
private fun toggleFold(pos: Int) {  
    val section = mData[mSectionIndex[pos]]
    section.isFold = !section.isFold
    lock(section)
    diff(false)

    if (!section.isFold) {
        for (i in 0 until mSectionIndex.size()) {
            val index = mSectionIndex[i]
            val inner = mItemIndex[i]
            if (inner == DiffCallback.ITEM_INDEX_SECTION_HEADER) {
                if (section.header == mData[index].header) {
                    actionListener?.scrollToPosition(i, false, true)
                    break
                }
            }
        }
    }
}

接下来看一下 diff 方法, 由于要做数据对比, 我们需要维护一份新数据以及一份旧数据,但如果是折叠/展开时, 数据涉及的只是状态的改变,因此 diff 会根据参数判断是更改旧数据的状态,还是将新数据集全盘 copy 给旧数据集:

private fun diff(reValue: Boolean) {  
    val diffResult = DiffUtil.calculateDiff(DiffCallback(mLastData, mData), false)
    DiffCallback.generateIndex(mData, mSectionIndex, mItemIndex)
    diffResult.dispatchUpdatesTo(this)

    if (reValue) {
        mLastData.clear()
        mData.forEach { mLastData.add(it.clone()) }
    } else {
        // clone status 避免大量创建对象
        mData.forEachIndexed { index, it ->
            it.cloneStatusTo(mLastData[index])
        }
    }
}

上下自动加载更多

对比以前简单 list 滚动到末尾时自动加载更多,这里就是每个 section 都需要加载更多了,而且是上下都需要。

首先,如果触发下loadMore时,如果下边还有 section,那么使用者就可以继续往下滚动,当数据回来时,可能会扰乱使用者的当前阅读。因此我们引入锁的概念,如果当前 section 需要上 loading, 那么前面的 section 会被锁住,不会被展示在界面上,如果当前 section 需要下 loading,那么后面的 section 会被锁住,不会被展示在界面上,这样只有当当前 section 加载完才能滑动进入下一个 section。这是我们的数据结构引入 isLocked 这个字段的原因了。

自动加载更多在什么时机触发何时呢?答案是 onViewAttachedToWindow 这个时机。 onViewAttachedToWindow 和 onViewDetachedFromWindow 分别在 view 可见和不可见时触发,其还可以做更多有趣的事情,以后有时间可以聊聊。

override fun onViewAttachedToWindow(holder: FoldViewHolder) {  
    if (holder.itemView is SectionLoadingView) {
        val layout = holder.itemView
        if (!layout.isLoadError()) {
            val section = mData[mSectionIndex.get(holder.adapterPosition)]
            actionListener?.loadMore(section, layout.isLoadBefore())
        }
    }
}

代码很简单,然后等待DB数据或者网络数据回来:

fun successLoadMore(loadSection: Section<Header, Item>, data: List<Item>, loadBefore: Boolean, hasMore: Boolean){  
    if(loadBefore){
        for(i in 0 until mSectionIndex.size()){
            if(mItemIndex[i] == 0){
                if(mData[mSectionIndex[i]] == loadSection){
                    val focusVH = actionListener?.findViewHolderForAdapterPosition(i)
                    if (focusVH != null) {
                        actionListener?.requestChildFocus(focusVH.itemView)
                        break
                    }
                }
            }
        }
        loadSection.list.addAll(0, data)
        loadSection.hasBefore = hasMore
    }else{
        loadSection.list.addAll(data)
        loadSection.hasAfter = hasMore
    }
    lock(loadSection)

    diff(true)
}

如果数据回来,则更新数据后执行 lock 和 diff,唯一需要多 loadBefore 做更多处理:当 recyclerView 执行 insert 时,默认都会保持 insert 前的 item 不动,insert 之后的 item 向下移动。 但是 loadBefore 时,我们期望的是 insert 之后的 item 保持不动, insert 之前的 item 向上移动。

实现方法也很简单,我们在 insert 前 focus 住你想保持不动的 item:

val focusVH = actionListener?.findViewHolderForAdapterPosition(i)  
if (focusVH != null) {  
    actionListener?.requestChildFocus(focusVH.itemView)
}

section header 吸附在顶部

剩下一个难点就是实现 section header 吸附在顶部的效果的实现了。可以想到的实现方案有一下几个:

  1. 写一个 layoutManager
  2. 监听 RecyclerView 的 onScroll
  3. 使用 RecyclerView 的 ItemDecoration

第一种方式也许可行并且最优雅,不过难度有点大,暂不考虑。第二种方案,监听 onScroll 事件,大多数情况下是可行的,不过其有两个问题:

  1. onScroll 是在 onLayout 过程中触发的,所以一些诸如 requestLayout 等方法会失效
  2. 当调用 scrollToPosition 时, onScroll 会调用,但是其给的信息是 scrollToPosition 前的信息,对于我的计算并不准确

之前一个版本是监听 onScroll,这个版本我换成了 ItemDecoration 的实现,不会有之前的那两个问题,但可能会浪费更多的性能,因为是在 onDraw 时触发的,所以调用次数会比监听 onScroll 多很多,好处就是精确。

还有另一个问题, 我们是构造一个真的 view 添加到视图层级中去? 还是 draw 在 recyclerView 上? 如果采用第二种方案,则需要自己去处理 被 draw 上去的 部分的事件拦截与分发,如果 headerView 比较简单,还不会有什么问题,如果 headerView 也的事件很复杂,那么就会增加很多工作了。因此我选择添加一个 view 到视图层级中。

这部分的核心代码在 PinnedSectionItemDecoration 中,言语也不好表述,有兴趣的还是去看代码。(这部分功能由 chanthuang 创造, 我只是个搬运工)。

Demo 中还有滚动到特定 section 或者 滚动到特定 item 的实现,都是利用两个 index 去做的,这里不做过多阐述,有兴趣的还是去看代码把。

←支付宝← →微信→