quick-cocos2d-x的pageview示例来分析它的行为,让大家深入理解其原理并能灵活运用。
由于现在quick-cocos2d-x的文档不全,且cocoside提供的API智能提示也有限,因此只能从demo中获取更多信息。
创建一个pageview
cc.ui.UIPageView.new {
rect_table{left, top, width, heigh}, -- pageview的左上角点和宽高,确定整个pagview的位置
columns, rows, -- 整个pageview分成多少行、列
paddingtalbe{left, right, top, bottom}, -- pageview的Item被放置的区域
columnspace, -- Items的列间距
rowspace -- Items的行间距
}:OnTouch() -- Touch事件
:addTo()
下图来解释这个创建的函数
整个图是pageview
玫红色的区域是padding的区域
中间一大牌咖啡色的是Items的实际放置区域
绿色的条是column_space
蓝色的条是row_space
以quick-cocos2dx给出的例子数据我们来分析下,使用这个控件的时候得计算得十分精确
它的代码如下:
self.pv=cc.ui.UIPageView.new {
viewRect=cc.rect{80, 80, 780, 480},
column = 3, row = 3,
padding = {left = 20, right = 20, top = 20, bottom = 20},
column_space = 10, row_space = 10}
从这里可以知道,它的整个大小是780,480,每页可容纳9个Items
padding以后的实际宽度是740,440(右左各20,上下亦如此)
行间距是10*2 列间距10*2那么实际上就剩下了720,420.
9个Items在这个上面分每个的大小应该是240,140.(Items的大小是在padding以后的区域中)
接着他创建items是这样干的
for i=1, 18 do -- 添加18个子项
local item = self.pv:newItem()
local content = display.newColorLayer(
cc.c4b(math.rand(250),
cc.c4b(math.rand(250),
cc.c4b(math.rand(250),
250) )
content:setCotentSize(240, 140) -- 这里就是前面我们算出来的Item的宽高
content:setTouchEnabled(false)
item:addChild(content) -- 把ColorLayer加入到item中
self.pv:addItem(item) -- 把Item加入到pageview中
)
end
self.pv:reload() -- 刷新pageview
以上便是pageview控件的使用方法!