现项目中武将信息显示采用了PageView控件, 每一页显示6个武将信息, 游戏中武将数量可以为0~n, 如果一次性将所有武将创建出来显示效率可想而知;
所以有了PageView动态刷新并左右循环滑动的需求。大致原理如下:
假设需要显示的信息为n页:
1. n = 1,只有一页,不需要做循环滑动。
2. n = 2,创建3页:page0, page1, page2; page0和page2显示第2页信息, page1显示第1页信息;
初始化时强制显示page1。
3. n >= 3,创建3页:page0, page 1, page2; page0显示第n页信息, page1显示第1页信息, page2显示第2页信息;
初始化时强制显示page1。
循环实现:
PageView中有3页及以上时,响应TURNING事件,当滚动到第一页时删除最后一页, 新建一页插入到最前面; 当滚动最后一页时删除第一页
新建一页插入到最后面。 注:目前只有通过添加删除这种方式来现实pageindex的动态改变。
ccs中界面的设计:
1. 每一个页的布局不同,在编辑器中将所有页面创建出来,添加删除的原理同上。
2. 每一个页面布局相同, 在编辑器中只需要拼一个页面,代码中使用clone()即可。
页面布局相同代码实现:
<pre class="brush:lua; toolbar: true; auto-links: false;">
--PageView事件
PAGEVIEW_EVENT_TYPE =
{
TURNING = 0,
}
--当前显示的页码(1 ~ pages)
local pageIdx = 1
--英雄列表(id)
local heroList = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18}
--PageView
local pvWnd = touchgroup:getWidgetByName("test/pv")
--pIdx: 该页显示的内容索引(1 ~ pages)
--iIdx: 插入位置
--bClone: 是否克隆, 第一页已存在为false, 否则为true
function test:addPage(pIdx, iIdx, bClone)
local newPage = nil
if not bClone then
newPage = pvWnd:getPage(0)
else
newPage = pvWnd:getPage(0):clone()
end
newPage:setTag(pIdx)
pvWnd:insertPage(newPage, iIdx)
--根据pIdx设置武将信息(每个页面有6个武将)
for i = 1, 6 do
-----
end
end
--武将面板刷新
function test:updateHeroPanel()
--删除原来的页面(第一页保留用于clone)
for i = pvWnd:getPages():count() - 1, 1, -1 do
pvWnd:removePageAtIndex(i)
end
--添加新的页面(每页显示6个)
local pages = math.ceil(table.nums(heroList) / 6)
pageIdx = 1
if 1 == pages then
self:addPage(1, 0, false)
elseif 2 == pages then
self:addPage(2, 0, false)
self:addPage(1, 1, true)
self:addPage(2, 2, true)
pvWnd:scrollToPage(1)
elseif pages >= 3 then
self:addPage(pages, 0, false)
self:addPage(1, 1, true)
self:addPage(2, 2, true)
pvWnd:scrollToPage(1)
end
end
function test:onPageViewEvent(sender, eventType)
if eventType == PAGEVIEW_EVENT_TYPE.TURNING then
local pages = math.ceil(table.nums(heroList) / 6)
if pages >= 3 then
if 0 == pvWnd:getCurPageIndex() then
pageIdx = pageIdx - 1
if pageIdx <= 0 then
pageIdx = pages
end
local nextPageIdx = pageIdx - 1
if nextPageIdx <= 0 then
nextPageIdx = pages
end
pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx, 0, true)
--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)
elseif 2 == pvWnd:getCurPageIndex() then
pageIdx = pageIdx + 1
if pageIdx > pages then
pageIdx = 1
end
local nextPageIdx = pageIdx + 1
if nextPageIdx > pages then
nextPageIdx = 1
end
pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx, 2, true)
end
elseif pages == 2 then
if 0 == pvWnd:getCurPageIndex() then
local nextPageIdx = 0
if 1 == pageIdx then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end
pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx, 0, true)
--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)
elseif 2 == pvWnd:getCurPageIndex() then
local nextPageIdx = 0
if 1 == pageIdx then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end
pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx, 2, true)
end
end
end
end
</pre>
每一个页面布局不同的实现此处不再赘述!
所以有了PageView动态刷新并左右循环滑动的需求。大致原理如下:
假设需要显示的信息为n页:
1. n = 1,只有一页,不需要做循环滑动。
2. n = 2,创建3页:page0, page1, page2; page0和page2显示第2页信息, page1显示第1页信息;
初始化时强制显示page1。
3. n >= 3,创建3页:page0, page 1, page2; page0显示第n页信息, page1显示第1页信息, page2显示第2页信息;
初始化时强制显示page1。
循环实现:
PageView中有3页及以上时,响应TURNING事件,当滚动到第一页时删除最后一页, 新建一页插入到最前面; 当滚动最后一页时删除第一页
新建一页插入到最后面。 注:目前只有通过添加删除这种方式来现实pageindex的动态改变。
ccs中界面的设计:
1. 每一个页的布局不同,在编辑器中将所有页面创建出来,添加删除的原理同上。
2. 每一个页面布局相同, 在编辑器中只需要拼一个页面,代码中使用clone()即可。
页面布局相同代码实现:
<pre class="brush:lua; toolbar: true; auto-links: false;">
--PageView事件
PAGEVIEW_EVENT_TYPE =
{
TURNING = 0,
}
--当前显示的页码(1 ~ pages)
local pageIdx = 1
--英雄列表(id)
local heroList = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18}
--PageView
local pvWnd = touchgroup:getWidgetByName("test/pv")
--pIdx: 该页显示的内容索引(1 ~ pages)
--iIdx: 插入位置
--bClone: 是否克隆, 第一页已存在为false, 否则为true
function test:addPage(pIdx, iIdx, bClone)
local newPage = nil
if not bClone then
newPage = pvWnd:getPage(0)
else
newPage = pvWnd:getPage(0):clone()
end
newPage:setTag(pIdx)
pvWnd:insertPage(newPage, iIdx)
--根据pIdx设置武将信息(每个页面有6个武将)
for i = 1, 6 do
-----
end
end
--武将面板刷新
function test:updateHeroPanel()
--删除原来的页面(第一页保留用于clone)
for i = pvWnd:getPages():count() - 1, 1, -1 do
pvWnd:removePageAtIndex(i)
end
--添加新的页面(每页显示6个)
local pages = math.ceil(table.nums(heroList) / 6)
pageIdx = 1
if 1 == pages then
self:addPage(1, 0, false)
elseif 2 == pages then
self:addPage(2, 0, false)
self:addPage(1, 1, true)
self:addPage(2, 2, true)
pvWnd:scrollToPage(1)
elseif pages >= 3 then
self:addPage(pages, 0, false)
self:addPage(1, 1, true)
self:addPage(2, 2, true)
pvWnd:scrollToPage(1)
end
end
function test:onPageViewEvent(sender, eventType)
if eventType == PAGEVIEW_EVENT_TYPE.TURNING then
local pages = math.ceil(table.nums(heroList) / 6)
if pages >= 3 then
if 0 == pvWnd:getCurPageIndex() then
pageIdx = pageIdx - 1
if pageIdx <= 0 then
pageIdx = pages
end
local nextPageIdx = pageIdx - 1
if nextPageIdx <= 0 then
nextPageIdx = pages
end
pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx, 0, true)
--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)
elseif 2 == pvWnd:getCurPageIndex() then
pageIdx = pageIdx + 1
if pageIdx > pages then
pageIdx = 1
end
local nextPageIdx = pageIdx + 1
if nextPageIdx > pages then
nextPageIdx = 1
end
pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx, 2, true)
end
elseif pages == 2 then
if 0 == pvWnd:getCurPageIndex() then
local nextPageIdx = 0
if 1 == pageIdx then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end
pvWnd:removePageAtIndex(2)
self:addPageToHeroPanel(nextPageIdx, 0, true)
--PageView的当前页索引为0,在0的位置新插入页后原来的页面0变为1;
--PageView自动显示为新插入的页面0,我们需要显示为页面1,所以强制滑动到1.
pvWnd:scrollToPage(1)
--解决强制滑动到1后回弹效果
pvWnd:update(10)
elseif 2 == pvWnd:getCurPageIndex() then
local nextPageIdx = 0
if 1 == pageIdx then
pageIdx = 2
nextPageIdx = 1
else
pageIdx = 1
nextPageIdx = 2
end
pvWnd:removePageAtIndex(0)
self:addPageToHeroPanel(nextPageIdx, 2, true)
end
end
end
end
</pre>
每一个页面布局不同的实现此处不再赘述!
小弟第一次发帖 文笔有限 欢迎指正!
http://www.cocoachina.com/bbs/simple/?t216078.html