温故
上回书说到, 对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()