使用pageview实现滚动视图

要实现如下图所示的，拖动上面的图片，下面对应的小图片跟着滚动

pageviewDemo.jpg

代码如下：

--[[
    个人中心中的 换肤 界面
]]

local PersonalCenter_hf = class("PersonalCenter_hf", function (  )
    local scene = cc.Scene:create()
    return scene
end)
local winSize = cc.Director:getInstance():getWinSize()

local mCurObj = nil
local mPageCount = 7--页数
local spriteTable = {}--存储底部小精灵
--pageview滑动图片对应的index是从0开始的
local lastIndex = 2--上次滑动时对应底部的图片在表中的index，初值是0+2=2
local moveByPos = cc.p(0,0)--用于存储每次精灵需要已经的参数,初值设为0

local sX = 1--精灵长度放大系数
local sY = 1--精灵宽度放大系数

local sx = 1--精灵长度缩小系数
local sy = 1--精灵宽度缩小系数

function PersonalCenter_hf:create(  )
    local scene = PersonalCenter_hf.new()
    self = scene
    mCurObj = self
    local PersonalCenterRootLayer = require("0.views.PersonalCenterRootLayer")
    local function hfBackBtnCallback(  )
        print("点击了 换肤 界面的返回按钮")
        cc.Director:getInstance():popScene()
    end
    self.layer = PersonalCenterRootLayer:create("换肤",hfBackBtnCallback)
    self:addChild(self.layer, 999999)
    self.layer:resetBackSpriteOpacity(0)
    --找到layer的child，隐藏精灵
    local backSprite = self.layer:getChildByName("backSprite")
    local mcSp = backSprite:getChildByName("mcSp")
    mcSp:hide()
    backSprite:hide()

    local btnY = winSize.height*0.65
    --创建向左的button
    self.leftBtn = ccui.Button:create(G_GetPlazaRes("HallImages/Hall_hf_left.png"))
    self.leftBtn:addTo(self.layer)
    self.leftBtn:setAnchorPoint(0,0.5)
    local leftX = 50
    self.leftBtn:setPosition(leftX,btnY)
    self.leftBtn:addTouchEventListener(function ( sender,eventType )
        if eventType == ccui.TouchEventType.ended then
            print("点击了 向左按钮")
            print("左移，1lastIndex = " .. lastIndex)
            print("lastIndex-2-1 = " .. lastIndex-2-1)
            -- self.pageview:scrollToPage(lastIndex-2-1)
            self.pageview:scrollToItem(lastIndex-2-1)
            self:moveFunc(lastIndex-1)--测试？
            -- self.pageview:setCurrentPageIndex(lastIndex-2-1)
            print("左移，2lastIndex = " .. lastIndex)
            self.rightBtn:show()--显示向右的按钮
        end
    end)
    self.leftBtn:hide()
    --创建向右的button
    self.rightBtn = ccui.Button:create(G_GetPlazaRes("HallImages/Hall_hf_right.png"))
    self.rightBtn:addTo(self.layer)
    self.rightBtn:setAnchorPoint(1,0.5)
    local rightX = winSize.width - leftX
    self.rightBtn:setPosition(rightX, btnY)
    self.rightBtn:addTouchEventListener(function ( sender,eventType )
        if eventType == ccui.TouchEventType.ended then
            print("点击了 向右按钮")
            print("右移，1lastIndex = " .. lastIndex)
            print("lastIndex-2+1 = " .. lastIndex-2+1)

            local curIndex=self.pageview:getCurrentPageIndex();
        print(string.format("cur=%d ,dest=%d", curIndex,lastIndex-1));

            self.pageview:scrollToItem(lastIndex-2+1)
            self:moveFunc(lastIndex+1)--测试？
            -- self.pageview:scrollToPage(lastIndex-2+1)
            -- self.pageview:setCurrentPageIndex(lastIndex-2+1)
            print("右移，2lastIndex = " .. lastIndex)
            self.leftBtn:show()--显示向左的按钮
        end
    end)

    self:createBigPageview()--创建大的pageview
    self:createBottomSprites()--创建底部所有需要移动的精灵
    return scene
end

function PersonalCenter_hf:moveFunc( index )
    print("index = " .. index)
    if index <= 1 or index >= mPageCount+2 then
        return
    end
    if index == 2 then
        self.leftBtn:hide()
    elseif index == mPageCount+1 then
        self.rightBtn:hide()
    else
        self.leftBtn:show()
        self.rightBtn:show()
    end
    local n = math.abs(index-lastIndex)--翻页的数量

        --lastIndex = 2初值为2

        if index > lastIndex then--表示向右移动
            print("左滑")
            for i=1,table.getn(spriteTable),1 do
                local sp = spriteTable[i]
                local ac1 = cc.MoveBy:create(0.2,cc.p(-moveByPos.x * n,-moveByPos.y))
                if i == lastIndex then--对上一个精灵进行缩小操作
                    local ac2 = cc.ScaleBy:create(0.2, sx, sy, 0)--缩小
                    local ac3 = cc.Spawn:create(ac1,ac2)
                    sp:runAction(ac3)
                elseif i == index then--对当前精灵进行操作
                    local ac2 = cc.ScaleBy:create(0.2, sX, sY, 0)--放大
                    local ac3 = cc.Spawn:create(ac1,ac2)
                    sp:runAction(ac3)
                else
                    sp:runAction(ac1)
                end
            end
        elseif index < lastIndex then
            print("右滑")
            for i=1,table.getn(spriteTable),1 do
                local sp = spriteTable[i]
                local ac1 = cc.MoveBy:create(0.2,cc.p(moveByPos.x * n,moveByPos.y))
                if i == lastIndex then--对上一个精灵进行缩小操作
                    local ac2 = cc.ScaleBy:create(0.2, sx, sy, 0)--缩小
                    local ac3 = cc.Spawn:create(ac1,ac2)
                    sp:runAction(ac3)
                elseif i == index then--对当前精灵进行操作
                    local ac2 = cc.ScaleBy:create(0.2, sX, sY, 0)--放大
                    local ac3 = cc.Spawn:create(ac1,ac2)
                    sp:runAction(ac3)
                else
                    sp:runAction(ac1)
                end
            end
        else
            --没有移动
            print("没有移动")
        end
        lastIndex = index
end

local function bigPageviewCallback( sender,eventType )
print("+++++pageview scrolling")
    if eventType == 0 then
        print("bigPageviewCallback()")
        local curIndex = sender:getCurrentPageIndex()--从0开始的
        if  curIndex <= 0 then--到最左端了，隐藏左button
            mCurObj.leftBtn:hide()
        elseif curIndex >= mPageCount-1 then
            mCurObj.rightBtn:hide()
        else
            mCurObj.leftBtn:show()
            mCurObj.rightBtn:show()
        end
        print("curIndex = " .. curIndex)

        --移动后
        --pageview中当前图片对应的表spriteTable中的index是
        local index = curIndex + 2

        mCurObj:moveFunc(index)--移动

    end
end

--创建翻页界面
function PersonalCenter_hf:createBigPageview()
    --创建图片名称数据
    self.imgNameTable = {}--存储创建的图片name
    for i=1,mPageCount do
        local imgName = string.format("Hall_hf_img%d_%d.png", i+1,i+1)
        table.insert(self.imgNameTable,imgName)
    end

    local layer = cc.Layer:create()
    layer:setTouchEnabled(true)
    self:addChild(layer,1)
    self.pageview = ccui.PageView:create()
    self.pageview:addTo(layer)
    self.pageview:setContentSize(winSize)
    self.pageview:setAnchorPoint(0.5,0.5)
    self.pageview:setPosition(cc.p(display.cx,display.cy))
    self.pageview:setTouchEnabled(true)

    --看看有没有选中记录，如果没有则所有的锁都是开着的
    --number不等于"0"则表示有选中记录,如果有选中记录，则至少是"1"
    local numberStr = cc.UserDefault:getInstance():getStringForKey("SelectedImgIndex", "0")
    -- numberStr = "1"--测试用，需删除
    if numberStr == "0" then
        print("没有选中记录")
    else
        print(string.format("有选中记录，选中的是第%s张图片",numberStr))
    end
    self.number = tonumber(numberStr)

    self.pageviewSpTable = {}--存储pageview中的所有精灵

    for i=1,table.getn(self.imgNameTable),1 do
        --创建大图片
        local layout = ccui.Layout:create()
        layout:setContentSize(winSize)
        local imageName = self.imgNameTable[i]
        local imgName = "HallImages/" .. imageName
        print("imgName = " .. imgName)
        local sprite = cc.Sprite:create(G_GetPlazaRes(imgName))
        sprite:setAnchorPoint(0,0)
        sprite:setPosition(0, 0)
        sprite:setName("layoutSprite")
        sprite:setContentSize(layout:getContentSize())
        layout:addChild(sprite)

        table.insert(self.pageviewSpTable,sprite )

        local function onChangeCheckBox( sender,eventType )
            local tag = sender:getTag()--tag == i 是从1开始的
            print("tag = " .. tag)
            print("imgName = " .. imgName)

            --点击了lock按钮时更新大图及小图上所有 锁 的状态
            --即：大图上的锁开/关 小图上的锁隐藏/显示

            --找到所有大图上的锁CheckBox，设置为未选中状态
            for i=1,table.getn(self.pageviewSpTable),1 do
                local sp = self.pageviewSpTable[i]
                local checkBoxBtn = sp:getChildByName("checkBoxBtn")
                checkBoxBtn:setSelected(false)
            end
            --找到当前点击的checkBoxBtn
            local checkBoxBtn = sprite:getChildByName("checkBoxBtn")

            --找到所有小精灵上的锁，进行隐藏操作
            for i=1,table.getn(spriteTable),1 do
                local sprite = spriteTable[i]
                local lockedSp = sprite:getChildByName("lockedSp")
                lockedSp:hide()
            end
            --点击了锁住/开锁按钮时，获取到对应的小精灵
            local bottomSp = spriteTable[tag+1]
            local lockedSp = bottomSp:getChildByName("lockedSp")
            if eventType == ccui.CheckBoxEventType.selected then
                print("check box selected")
                lockedSp:show()--显示锁
                checkBoxBtn:setSelected(true)--锁住
                --存储用户选中的图片名称及tag
                local value = tostring(tag)
                cc.UserDefault:getInstance():setStringForKey("SelectedImgIndex", value)
                cc.UserDefault:getInstance():setStringForKey("SelectedBackImageName", imageName)
            elseif  eventType == ccui.CheckBoxEventType.unselected then
                print("check box unselected")
                lockedSp:hide()--隐藏锁
                checkBoxBtn:setSelected(false)--锁开
                print("用户未选中任何图片，初始化数据tag=0，name=空")
                cc.UserDefault:getInstance():setStringForKey("SelectedImgIndex", "0")
                cc.UserDefault:getInstance():setStringForKey("SelectedBackImageName", "")
            end
        end

        local checkBoxBtn = ccui.CheckBox:create(G_GetPlazaRes("HallImages/Hall_hf_opened.png")
                                            ,G_GetPlazaRes("HallImages/Hall_hf_closed.png"))
        checkBoxBtn:addTo(sprite)
        checkBoxBtn:setAnchorPoint(1,1)
        local cbBtnx = 1040/1080*winSize.width
        local cbBtny = 1840/1920*winSize.height
        checkBoxBtn:setPosition(cbBtnx, cbBtny)
        local cbBtnw = 51/1080*winSize.width
        local cbBtnh = 59/1920*winSize.height
        checkBoxBtn:setContentSize(cbBtnw,cbBtnh)
        checkBoxBtn:addEventListener(onChangeCheckBox)
        checkBoxBtn:setTag(i)
        checkBoxBtn:setName("checkBoxBtn")

        if i == self.number then--表示这张图片被用户选中了
            checkBoxBtn:setSelected(true)
        end

        self.pageview:addPage(layout)
    end
    self.pageview:addEventListener(bigPageviewCallback)

end
function PersonalCenter_hf:createBottomSprites(  )
    local layer = cc.Layer:create()
    self:addChild(layer, 2)
    local layerColor = cc.LayerColor:create(cc.c3b(0,0,0))
    layerColor:addTo(layer)
    layerColor:setOpacity(0)
    --创建底部背景精灵
    local bottomBackSprite = cc.Scale9Sprite:create(G_GetPlazaRes("HallImages/Hall_hf_bottomBg.png"))
    bottomBackSprite:addTo(layerColor)
    bottomBackSprite:setAnchorPoint(0,0)
    bottomBackSprite:setPosition(0, 0)
    bottomBackSprite:setContentSize(winSize.width,0.25 * winSize.height)
    bottomBackSprite:setCapInsets(cc.rect(0,0,2,2))

    local bSize = bottomBackSprite:getContentSize()

    --创建中间的光圈
    local lightSp = cc.Sprite:create(G_GetPlazaRes("HallImages/Hall_hf_imgSelect.png"))
    lightSp:addTo(bottomBackSprite)
    lightSp:setAnchorPoint(0.5,0.5)
    local lspx = bSize.width/2
    local lspy = bSize.height/2
    lightSp:setPosition(lspx,lspy)
    local lspw = (400/1080)*winSize.width
    local lsph = (250/1920)*winSize.height
    lightSp:setContentSize(lspw,lsph)

    local toLeft,toRight = 30,30
    local dis = 150
    local spw = (winSize.width - toLeft - toRight - 2*dis )/3
    local sph = spw * (250 / 400)

    -- local leftMcPos--左侧蒙层的坐标
    -- local leftMcSize--左侧蒙层的大小
    -- local rightMcPos--右侧蒙层的坐标
    -- local rightMcSize--右侧蒙层的大小

    sX = (lspw-2*10)/spw--长度放大系数
    sY = (lsph-2*10)/sph--宽度放大系数
-- print("sX = " .. sX.."; sY = " .. sY)
    sx = 1/sX
    sy = 1/sY
    -- print("sx = " .. sx .."; sy = " .. sy)
    for i=1,mPageCount+2,1 do
        local imgName = string.format("HallImages/Hall_hf_img%d.png", i)
        local sprite = cc.Sprite:create(G_GetPlazaRes(imgName))
        sprite:addTo(bottomBackSprite)
        sprite:setAnchorPoint(0.5,0.5)
        sprite:setContentSize(spw,sph)
        local x = toLeft + spw/2 + (i-1)*(spw+dis)
        local y = bSize.height/2
        sprite:setPosition(x, y)
        if i == 2 then
            sprite:setScaleX(sX)
            sprite:setScaleY(sY)
        end

        --创建精灵上的 锁住 的锁图片
        local lockedSp = cc.Sprite:create(G_GetPlazaRes("HallImages/Hall_hf_closed.png"))
        lockedSp:addTo(sprite)
        lockedSp:setName("lockedSp")
        lockedSp:setAnchorPoint(1,1)
        local lockx = spw
        local locky = sph
        lockedSp:setPosition(lockx,locky)
        local lockw = 30/1080*winSize.width
        local lockh = 34/1920*winSize.height
        lockedSp:setContentSize(lockw,lockh)
        lockedSp:hide()
        if self.number > 0 then--表明有选中的图片记录
            if i == self.number + 1 then
                lockedSp:show()--显示选中的精灵上的locksprite
            end
        end

        -- if i == 1 then--左侧蒙层的坐标、大小
        --     leftMcPos = cc.p(x,y)
        --     leftMcSize = cc.size(spw,sph)
        -- end
        -- if i == 3 then--又侧蒙层的坐标、大小
        --     rightMcPos = cc.p(x,y)
        --     rightMcSize = cc.size(spw,sph)
        -- end

        table.insert(spriteTable, sprite)
    end

    -- --创建左侧的蒙层
    -- local leftMc = cc.Scale9Sprite:create(G_GetPlazaRes("HallImages/Hall_hf_mc.png"))
    -- leftMc:addTo(bottomBackSprite)
    -- leftMc:setAnchorPoint(0.5,0.5)
    -- leftMc:setPosition(leftMcPos)
    -- leftMc:setContentSize(leftMcSize)
    -- leftMc:setCapInsets(cc.rect(0,0,2,2))

    -- --创建右侧的蒙层
    -- local rightMc = cc.Scale9Sprite:create(G_GetPlazaRes("HallImages/Hall_hf_mc.png"))
    -- rightMc:addTo(bottomBackSprite)
    -- rightMc:setAnchorPoint(0.5,0.5)
    -- rightMc:setPosition(rightMcPos)
    -- rightMc:setContentSize(rightMcSize)
    -- rightMc:setCapInsets(cc.rect(0,0,2,2))

    moveByPos = cc.p(spw+dis,0)
end

function PersonalCenter_hf:ctor()
    local function onNodeEvent( event )
        if event == "enter" then
            -- self:onEnter()
            print("g_CurBackImgName = " .. g_CurBackImgName)
        elseif event == "enterTransitionFinish" then
            -- self:onEnterTransitionFinish()
        elseif event == "exit" then
            -- self:onExit()
        elseif event == "exitTransitionStart" then
            -- self:onExitTransitionStart()
        elseif event == "cleanup" then
            self:cleanup()
        end
    end
    self:registerScriptHandler(onNodeEvent)
end
function PersonalCenter_hf:cleanup(  )
    print("PersonalCenter_hf:cleanup(  )")
    local num = table.getn(spriteTable)
    for i=1,num,1 do
        local index = num-i+1
        local sp = spriteTable[index]
        table.remove(spriteTable,index)
        sp:removeFromParent()
        sp = nil
    end
    spriteTable = {}--存储底部小精灵
    lastIndex = 2
    moveByPos = cc.p(0,0)--用于存储每次精灵需要已经的参数,初值设为0

    sX = 1--精灵长度放大系数
    sY = 1--精灵宽度放大系数

    sx = 1--精灵长度缩小系数
    sy = 1--精灵宽度缩小系数

    self.imgNameTable = {}--清空存储imgname的表

    local n = table.getn(self.pageviewSpTable)
    for i=1,n,1 do
        local index = n - i + 1
        table.remove(self.pageviewSpTable,index)
        local sp = self.pageviewSpTable[index]
        sp:removeFromParent()
        sp = nil
    end
    self.pageviewSpTable = {}
end
return PersonalCenter_hf