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, 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