CScrollView的滚动是藉助于其内部容器的位置变动来达到的,再加以遮盖/剪切便实现不可见的部分进行隐藏。

藉助于CCScrollView,我们可以实现分页效果,简单的富文本,下拉式按钮等。

创建一个CCScrollView式的滚动视图,首先要创建一个容器,此容器可以必须是Node或其子孙类。如下:

1
2
3
4
5
6
7
8
9
10
self.layerContainer=display.newColorLayer(ccc4(10,20,30,10))
self.layerContainer:setTouchEnabled( true )
self.layerContainer:setPosition(ccp(1,0))
self.layerContainer:setTouchSwallowEnabled( false )
self.layerContainer:addNodeEventListener(cc.NODE_TOUCH_EVENT,function(event)
return self:onCellCallback(event.name,event.x,event.y)
end)
self.widgetContainer=display.newSprite()
:align(display.LEFT_BottOM,0)
:addTo(self.layerContainer)


我们便创建了一个容器,此容器是一个带有颜色的Layer,并设置了位置以及触摸相关事件,还为其添加了一个孩子节点,并使触摸事件绑定到了onCellCallback方法,此方法并没有做过多的处理,只是简单的记录容器触摸事件的起始和结果,如下:

8
functionLLScrollView:onCellCallback(event,x,y)
if event== "began" then
self.bolTouchEnd= false
return true
elseifevent== "ended" then
true
end
end

这个方法可有可无,但为了实现下面的分页就必不可少了,通过self.bolTouchEnd的标记,在后面的代码中才能知道该何时处理,以及更好对CCScrollView进行滚动操作。下面我们来创建一个CCScrollView,并把刚才创建的Layer添加为其的容器:

10
self.scrollView=CCScrollView:create()
<spanstyle= "white-space:pre" > </span>self.scrollView:setContentSize(CCSizeMake(0,0))--設置內容大小
> </span>self.scrollView:setViewSize(CCSizeMake(self.scrollWidth,self.scrollHeight))--設置可見大小
> </span>self.scrollView:setPosition(ccp(100,100))--設置位置
> </span>self.scrollView:setContainer(self.layerContainer)--設置容器
> </span>self.scrollView:setDirection(kCCScrollViewDirectionVertical)--設置滾動方向
self.scrollView:setClippingToBounds( )--設置剪切
self.scrollView:setBounceable( )--設置彈性效果
self.scrollView:setDelegate( this )--註冊為自身
self:addChild(self.scrollView)

通过setContentSize制定CCScrollView的大小,当然这是可有可无的,其实并不是指定CCScrollView的大小,而是指定其容器的大小,一般我们都会在给容器添加数据的时候,再调整容器的大小;设置视图的可见范围就必不可少了,setViewSize方法为我们提供了设置视图大小,设置视图大小便指定了可见范围,setClippingToBounds方法设置剪切,如果不设置,可见范围的设置便成了虚设,通过setBounceable方法指定视图滚动过程中是否能够滚动,为了让CCScrollView显得不那么僵硬,一般会设置为true;同时我们要设置滚动的方向setDirection,有3个方向,水平、竖直、双向,setDelegate(this)指定注册为自身。通过以上代码我们便创建了一个完整的CCScrollView。

为了实现滚动,还要为其添加滚动监听事件,也就是写个方法把其绑定到CCScrollView的滚动事件上,例如:

1
self.scrollView:registerScriptHandler(scrollView2DidScroll,CCScrollView.kScrollViewScroll)

这一行代码就把方法scrollView2DidScroll绑定到了CCScrollView.kScrollViewScroll事件上,要做什么处理工作便在scrollView2DidScroll方法中添加,比如我们要实现分页,或滚动时实现一个item的滚动,如下:

10
11
12
13
14
15
16
17
18
19
20
localfunctionscrollView2DidScroll()
self.bolTouchEnd== localoffy=self.layerContainer:getPositionY()
localminy=self.scrollHeight-self.cellNums*self.cellHeight
offy<0andoffy>minythen
localitem=-(math. abs (offy)%self.cellHeight)
item<=-self.cellHeight/2then
offy<self.preOffythen
item=offy-item-self.cellHeight
else
item=offy-item-self.cellHeight
end
else
item=offy-item
end
self.scrollView:setContentOffset(ccp(1,item), )
end
end
顺便提一下,一些全局变量的定义在这里:
5
self.scrollTop=208
self.scrollHeight=208
self.scrollWidth=152
self.cellHeight=52
self.cellNums=2

至于什么意思,看到命名字段应该还是浅显易懂的,就不一一解释了,其中self.preOffy是记录上一次CCScrollView的偏移量。分页也很简单,首先假定我们的ScrollView的偏移量都是负值,确实也是负值。由于CCScrollView会自动纠正第一项和最后一项的位置,所以在第一项和最后一项时我们不做处理,让CCScrollView的内部方法去实现。如果CCScrollView的偏移量对一个item取余数,如果余数大于item的一半我们就分页,否则就归位。代码if offy < self.preOffy then是为了判定滚动方向是上还是下(我的这个CCScrollView的设置方向是竖直的),好了到此为止我们的完整的带分页的CCScrollView就实现了。

现在要对其添加数据,方便起见我又创建了一个类名称为LLScrollItem,实现一个item的类,并为其添加了一个ON_TOUCH_EVENT的事件,完整代码如下:

20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
localLLScrollItem= class ( "LLScrollItem" ,function()
display.newNode()
end)
LLScrollItem.ON_TOUCH_EVENT= "on_touch_event"
functionLLScrollItem:ctor(params)
cc(self):addComponent( "components.behavior.EventProtocol" ):exportMethods()
self.text=params.text
locallabel=ui.newTTFLabel({
text=params.text,
font= "Arial" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
size=20,
})
label:setTouchEnabled( )
label:addNodeEventListener(cc.NODE_TOUCH_EVENT,function(event)
self:onTouch(event)
end)
localrect={
{0,0},
{150,
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,52},
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,0}
}
localr,g,b,s=math.random(0,255),math.random(0,255)
locallayerColor=display.newColorLayer(ccc4(r,s)):addTo(self)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,0)
layerColor:setContentSize(CCSizeMake(150,52))
localpolygon=display.newpolygon(rect,1):addTo(layerColor)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,0)
polygon:setlinewidth(1)
polygon:setLineColor(ccc4f(255,255))
label:addTo(polygon)
label:align(display.CENTER,75,26)
label:setColor(ccc3(255-r,255-g,255-b))
end
functionLLScrollItem:onTouch(event)
self:dispatchEvent({name=LLScrollItem.ON_TOUCH_EVENT,text=self.text})
end
LLScrollItem

每一个item是一个有范围界定有色层,并用一个Box包裹,并添加了一个独一的文本,用来以后区别我们点击了哪个item。

利用上面的item类我们就可以为CCScrollView添加数据了:

10
for i=1,self.cellNums do
self.scrollTop=self.scrollTop-self.cellHeight
localcell=LLScrollItem. new ({text= "ScrollItem:" ..i}):addTo(self.widgetContainer)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,self.scrollTop)
cc.EventProxy. (cell,cell)
:addEventListener(cell.ON_TOUCH_EVENT,function(event)
self.label:setString(event.text)
end)
因为容器内容变化了,所以要改变其大小,以便能够完全承载所有数据;设置容器的位置是容器能够达到的最低点,容器的孩子self.widgetContainer,其实是一个真正的承载数据的节点,我们在这里要设置其能够达到的最高高度。

我们之所以要给容器添加一个子节点,并所有数据都添加到其子节点上,是为应对动态增删其数据内容的情况,并使CCScrollView的显示正常。

我们再创建两个控件,一个Label一个Button:

self.label=ui.newTTFLabel({
text= "Hello,World" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
color=ccc3(163,140,14),
align=ui.TEXT_ALIGN_CENTER
})
:pos(display.cx+100,display.cy+100)
:addTo(self)
self.button=cc.ui.UIPushButton. ({
disabled= "nil" normal= "res/GreenScale9Block.png" pressed= "res/PinkScale9Block.png" ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,
})
:align(display.CENTER,display.cx+100,display.cy-100)
:addTo(self)
:onButtonClicked(
function()
self:addItem()
end
)

这个Label就是上面所说的self.label,此Button是为了实现动态添加数据的功能,点击Button就为CCScrollView添加数据,我们把其相应事件绑定到了addItem方法,此方法实现为:

23
functionLLScrollView:addItem()
self.cellNums=self.cellNums+1
..self.cellNums}):addTo(self.widgetContainer)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,self.scrollTop)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,cell)
ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,function(event)
self.label:setString(event.text)
end)
localh=self.cellNums*self.cellHeight
h<self.scrollHeightthen
h=self.scrollHeight
end
self.layerContainer:setContentSize(CCSizeMake(self.scrollWidth,h))
self.widgetContainer:setPositionY(h-self.scrollHeight)
self.layerContainer:setPositionY(self.scrollHeight-h)
self.preOffy=self.layerContainer:getPositionY()
localh1=self.scrollHeight-h
h1<0thenh1=0end
self.layerContainer:setPositionY(h1)
同样的,在添加完数据之后,一定要调整容器及其子节点的位置及大小,否则显示出问题。到此位置我们已经实现了一个完整的能够实现分页、动态添加数据的CCScrollView,至于动态删除,仿照动态添加自然也就出来了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


如何使用CCRenderTexture创建动态纹理 Cocos2d-x 2 1 4
    本文实践自 RayWenderlich、Ali Hafizji 的文章《How To Create Dynamic Textures with CCRenderTexture in Cocos2D 2.X》,文中使用Cocos2D,我在这里使用Cocos2D-x 2.1.4进行学习和移植。在这篇文章,将会学习到如何创建实时纹理、如何用Gimp创建无缝拼接纹
Cocos-code-ide使用入门学习
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@163.com微信公众号:HopToad 欢迎转载,转载标注出处:http://blog.csdn.netotbaron/article/details/424343991.  软件准备 下载地址:http://cn.cocos2d-x.org/download 2.  简介2.1         引用C
Cocos2D-x-3.0 编译(Win7)
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从Cocos2D-x官网上下载,进入网页http://www.cocos2d-x.org/download,点击Cocos2d-x以下的Download  v3.0,保存到自定义的文件夹2:从python官网上下载。进入网页https://www.python.org/downloads/,我当前下载的是3.4.0(当前最新
quick-cocos2d-x实例之挑战记忆极限设计文档
1.  来源 QuickV3sample项目中的2048样例游戏,以及最近《最强大脑》娱乐节目。将2048改造成一款挑战玩家对数字记忆的小游戏。邮箱:appdevzw@163.com微信公众号:HopToadAPK下载地址:http://download.csdn.net/detailotbaron/8446223源码下载地址:http://download.csdn.net/
Cocos2d-x 3 X CMake MinGW版本编译运行
   Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试以QtCreatorIDE来进行CMake构建。Cocos2d-x3.X地址:https://github.com/cocos2d/cocos2d-x1.打开QtCreator,菜单栏→"打开文件或项目...",打开cocos2d-x目录下的CMakeLists.txt文件;2.弹出CMake向导,如下图所示:设置
vs 2013 编译cocos2d-x-3.9
 下载地址:链接:https://pan.baidu.com/s/1IkQsMU6NoERAAQLcCUMcXQ提取码:p1pb下载完成后,解压进入build目录使用vs2013打开工程设置平台工具集,打开设置界面设置: 点击开始编译等待编译结束编译成功在build文件下会出现一个新文件夹Debug.win32,里面就是编译
Cocos2d-x CCControlPotentiometer之圆形音量button及特效
1. 圆形音量button事实上作者的本意应该是叫做“电位计button”。可是我觉得它和我们的圆形音量button非常像,所以就这么叫它吧~先看效果:好了,不多解释,本篇到此为止。(旁白: 噗。就这样结束了?)啊才怪~我们来看看代码:[cpp] viewplaincopyprint?CCContro
Cocos2d-x入门教程二简单的静态显示对象
原文链接:http://www.cnblogs.com/physwf/archive/2013/04/26/3043912.html为了进一步深入学习贯彻Cocos2d,我们将自己写一个场景类,但我们不会走的太远,凡是都要循序渐进,哪怕只前进一点点,那也至少是前进了,总比贪多嚼不烂一头雾水的好。在上一节中我们建
  • • 如何使用CCRenderTexture创建动态纹理 …
  • • Cocos-code-ide使用入门学习
  • • Cocos2D-x-3.0 编译(Win7)
  • • Cocos2d-x 2 0 在Windows平台下的使用
  • • quick-cocos2d-x实例之挑战记忆极限设计…
  • • Cocos2d-x 3 X CMake MinGW版本编译运行
  • • vs 2013 编译cocos2d-x-3.9
  • • cocos2d-x游戏开发系列教程-超级玛丽01…
  • • Cocos2d-x CCControlPotentiometer之圆…
  • • Cocos2d-x入门教程二简单的静态显示对象
  • • cocos2d-x中CCScale9Sprite的另一种实现
  • • Cocos2d-x v2.2.2版本+Win7+VS2010环境…
  • • Ubuntu14.04+eclipse下cocos2d-x3.0正式…
  • • 分别基于WIN32 API界面编程和Cocos2d-x…
  • • Cocos2d-x 开发小记二:控件
  • • Cocos2d-x 开发小记一:基本动作
  • • 买Cocos2d-x视频课程送纸质图书
  • • ‎Cocos2d-x 学习笔记(11.10) Spawn

Cocos2d-x 3.0-ScrollView原理与使用的更多相关文章

  1. 用canvas做一个DVD待机动画的实现代码

    这篇文章主要介绍了用canvas做一个DVD待机动画的实现代码的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  3. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. Html5 滚动穿透的方法

    这篇文章主要介绍了Html5 滚动穿透的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. HTML5自定义mp3播放器源码

    这篇文章主要介绍了HTML5自定义mp3播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中CSS外观属性

    这篇文章主要介绍了HTML5中CSS外观属性的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,,需要的朋友可以参考下

  7. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果,就是CSS动画样式处理,动画声明需要使用@keyframes name,后面的name是人为定义的动画名称,下面我们来看看文章的具体实现内容吧,需要的小伙伴可以参考一下

  8. html5默认气泡修改的代码详解

    这篇文章主要介绍了html5默认气泡修改的代码详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. 基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能

    这篇文章主要介绍了基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能,需要的朋友可以参考下

  10. Html5移动端适配IphoneX等机型的方法

    这篇文章主要介绍了Html5移动端适配IphoneX等机型的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

随机推荐

  1. 【cocos2d-x 3.x 学习笔记】对象内存管理

    Cocos2d-x的内存管理cocos2d-x中使用的是上面的引用计数来管理内存,但是又增加了一些自己的特色。cocos2d-x中通过Ref类来实现引用计数,所有需要实现内存自动回收的类都应该继承自Ref类。下面是Ref类的定义:在cocos2d-x中创建对象通常有两种方式:这两中方式的差异可以参见我另一篇博文“对象创建方式讨论”。在cocos2d-x中提倡使用第二种方式,为了避免误用第一种方式,一般将构造函数设为protected或private。参考资料:[1]cocos2d-x高级开发教程2.3节[

  2. 利用cocos2dx 3.2开发消灭星星六如何在cocos2dx中显示中文

    由于编码的不同,在cocos2dx中的Label控件中如果放入中文字,往往会出现乱码。为了方便使用,我把这个从文档中获取中文字的方法放在一个头文件里面Chinese.h这里的tex_vec是cocos2dx提供的一个保存文档内容的一个容器。这里给出ChineseWords,xml的格式再看看ChineseWord的实现Chinese.cpp就这样,以后在需要用到中文字的地方,就先include这个头文件然后调用ChineseWord函数,获取一串中文字符串。

  3. 利用cocos2dx 3.2开发消灭星星七关于星星的算法

    在前面,我们已经在GameLayer中利用随机数初始化了一个StarMatrix,如果还不知道怎么创建星星矩阵请回去看看而且我们也讲了整个游戏的触摸事件的派发了。

  4. cocos2dx3.x 新手打包APK注意事项!

    这个在编译的时候就可以发现了比较好弄这只是我遇到的,其他的以后遇到再补充吧。。。以前被这两个问题坑了好久

  5. 利用cocos2dx 3.2开发消灭星星八游戏的结束判断与数据控制

    如果你看完之前的,那么你基本已经拥有一个消灭星星游戏的雏形。开始把剩下的两两互不相连的星星消去。那么如何判断是GameOver还是进入下一关呢。。其实游戏数据贯穿整个游戏,包括星星消除的时候要加到获得分数上,消去剩下两两不相连的星星的时候的加分政策等,因此如果前面没有做这一块的,最好回去搞一搞。

  6. 利用cocos2dx 3.2开发消灭星星九为游戏添加一些特效

    needClear是一个flag,当游戏判断不能再继续后,这个flag变为true,开始消除剩下的星星clearSumTime是一个累加器ONE_CLEAR_TIME就是每颗星星消除的时间2.连击加分信息一般消除一次星星都会有连击信息和加多少分的信息。其实这些combo标签就是一张图片,也是通过控制其属性或者runAction来实现。源码ComboEffect.hComboEffect.cpp4.消除星星粒子效果消除星星时,为了实现星星爆裂散落的效果,使用了cocos2d提供的粒子特效引擎对于粒子特效不了

  7. 02 Cocos2D-x引擎win7环境搭建及创建项目

    官网有搭建的文章,直接转载记录。环境搭建:本文介绍如何搭建Cocos2d-x3.2版本的开发环境。项目创建:一、通过命令创建项目前面搭建好环境后,怎样创建自己的Cocos2d-x项目呢?先来看看Cocos2d-x3.2的目录吧这就是Cocos2d-x3.2的目录。输入cocosnew项目名–p包名–lcpp–d路径回车就创建成功了例如:成功后,找到这个项目打开proj.win32目录下的Hello.slnF5成功了。

  8. 利用cocos2dx 3.2开发消灭星星十为游戏添加音效项目源码分享

    一个游戏,声音也是非常的重要,其实cocos2dx里面的简单音效引擎的使用是非常简单的。我这里只不过是用一个类对所有的音效进行管理罢了。Audio.hAudio.cpp好了,本系列教程到此结束,第一次写教程如有不对请见谅或指教,谢谢大家。最后附上整个项目的源代码点击打开链接

  9. 03 Helloworld

    程序都有一个入口点,在C++就是main函数了,打开main.cpp,代码如下:123456789101112131415161718#include"main.h"#include"AppDelegate.h"#include"cocos2d.h"USING_NS_CC;intAPIENTRY_tWinMain{UNREFERENCED_ParaMETER;UNREFERENCED_ParaMETER;//createtheapplicationinstanceAppDelegateapp;return

  10. MenuItemImage*图标菜单创建注意事项

    学习cocos2dx,看的是cocos2d-x3.x手游开发实例详解,这本书错误一大把,本着探索求知勇于发现错误改正错误的精神,我跟着书上的例子一起调试,当学习到场景切换这个小节的时候,出了个错误,卡了我好几个小时。

返回
顶部