要實(shí)現(xiàn)如下圖所示的烘挫，拖動(dòng)上面的圖片，下面對(duì)應(yīng)的小圖片跟著滾動(dòng)
pageviewDemo.jpg
代碼如下：
--[[
個(gè)人中心中的 換膚 界面
]]
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--頁(yè)數(shù)
local spriteTable = {}--存儲(chǔ)底部小精靈
--pageview滑動(dòng)圖片對(duì)應(yīng)的index是從0開始的
local lastIndex = 2--上次滑動(dòng)時(shí)對(duì)應(yīng)底部的圖片在表中的index齐鲤，初值是0+2=2
local moveByPos = cc.p(0,0)--用于存儲(chǔ)每次精靈需要已經(jīng)的參數(shù),初值設(shè)為0
local sX = 1--精靈長(zhǎng)度放大系數(shù)
local sY = 1--精靈寬度放大系數(shù)
local sx = 1--精靈長(zhǎng)度縮小系數(shù)
local sy = 1--精靈寬度縮小系數(shù)
function PersonalCenter_hf:create( )
local scene = PersonalCenter_hf.new()
self = scene
mCurObj = self
local PersonalCenterRootLayer = require("0.views.PersonalCenterRootLayer")
local function hfBackBtnCallback( )
print("點(diǎn)擊了 換膚 界面的返回按鈕")
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
--創(chuàng)建向左的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("點(diǎn)擊了 向左按鈕")
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)--測(cè)試椎瘟？
-- self.pageview:setCurrentPageIndex(lastIndex-2-1)
print("左移，2lastIndex = " .. lastIndex)
self.rightBtn:show()--顯示向右的按鈕
end
end)
self.leftBtn:hide()
--創(chuàng)建向右的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("點(diǎn)擊了 向右按鈕")
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)--測(cè)試望抽？
-- self.pageview:scrollToPage(lastIndex-2+1)
-- self.pageview:setCurrentPageIndex(lastIndex-2+1)
print("右移，2lastIndex = " .. lastIndex)
self.leftBtn:show()--顯示向左的按鈕
end
end)
self:createBigPageview()--創(chuàng)建大的pageview
self:createBottomSprites()--創(chuàng)建底部所有需要移動(dòng)的精靈
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)--翻頁(yè)的數(shù)量
--lastIndex = 2初值為2
if index > lastIndex then--表示向右移動(dòng)
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--對(duì)上一個(gè)精靈進(jìn)行縮小操作
local ac2 = cc.ScaleBy:create(0.2, sx, sy, 0)--縮小
local ac3 = cc.Spawn:create(ac1,ac2)
sp:runAction(ac3)
elseif i == index then--對(duì)當(dāng)前精靈進(jìn)行操作
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--對(duì)上一個(gè)精靈進(jìn)行縮小操作
local ac2 = cc.ScaleBy:create(0.2, sx, sy, 0)--縮小
local ac3 = cc.Spawn:create(ac1,ac2)
sp:runAction(ac3)
elseif i == index then--對(duì)當(dāng)前精靈進(jìn)行操作
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
--沒有移動(dòng)
print("沒有移動(dòng)")
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)
--移動(dòng)后
--pageview中當(dāng)前圖片對(duì)應(yīng)的表spriteTable中的index是
local index = curIndex + 2
mCurObj:moveFunc(index)--移動(dòng)
end
end
--創(chuàng)建翻頁(yè)界面
function PersonalCenter_hf:createBigPageview()
--創(chuàng)建圖片名稱數(shù)據(jù)
self.imgNameTable = {}--存儲(chǔ)創(chuàng)建的圖片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"--測(cè)試用毁腿，需刪除
if numberStr == "0" then
print("沒有選中記錄")
else
print(string.format("有選中記錄辑奈，選中的是第%s張圖片",numberStr))
end
self.number = tonumber(numberStr)
self.pageviewSpTable = {}--存儲(chǔ)pageview中的所有精靈
for i=1,table.getn(self.imgNameTable),1 do
--創(chuàng)建大圖片
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)
--點(diǎn)擊了lock按鈕時(shí)更新大圖及小圖上所有 鎖 的狀態(tài)
--即：大圖上的鎖開/關(guān) 小圖上的鎖隱藏/顯示
--找到所有大圖上的鎖CheckBox，設(shè)置為未選中狀態(tài)
for i=1,table.getn(self.pageviewSpTable),1 do
local sp = self.pageviewSpTable[i]
local checkBoxBtn = sp:getChildByName("checkBoxBtn")
checkBoxBtn:setSelected(false)
end
--找到當(dāng)前點(diǎn)擊的checkBoxBtn
local checkBoxBtn = sprite:getChildByName("checkBoxBtn")
--找到所有小精靈上的鎖已烤，進(jìn)行隱藏操作
for i=1,table.getn(spriteTable),1 do
local sprite = spriteTable[i]
local lockedSp = sprite:getChildByName("lockedSp")
lockedSp:hide()
end
--點(diǎn)擊了鎖住/開鎖按鈕時(shí)鸠窗，獲取到對(duì)應(yīng)的小精靈
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)--鎖住
--存儲(chǔ)用戶選中的圖片名稱及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("用戶未選中任何圖片，初始化數(shù)據(jù)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)
--創(chuàng)建底部背景精靈
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()
--創(chuàng)建中間的光圈
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--左側(cè)蒙層的坐標(biāo)
-- local leftMcSize--左側(cè)蒙層的大小
-- local rightMcPos--右側(cè)蒙層的坐標(biāo)
-- local rightMcSize--右側(cè)蒙層的大小
sX = (lspw-2*10)/spw--長(zhǎng)度放大系數(shù)
sY = (lsph-2*10)/sph--寬度放大系數(shù)
-- 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
--創(chuàng)建精靈上的 鎖住 的鎖圖片
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--左側(cè)蒙層的坐標(biāo)塌鸯、大小
-- leftMcPos = cc.p(x,y)
-- leftMcSize = cc.size(spw,sph)
-- end
-- if i == 3 then--又側(cè)蒙層的坐標(biāo)、大小
-- rightMcPos = cc.p(x,y)
-- rightMcSize = cc.size(spw,sph)
-- end
table.insert(spriteTable, sprite)
end
-- --創(chuàng)建左側(cè)的蒙層
-- 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))
-- --創(chuàng)建右側(cè)的蒙層
-- 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 = {}--存儲(chǔ)底部小精靈
lastIndex = 2
moveByPos = cc.p(0,0)--用于存儲(chǔ)每次精靈需要已經(jīng)的參數(shù),初值設(shè)為0
sX = 1--精靈長(zhǎng)度放大系數(shù)
sY = 1--精靈寬度放大系數(shù)
sx = 1--精靈長(zhǎng)度縮小系數(shù)
sy = 1--精靈寬度縮小系數(shù)
self.imgNameTable = {}--清空存儲(chǔ)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
