藉助于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方法,此方法并没有做过多的处理,只是简单的记录容器触摸事件的起始和结果,如下:
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添加为其的容器:
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的滚动事件上,例如:
self.scrollView:registerScriptHandler(scrollView2DidScroll,CCScrollView.kScrollViewScroll) |
这一行代码就把方法scrollView2DidScroll绑定到了CCScrollView.kScrollViewScroll事件上,要做什么处理工作便在scrollView2DidScroll方法中添加,比如我们要实现分页,或滚动时实现一个item的滚动,如下:
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
顺便提一下,一些全局变量的定义在这里:
|