Cocos2d-lua ScrollView优化2

温故

上回书说到, 对Cocos2d-lua的ScrollView进行了修改优化。
主要做了 —— 重用item。
仅仅是重用item, 是远远不够的；还要对它进行进一步的功能扩展。

概览

这次的扩展包括：

• 支持横向和竖向
• 支持多行多列
• item的适配
• item数量不够时的居中
• 刷新数据
• 跳转到指定item
• 飞入动画

多方向

之前的版本仅仅是纵向而已, 当然要支持横向的滑动了。
横向滑动其实与纵向不同。

纵向

由于ScrollView锚点在(0, 0), 要针对这个做一些处理。
否则, 显示的是如下的样子：

...
5
4
3
2
1

从下往上排列, 而且滑动是从下往上滑。
显然, 这并不符合常规操作。
正常应该是, 从上往下滑, 且:

1
2
3
4
5
...

所以, 需要对它的坐标进行小处理。
这里有两个坐标需要被处理：

• item（要求锚点为(0, 0))
  它正常坐标是从(0, 0)开始, 然后随着索引增加变为: (0, itemSize.height * index)
  修改后的坐标应该是从(0, innerSize.height - itemSize.height)开始, 随着索引增加变为:(0, innerSize.height - itemSize.height * index)
• inner
  正常开始的坐标为(0, 0), 显示的是最底部的信息, 随着滑动y坐标减少。
  修改后坐标为(0, scrollviewSize.height - innerSize.height), 显示最顶部的信息, 随着滑动y坐标增加。

横向

横向就没有那么多问题了, 很符合常规的动作。

1   2   3   4   5   ...

它的两个坐标就不需要处理:

- item(要求锚点为(0, 0))
    坐标从(0, 0)开始, 随着索引增加变为: (itemSize.width * index, 0)
- inner
    坐标从(0, 0)开始, 随着滑动x坐标增加

主要代码

local ScrollViewDirection = {
    DIR_VERTICAL = 1,
    DIR_HORIZONTAL = 2,
    DIR_BOTH = 3,
}

-- ScrollView 的大小
self.tContentSize
-- Item 的大小
self.tItemContentSize
-- item总数
self.iTotalItemNum 
-- 重用的item的集合
self.tItemView

if ScrollViewDirection.DIR_HORIZONTAL == self:getDirection() then
    self.tContentSize.width = self.tItemContentSize.width * self.iTotalItemNum
    self:getInnerContainer():setContentSize(self.tContentSize)
    self.fLastContentPos = self:getContentSize().width - self.tContentSize.width

    local count = math.min(self.iTotalItemNum, math.ceil(self:getContentSize().width / self.tItemContentSize.width) + 1)
    for i = 1, count do
        local view = CSBReaderLoad(name)
        view:init(...)
        if view.setIndex then
            view:setIndex(i)
        end

        -- 将父节点转为widget类型（原因可见 上一篇文章）
        local widget = quick.packageNodeToWidget(view.pLayer:getChildByName("LayerTouch"))
        view.pLayer = widget
        -- widget随父节点透明度变化，默认是false
        widget:setCascadeOpacityEnabled(true)
        self:addChild(view.pLayer)

        view.pLayer:setVisible(i > 0 and i <= self.iTotalItemNum)
        view.pLayer:setPosition(self.tItemContentSize.width * (i - 1), 0)
        table.insert(self.tItemView, view)
    end

    self:jumpToLeft()
    self:getInnerContainer():setPositionX(self.fLastContentPos)
    self:setTouchEnabled(self.tContentSize.width > self:getContentSize()