实现聊天窗口动态可视区加载的listview

定义

可视区域加载，顾名思义，即listview只加载数据源中的可视部分，而不可视部分则不需要加载。其实质也是懒加载技术（简称lazyload）的一种，已经不是什么新鲜的技术了，js程序员对网页性能优化经常会采用这种方案，大型网站中都有lazyload的身影，如谷歌的图片搜索页，淘宝网等。lazyload的核心是按需加载。

使用场合

在游戏中，还有哪些地方需要用到这种可视区域的listview呢？没错，聊天窗口。现在手游的聊天内容展示越来越丰富，再不是一两年前的手游纯文字聊天能比拟的。玩家头像、富文本、超链接、动态表情，在加上数量庞大的聊天记录，不做任何优化的话，仅打开一个聊天窗口一段时间，也会消耗不少的cpu和内存。如果项目有这种聊天需求，也是时候考虑优化方案了。

方案设计

在设计优化方案之前，参考了下梦幻手游的世界聊天，看看这个同样用cocos2dx-lua的scrollview控件，添加了怎样的特性。偶然发现，把加载了一定数量的消息滚动到中央，手指在聊天框中间做上下幅度4cm的拖动，无论是向上还是向下滚动，都会发生一瞬间的卡顿。到这里其实已经印证了我猜想中的方案了，下面来说一下这个方案。
在我的方案中，数据源（青色背景），加载区域（蓝色），可视区域（灰色）可以用下面的图来描述（有点丑，将就下）

Paste_Image.png

有点像滑动的窗口故取名SlideWindow。
当屏幕可视区域滚动到已加载区域的边缘时候，加载区域往滚动方向加载更多数据，并且加载区域为保持一定数量的item，删除掉对应反方向的数据。这种可视区域维持一定数量的item，应该就是导致梦幻聊天在某个临界区上下滚动一瞬间卡顿的原因了。使用这种方案，无论梦幻的聊天累积了多少条聊天记录，每次都只是加载一定数量的item，在拖动时按需加载，调和了数量大和首次打开界面流畅的矛盾。梦幻的聊天还有一个非常人性的设计，当可视区域在顶部的时候，设置为锁定状态（新消息置顶），而当可视区在中间时候，为非锁定状态（新消息显示数目提示，而不会让玩家浏览历史记录时候受到新消息置顶的困扰）。

实现

这里我用的cocos2dx-lua实现了一个原型，暂时还没有加入到项目中，实现思想跟之前实现的lazylistview差不多。

这是封装的成员属性，维护已加载区域的头指针和尾指针。

function SlideWindow:ctor(list_view)
    self.list_view_ = list_view

    self.max_size_ = 40     -- 列表项的最大个数
    self.load_step_ = 20    -- 每次滑动加载的步长
    self.head_ = 1          -- 当前头的index
    self.tail_ = 0          -- 当前尾的index

    self.on_item_callback_ = nil
end

当检测到需要加载数据时，调用need_load

-- 触发加载，-1为向上加载，1为向下加载
-- @return 返回本次加载的个数
function SlideWindow:need_load(direction)
    local ret = 0
    local start = self.tail_ + 1
    if direction < 0 then
        start = self.head_ - 1
    end

    -- 向上没有数据，返回
    if start <= 0 then
        return 0
    end

    -- 尝试加载load_step个列表
    local item_tpl = 1
    while item_tpl and ret < self.load_step_ do
        item_tpl = self.on_item_callback_(start + ret*direction)
        if item_tpl then
            if direction < 0 then
                if self.head_ == 1 then
                    break
                end
                self.head_ = self.head_ - 1
                self.list_view_:insertCustomItem(item_tpl,0)
            else
                self.tail_ = self.tail_ + 1
                self.list_view_:pushBackCustomItem(item_tpl)
            end
            ret = ret + 1
        end
    end

    if ret == 0 then
        return ret
    end

    -- 判断是否达到最大数量
    if self.tail_ - self.head_ + 1 > self.max_size_ then
        for i=1,self.tail_ - self.head_ - self.max_size_ do
            if direction < 0 then
                self.tail_ = self.tail_ - 1
                self.list_view_:removeLastItem()
            else
                self.head_ = self.head_ + 1
                self.list_view_:removeItem(0)
            end
        end
    end

    return ret
end

监听函数，控制触发在加载的时机

-- 监听SlideWindow滚动，动态加载列表项
function SlideWindow:_init_listener()
    local extend = false
    local last_pos = 0
    local distance = 60
    local inner = self.list_view_:getInnerContainer()
    local outer_size = self.list_view_:getContentSize()
    function scroll_callback(sender, eventType)
        if eventType == SCROLLVIEW_EVENT_SCROLLING then
            --print("正在滚动")
            local inner_size = self.list_view_:getInnerContainerSize()
            local pos = inner:getPositionY()

            if not extend then
                if pos > -distance and last_pos - pos < 0 then       -- 接近底部
                    extend = true
                    self:need_load(1)
                elseif inner_size.height - (outer_size.height-pos) < distance and last_pos - pos > 0 then    -- 接近顶部
                    extend = true
                    self:need_load(-1)
                end
                extend = false
            end
            last_pos = pos
        end
    end
    self.list_view_:addEventListenerScrollView(scroll_callback)
end

到这里已经基本写完了，大概一百多行代码，还有更多流畅性的问题就要留待使用中逐步优化了。