CCScrollView的滚动是藉助于其内部容器的位置变动来达到的,再加以遮盖/剪切便实现不可见的部分进行隐藏。
藉助于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()
: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()
end)
LLScrollItem.ON_TOUCH_EVENT=
"on_touch_event"
functionLLScrollItem:ctor(params)
cc(self):addComponent(
"components.behavior.EventProtocol"
):exportMethods()
locallabel=ui.newTTFLabel({
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:setLineColor(ccc4f(255,255))
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,至于动态删除,仿照动态添加自然也就出来了。
相关文章
本文实践自 RayWenderlich、Ali Hafizji 的文章《...
Cocos-code-ide使用入门学习地点:杭州滨江邮箱:appdevzw@1...
第一次開始用手游引擎挺激动!!!进入正题。下载资源1:从C...
Cocos2d-x是一款强大的基于OpenGLES的跨平台游戏开发...
1. 来源 QuickV3sample项目中的2048样例游戏,以及最近《...
Cocos2d-x3.x已经支持使用CMake来进行构建了,这里尝试...
| | |