quick-cocos2d-x实现scrollview

小注：本文使用的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))
    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,y) 
    end)

    self.widgetContainer = display.newColorLayer(ccc4(0,0))   
    :align(display.LEFT_BOTTOM,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,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