详解quick-cocos2d-x pageview的demo

详解quick-cocos2d-x pageview的demo,第1张

概述quick-cocos2d-x的pageview示例来分析它的行为,让大家深入理解其原理并能灵活运用。 由于现在quick-cocos2d-x的文档不全,且cocoside提供的API智能提示也有限,因此只能从demo中获取更多信息。 创建一个pageview cc.ui.UIPageView.new { rect_table{left, top, width, heigh},

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,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),250) )    content:setCotentSize(240,140)                              -- 这里就是前面我们算出来的Item的宽高    content:settouchEnabled(false)    item:addChild(content)                                       -- 把colorLayer加入到item中    self.pv:addItem(item)                                        -- 把Item加入到pagevIEw中)endself.pv:reload()                                                 -- 刷新pagevIEw


以上便是pagevIEw控件的使用方法!

总结

以上是内存溢出为你收集整理的详解quick-cocos2d-x pageview的demo全部内容,希望文章能够帮你解决详解quick-cocos2d-x pageview的demo所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1013060.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-22
下一篇2022-05-22

发表评论

登录后才能评论

评论列表(0条)

    保存