cocos-Lua FairyGUI 之 清單(九)

清單

參考: 清單

簡介

前面曾說過在cocosStudio中，提供了

PageView

、

ListView

、

ScrollView

、

TableView

等。

在FairyGUI中，這些都可以由

GList

來實作。

清單，它有如下幾個特點：

• 清單的滾動容器

  ScrollPane

  與清單

  GList

  的實作是分離的
• 支援

  上拉/下拉

  回調
• 支援

  虛拟清單

  的實作，其實作原理類似于

  tableView

• 虛拟清單

  的删除，不是通過

  remove

  而是通過

  setNumItems

  的數目來删除
• 清單支援多選，勾選UI編譯器中：

  選擇模式為多選（單擊實作）

  即可
• 支援清單中嵌入不同樣式的

  ListItem

• 可将清單拓展為

  樹

  來使用

單選虛拟清單

虛拟清單的開啟需要滿足如下條件:

• 設定清單項目資源，如果清單樣式一緻，可通過編譯器内

  項目資源

  設定。
• 清單開啟

  滾動

• 定義

  itemRender

  ，清單item的繪制
• 設定

  setVirtual

  ，開啟虛拟清單

  

  注意：

• setVirtual

  一定要放置到

  setNumItems

  前面，否則清單不能正常顯示
• 如果清單為單選模式，listItem需設定為

  單選按鈕

項目資源

的設定，可以使用接口

setDefaultItem

:

local normalList = view:getChild("list_1")
-- 方式1
normalList:setDefaultItem("ui://a0imyaf1vx0u1")
-- 方式2
normalList:setDefaultItem("ui://Common/listitem_1")
           

另外，關于

溢出處理

在設定為為水準滾動、垂直滾動或自動滾動後，可以設定

滾動容器

的特性相關。

參考：滾動容器

滾動容器很少在代碼中使用，使用情況無非有如下幾種：

• 清單

  禁止滾動

  ，不可将清單設為

  禁止觸摸

  ，這樣會導緻清單内的item無法點選。
• 清單需要

  置頂/底

• 将清單滾動到指定的索引位置

示例：

local itemNum = 500             -- item數目
local normalList = view:getChild("list_1")
-- 設定item繪制(索引從0開始)
normalList.itemRenderer = function(index, item)
    item:setTitle("标題...." .. index)
end 
-- 開啟清單虛拟功能
normalList:setVirtual()
-- 設定清單數目
normalList:setNumItems(itemNum)
normalList:addEventListener(fairygui.UIEventType.ClickItem, function(context)
    -- 擷取清單選擇索引(索引從0開始)
    local selIndex = normalList:getSelectedIndex()
    print("normalList 點選索引為:", selIndex)
end)
normalList:addEventListener(fairygui.UIEventType.PullUpRelease, function()
    print("上拉重新整理回調")
end)
normalList:addEventListener(fairygui.UIEventType.PullDownRelease, function()
    print("下拉重新整理回調")
end)

-- 擷取滾動容器
local scrollPane = normalList:getScrollPane()
-- 設定是否可滾動
local isTouch = (itemNum > 5) and true or false 
scrollPane:setTouchEffect(isTouch)

-- 置頂
local topBtn = view:getChild("topBtn")
topBtn:addEventListener(fairygui.UIEventType.Click, function()
    scrollPane:scrollTop()
end)
-- 置底
local downBtn = view:getChild("downBtn")
downBtn:addEventListener(fairygui.UIEventType.Click, function()
    scrollPane:scrollBottom()
end)
-- 滾動到指定索引位置
local sureBtn = view:getChild("sureBtn")
local inputText = view:getChild("inputText")
sureBtn:addEventListener(fairygui.UIEventType.Click, function()
    local index = tonumber(inputText:getText())
    if not index then return end 
    if index < 0 or index >= itemNum then return end 
    normalList:scrollToView(index, false)
end)
           

多選虛拟清單

清單是支援多選的，需要注意的地方是：

• 清單item需設定為

  複選按鈕

• 通過編譯器或者代碼設定

  選擇模式

  為

  多選(單擊實作)

  

選擇模式

通過UI編譯器設定即可，一般不會用代碼：

local multiList = view:getChild("list_2")
--[[
選擇模式，類型有:
SINGLE :                單選
MULTIPLE :              多選
MULTIPLE_SINGLECLICK :  多選單擊
NONE :                  無
]]
local mode = fairygui.ListSelectionMode.MULTIPLE_SINGLECLICK
multiList:setSelectionMode(mode)
           

完整示例如下:

local multiList = view:getChild("list_2")
multiList.itemRenderer = function(index, item)
    item:setTitle("多選...." .. index)
end 
multiList:setVirtual()
multiList:setNumItems(10)
multiList:addEventListener(fairygui.UIEventType.ClickItem, function(context)
    -- 擷取選項，索引從0開始
    local selections = multiList:getSelection()
    -- selections:	0,2
    print("selections:", table.concat(selections, ","))    
end)

-- 重置
local resetBtn = view:getChild("resetBtn")
resetBtn:addEventListener(fairygui.UIEventType.Click, function()
    multiList:clearSelection()
end)

-- 全選
local allBtn = view:getChild("allBtn")
allBtn:addEventListener(fairygui.UIEventType.Click, function()
    multiList:selectAll()
end)
           

多樣清單

顧名思義，多樣清單内的Item并非是重複的。

它主要關鍵點在于：

itemProvider

來實作listItem的多樣性。

注意：

• 多樣清單不需要設定預設的Item。
• 多樣清單不需要

  開啟虛拟

  

完整示例：

local variList = view:getChild("list_3")
-- 擷取不同索引下的url(索引從0開始)
variList.itemProvider = function(index)
    if index == 1 then 
        return "ui//Common/listitem_2"
    elseif index == 2 then 
        return "ui//Common/radio_btn_1"
    elseif index == 3 then 
        return "ui://a0imyaf1vx0u3s"
    else
        return "ui://Common/listitem_1"
    end  
end 

variList.itemRenderer = function(index, item)
    if index == 1 then 
        -- do something
    elseif index == 2 then 
        -- do something
    elseif index == 3 then 
        item:setTitle("選擇框标題")
    else 
        local titleText = item:getChild("title")
        titleText:setText("文本标題:" .. index)
    end 
end 
variList:setNumItems(5)
variList:addEventListener(fairygui.UIEventType.ClickItem, function(context)
    local selIndex = variList:getSelectedIndex()
    -- 根據選擇索引擷取對象索引
    local childIndex = variList:itemIndexToChildIndex(selIndex)
    -- 根據對象索引擷取對象節點
    local child = variList:getChildAt(childIndex)
end)
           

代碼效果：

其他

• 如果清單動态建立，則UI編譯器中需要

  清空釋出資源

  , 這樣有助于提升效率

  

• 重複說明下：

  多樣清單不需要設定虛拟化

  ，且不要在項目資源中設定

  預設資源

上一篇：cocos2d-Lua FairyGUI 之 組(八)

下一篇：cocos2d-Lua FairyGUI 之 樹(十)