小注:本文使用的quick版本较低,所以很多控件需要自己写。在最新的quick版本里面已经集成了UIScrollView
这里实现的是一个简陋的scrollview,只支持单个的滑动。源码是根据网上一篇博客修改的,时间久远已经忘记出处,原作者可以私信我,我会加上原出处。谢谢
-- 说明:
-- 主体为scrollview,但是不实现任何代理,
-- 通过触摸层self.layerContainer来检测滑动
-- 然后手动调整scrollView2DidScroll事件
local UIScrollView = class("UIScrollView", function()
return display.newLayer()
end)
function UIScrollView:ctor(param)
-- self.fileName = param.fileName
self.fileName = {"ui032_8_8.png", "ui032_8_9.png", "ui032_8_10.png", "ui001_2_01.png"}
self:setConstance()
self:createScrollView()
self:addItems()
self:addCircles()
end
-- 设置缩放系数
function UIScrollView:getScale(content)
-- 先判断是否有大得
if content.width > display.width or content.height > self.scrollHeight then
if content.width > display.width and content.height > self.scrollHeight then
-- 两边都大
local scaleW = display.width/content.width
local scaleH = self.scrollHeight/content.height
if scaleW < scaleH then
return scaleW
else
return scaleH
end
elseif content.width > display.width then
-- 只有宽大
return display.width/content.width
else
return self.scrollHeight/content.height
end
else
-- 两边都小
local scaleW = display.width/content.width
local scaleH = display.height/self.scrollHeight
if scaleW < scaleH then
return scaleW
else
return scaleH
end
end
end
-- 设置常量
function UIScrollView:setConstance()
local AdHeight = 400
if display.height < 800 then
AdHeight = display.height/2
end
self.scrollHeight = AdHeight - 16
self.scrollWidth = display.width
self.cellNum = #self.fileName
self.prevX = 0
self.endX = 0
-- 不让其自动滑动
self.bolTouchEnd = true
end
-- 创建容器
function UIScrollView:createContainer()
self.layerContainer = display.newColorLayer(ccc4(255, 255, 0, 0))
self.layerContainer:setTouchEnabled(true)
self.layerContainer:setPosition(ccp(0, 0))
self.layerContainer:setTouchEnabled(true)
self.layerContainer:addTouchEventListener(function(event, x, y)
return self:onCellCallback(event, x, y)
end)
self.widgetContainer = display.newColorLayer(ccc4(0, 255, 255, 0))
:align(display.LEFT_BOTTOM, 0, 0)
:addTo(self.layerContainer)
self.widgetContainer:setContentSize(CCSizeMake(self.scrollWidth, self.scrollHeight))
local w = self.cellNum*self.scrollWidth
self.layerContainer:setContentSize(CCSizeMake(w, self.scrollHeight))
local preOffx = w
local w1 = self.scrollWidth-w
if w1 < 0 then
w1 = 0
end
self.layerContainer:setPositionX(w1)
end
-- 传感器
function UIScrollView:onCellCallback(event, x, y)
if event == "began" then
self.prevX = x
self.bolTouchEnd = false
return true
elseif event == "ended" then
self.endX = x
self.bolTouchEnd = true
end
end
-- 添加栏目
function UIScrollView:addItems()
for i=1, self.cellNum do
local scrollRight = self.scrollWidth*(i-1)
local textureName = self.fileName[i]
local cell = display.newSprite(textureName):addTo(self.widgetContainer)
:align(display.CENTER, scrollRight+self.scrollWidth/2, self.scrollHeight/2)
local size = cell:getContentSize()
local scaleSize = self:getScale(size)
cell:setScale(scaleSize)
end
end
-- 设置滑动
function UIScrollView:createScrollView()
-- 设置容器相关内容
self:createContainer()
-- 设置scrollView的相关操作
self.scrollView = CCScrollView:create()
self.scrollView:setContentSize(CCSizeMake(self.scrollWidth, self.scrollHeight)) -- 设置内容大小
self.scrollView:setViewSize(CCSizeMake(self.scrollWidth, self.scrollHeight)) -- 设置可见大小
self.scrollView:setPosition(ccp(0, 0)) -- 设置位置
self.scrollView:setContainer(self.layerContainer) -- 设置容器
self.scrollView:setDirection(kCCScrollViewDirectionHorizontal) -- 设置滑动方向
self.scrollView:setClippingToBounds(true) -- 设置裁剪
self.scrollView:setBounceable(false) -- 设置弹性效果
self.scrollView:setDelegate(this) -- 设置代理
self:addChild(self.scrollView)
-- 实现代理
self.scrollView:registerScriptHandler(handler(self, self.scrollView2DidScroll), CCScrollView.kScrollViewScroll)
end
-- 添加小圆圈
function UIScrollView:addCircles()
local distance = 20
local circlePosX = display.cx - (self.cellNum-1)/2*distance
-- 初始化其它的
for i=1, self.cellNum do
local circle = display.newSprite("res/ui024_6_1.png"):addTo(self)
:align(display.CENTER, circlePosX+(i-1)*distance, 60)
circle:setScale(0.5)
circle:setTag(100+i)
end
self:getChildByTag(101):setTexture(CCTextureCache:sharedTextureCache():addImage("ui024_6_2.png"))
end
-- 更新小圆圈
function UIScrollView:updateCircles(x)
for i=1,self.cellNum do
self:getChildByTag(100+i):setTexture(CCTextureCache:sharedTextureCache():addImage("ui024_6_1.png"))
end
local index = x/(-self.scrollWidth) + 1
self:getChildByTag(100+index):setTexture(CCTextureCache:sharedTextureCache():addImage("ui024_6_2.png"))
end
-- 代理函数
function UIScrollView:scrollView2DidScroll()
if self.bolTouchEnd == true then
self.bolTouchEnd = false
local offx = self.layerContainer:getPositionX()
local minx = self.scrollWidth-self.cellNum*self.scrollWidth
if offx < 0 and offx > minx then
local item = -(math.abs(offx)%self.scrollWidth)
local standerWidth = 0
if self.endX > self.prevX then
-- 向右滑动
standerWidth = -self.scrollWidth*7.0/8
else
-- 向左滑动
standerWidth = -self.scrollWidth/8
end
if item <= standerWidth then
-- 设置滑动
item = offx-item-self.scrollWidth
else
-- 没有滑动
item = offx-item
end
self:updateCircles(item)
--scrollview滑动到指定的位置
self.scrollView:setContentOffset(ccp(item, 0), true)
end
end
end
return UIScrollView