Cocos2d-x 手遊聊天系統Demo實現（Lua實現）

https://blog.csdn.net/wwj_748/article/details/38414009

Cocos2d-x 手遊聊天系統Demo實現

 轉載請註明：IT_xiao小巫

   本篇博客給大家分享的是一個手遊聊天系統，筆者也是第一次使用Cocos2d-x來實現這樣一個模塊，其中有很多不清楚不明白的地方都是通過自己不斷摸索實現的，前面筆者對聊天系統做的簡單的需求分析，只是對聊天的一些元素進行的說明還不太夠專業。本篇博客會給大家介紹如何實現一個手遊聊天Demo，會從代碼層面上給大家做相關的說明，如有不對或者錯漏的地方請各位明確指出並糾正。

首先來給大家看一下動態效果圖：

本篇博客內容大綱：

1. 加載Cocostudio製作的UI

2. Button的觸摸事件監聽

3. ListView添加列表項並設置列表點擊事件

4. 富文本實現（可顯示顏色文字和圖片、動畫）

5. 文本輸入框實現（解決pc鍵盤無法刪除字符的bug）

6. 動態往ListView添加列表項

一、加載Cocostudio製作的UI

  筆者所分享的這個Demo是通過Cocostudio的UI編輯器製作的，童鞋們也可自己製作更加好看的UI，不過一般都會有美工幫我們做好讓我使用的。如下圖所示：

  UI製作完之後，導出項目，然後把資源複製到我們項目的res目錄下，筆者這裏是把ChatUI_1複製到了res下，然後我們使用Lua代碼實現加載json文件到我們的程序中去：

ChatScene.widget = ccs.GUIReader:getInstance():widgetFromJsonFile( "ChatUI_1/ChatUI_1.json" )

我們在編輯器添加了多個對象：

WorldPanel、PartyPanel、ChatPanel分別對應世界、公會、私聊三個板塊，板塊下面對應其相應的子節點：WordList、PartyList、ChatList。

我們需要在程序中找到它們：

--[[
============================
findViews()
找到UI控件
============================
]]--
function ChatScene.findViews()
    ChatScene.widget = ccs.GUIReader:getInstance():widgetFromJsonFile( "ChatUI_1/ChatUI_1.json" )
    ChatScene.widget:setPosition( cc.p( 40, 40 ) )

    loadListViewItemFromJson()
    -- 獲得UI界面上的3個按鈕
    worldButton = ChatScene.widget:getChildByTag(6)
    partyButton = ChatScene.widget:getChildByTag(7)
    chatButton = ChatScene.widget:getChildByTag(8)

    -- 獲得三個每個按鈕對應的三個面板
    wordPanel = ChatScene.widget:getChildByTag(5)
    partyPanel = ChatScene.widget:getChildByTag(9)
    chatPanel = ChatScene.widget:getChildByTag(10)

    -- 獲得每個面板的ListView
    worldList = wordPanel:getChildByTag(13)
    partyList = partyPanel:getChildByTag(14)
    chatList = chatPanel:getChildByTag(15)

    -- 獲得輸入框
    inputBox = ChatScene.widget:getChildByTag(11)
    sendButton = ChatScene.widget:getChildByTag(12)

    dialog = ChatScene.widget:getChildByTag(20)
    chat = dialog:getChildByTag(21)
    lahei = dialog:getChildByTag(22)
    closeButton = dialog:getChildByTag(27)
end

  每個UI對象有相應的Tag屬性，我們可以通過找到其父節點，然後調用getChildByTag傳進tag的值找到控件。只有找到這些控件，我們才能去使用它。

二、Button的觸摸事件監聽

  筆者這個demo，通過監聽“世界”、“公會”、“私聊”三個按鈕來分別切換不同的板塊，按鈕的觸摸監聽事件很簡單：

-- 設置按鈕監聽事件
   worldButton:addTouchEventListener(touchEvent)
   partyButton:addTouchEventListener(touchEvent)
   chatButton:addTouchEventListener(touchEvent)

--[[
touchEvent
觸摸事件回調方法
]]--
local function touchEvent( sender, eventType )
    if sender:getTag() == TAG_WORLD_BUTTON then
        wordPanel:setVisible(true)
        partyPanel:setVisible(false)
        chatPanel:setVisible(false)
        dialog:setVisible(false)
        ChatScene.setCurrentTag( TAG_WORLD )
    elseif sender:getTag() == TAG_PARTY_BUTTON then
        partyPanel:setVisible(true)
        wordPanel:setVisible(false)
        chatPanel:setVisible(false)
        dialog:setVisible(false)
        ChatScene.setCurrentTag( TAG_PARTY )
    elseif sender:getTag() == TAG_CHAT_BUTTON then
        partyPanel:setVisible(false)
        wordPanel:setVisible(false)
        chatPanel:setVisible(true)
        dialog:setVisible(false)
        ChatScene.setCurrentTag( TAG_CHAT )

end

以上面這種方式就可以實現切換三個板塊了。

三、ListView添加列表項並設置列表點擊事件

 我們可以看到效果圖裏面每個板塊下面有對應的列表，它是使用Cocos2d-x UI中的ListView所呈現的。

 筆者感覺使用ListView比較麻煩，這裏筆者給出相應的使用方法供大家參考：

--首先我們爲ListView提供三組數據

-- 初始化三組數據
   local array = {}
   for i = 1, 20 do
       array[i] = string.format("請叫我巫大大%d", i - 1)
   end

   local array1 = {}
   for i = 1, 20 do
       array1[i] = string.format("公會開放啦%d", i - 1 )
   end

   local array2 = {}
   for i = 1, 20 do
       array2[i] = string.format("私聊列表項%d", i - 1 )
   end

--設置默認模型

-- 創建模型
local default_button = ccui.Button:create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png")
default_button:setName("Title Button")

-- 創建默認item
local default_itme = ccui.Layout:create()
default_itme:setTouchEnabled(true)
default_itme:setContentSize(default_button:getContentSize())
default_button:setPosition(cc.p( default_itme:getContentSize().width / 2.0, default_itme:getContentSize().height / 2.0 ))
default_itme:addChild(default_button)

-- 設置模型
worldList:setItemModel(default_itme)

--添加自定義項

-- 獲得數組的大小
    local count = table.getn(array)
    print("count:"..count)
    -- 添加自定義item
    for i = 1, count do
        -- 創建一個Button
        local custom_button = ccui.Button:create("cocosui/button.png", "cocosui/buttonHighlighted.png")
        -- 設置Button名字
        custom_button:setName("Title Button")
        --  設置按鈕使用九宮（scale9）渲染器進行渲染
        custom_button:setScale9Enabled(true)
        -- 設置內容尺寸
        custom_button:setContentSize(default_button:getContentSize())

        -- 創建一個佈局
        local custom_item = ccui.Layout:create()
        -- 設置內容大小
        custom_item:setContentSize(custom_button:getContentSize())
        -- 設置位置
        custom_button:setPosition(cc.p(custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0))
        -- 往佈局中添加一個按鈕
        custom_item:addChild(custom_button)
        -- 往ListView中添加一個佈局
        worldList:addChild(custom_item)

    end

--每一項數據

-- 設置item data
   items_count = table.getn(worldList:getItems())
   for i = 1, items_count do
       -- 返回一個索引和參數相同的項.
       local item = worldList:getItem( i - 1 )
       local button = item:getChildByName("Title Button")
       local index = worldList:getIndex(item)
       button:setTitleText(array[index + 1])
   end

--設置ListView的點擊事件和滾動事件

-- 設置ListView的監聽事件
worldList:addScrollViewEventListener(scrollViewEvent)
worldList:addEventListener(listViewEvent)

-- ListView點擊事件回調
local function listViewEvent(sender, eventType)
    -- 事件類型爲點擊結束
    if eventType == ccui.ListViewEventType.ONSELECTEDITEM_END then
        print("select child index = ",sender:getCurSelectedIndex())
        if dialog:isVisible() == true then
            dialog:setVisible(false)
        else
            ChatScene.showDialog()
        end
    end
end

-- 滾動事件方法回調
local function scrollViewEvent(sender, eventType)
    -- 滾動到底部
    if eventType == ccui.ScrollviewEventType.scrollToBottom then
        print("SCROLL_TO_BOTTOM")
        -- 滾動到頂部
    elseif eventType == ccui.ScrollviewEventType.scrollToTop then
        print("SCROLL_TO_TOP")
    end

end

四、 富文本實現（可顯示顏色文字和圖片、動畫）

   何爲富文本？筆者的理解是有着豐富文本的展示方式，比如可以展示顏色文本、圖片、動畫、還有超鏈接的這種就叫富文本。以前舊的版本Cocos2d-x可能並未提供這方面的支持，至於是哪個版本支持的筆者也沒有去深究，筆者這裏使用版本是Cocos2d-x 3.2，它就提供了類似富文本的類，滿足基本的需求。

代碼實現：

--[[
==================
RichText
富文本
=================
]]--
function ChatScene.RichText()
    local richText = ccui.RichText:create()
    richText:ignoreContentAdaptWithSize(false)
    richText:setContentSize(cc.size(100, 100))

    local re1 = ccui.RichElementText:create( 1, cc.c3b(255, 255, 255), 255, "This color is white. ", "Helvetica", 10 )
    local re2 = ccui.RichElementText:create( 2, cc.c3b(255, 255,   0), 255, "And this is yellow. ", "Helvetica", 10 )
    local re3 = ccui.RichElementText:create( 3, cc.c3b(0,   0, 255), 255, "This one is blue. ", "Helvetica", 10 )
    local re4 = ccui.RichElementText:create( 4, cc.c3b(0, 255,   0), 255, "And green. ", "Helvetica", 10 )
    local re5 = ccui.RichElementText:create( 5, cc.c3b(255,  0,   0), 255, "Last one is red ", "Helvetica", 10 )

    local reimg = ccui.RichElementImage:create( 6, cc.c3b(255, 255, 255), 255, "cocosui/sliderballnormal.png" )

    -- 添加ArmatureFileInfo, 由ArmatureDataManager管理
    ccs.ArmatureDataManager:getInstance():addArmatureFileInfo( "cocosui/100/100.ExportJson" )
    local arr = ccs.Armature:create( "100" )
    arr:getAnimation():play( "Animation1" )

    local recustom = ccui.RichElementCustomNode:create( 1, cc.c3b(255, 255, 255), 255, arr )
    local re6 = ccui.RichElementText:create( 7, cc.c3b(255, 127,   0), 255, "Have fun!! ", "Helvetica", 10 )
    richText:pushBackElement(re1)
    richText:insertElement(re2, 1)
    richText:pushBackElement(re3)
    richText:pushBackElement(re4)
    richText:pushBackElement(re5)
    richText:insertElement(reimg, 2)
    richText:pushBackElement(recustom)
    richText:pushBackElement(re6)

    richText:setLocalZOrder(10)

    return richText
end

五、文本輸入框實現（解決pc鍵盤無法刪除字符的bug）

  CocostudioUI編輯器提供TextField（輸入框），筆者在這裏也對它進行了實現，聊天系統一般需要玩家輸入信息，所以這裏提供了一個輸入框。但筆者在使用這個UI的時候，發現在win32平臺不能對輸入的文本進行刪除，但在移動設備可以使用輸入法對它進行編輯，所以筆者在這裏做了相關的處理把這個bug修正了。

--- 鍵盤事件監聽回調方法
   local function onkeyPressed(keycode, event)
       print("keypress")
       if keycode == cc.KeyCode.KEY_BACKSPACE then
          local str = inputBox:getStringValue()
           str = string.sub( str, 0, string.len( str ) - 1 )
           inputBox:setText( str )
       end
   end

   -- 鍵盤監聽事件
   local keyListener = cc.EventListenerKeyboard:create()
   keyListener:registerScriptHandler(onkeyPressed,cc.Handler.EVENT_KEYBOARD_PRESSED)
   local eventDispatcher = ChatScene.uiLayer:getEventDispatcher()
   eventDispatcher:addEventListenerWithSceneGraphPriority(keyListener, ChatScene.uiLayer)

通過以上方式，我們就可以使用簡拼的BackSpace對字符進行刪除了。大家請叫我活雷鋒。

六、動態往ListView添加列表項

  筆者想到聊天系統的列表是不斷刷新的，所以可能需要實現動態添加列表項，其實這個實現很簡單的，只需要在代碼中監聽相應的事件，然後往ListView添加一項就可以了。

這裏我監聽了發送按鈕的點擊事件，然後獲取到輸入框的文本，在把文本添加到列表項中去。

if sender:getTag() == TAG_SEND_BUTTON then
        print("sendText...")
        -- 獲得輸入框的文本
        local value = inputBox:getStringValue()
        local textView = ccui.Text:create(value,"Arial",20)
        print("value:"..value)
        if eventType == ccui.TouchEventType.began then
--            local custom_text = ChatScene.RichText()
            local custom_item = ccui.Layout:create()
            custom_item:setContentSize( textView:getContentSize() )
            textView:setPosition( cc.p( custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0 ) )
            custom_item:addChild( textView )
            -- 如果當前Tag爲世界
            if ChatScene.getCurrentTag() == TAG_WORLD then
                -- 插入自定義項
                worldList:insertCustomItem( custom_item, 0 )
                --                worldList:addChild(custom_item)
            elseif ChatScene.getCurrentTag() == TAG_PARTY then
                --                partyList:addChild(custom_item)
                partyList:insertCustomItem( custom_item, 0 )
            elseif ChatScene.getCurrentTag() == TAG_CHAT then
                --                chatList:addChild(custom_item)
                chatList:insertCustomItem( custom_item, 0 )
            end
        end

以上基本是筆者這個聊天系統的重要內容，下面把完整的實現代碼給大家：

--[[
===============
ChatSence
聊天系統模塊
===============
]]--

-- 類
local ChatScene = {}
ChatScene.uiLayer = nil
ChatScene.widget = nil

-- 窗口大小
local winSize = nil

-- 獲得UI界面上的3個按鈕
local worldButton = nil
local partyButton = nil
local chatButton = nil

-- 獲得三個每個按鈕對應的三個面板
local wordPanel = nil
local partyPanel = nil
local chatPanel = nil

-- 獲得每個面板的ListView
local worldList = nil
local partyList = nil
local chatList = nil

-- 列表項
local listview_item = nil
local head_icon = nil
local level = nil
local name = nil
local text = nil

-- 列表項個數
local items_count = nil

-- 獲得輸入框
local inputBox = nil
local sendButton = nil

-- 彈出對話框
local dialog = nil
local chat = nil
local lahei = nil
local closeButton = nil

-- 三個標記
local flag = nil
local TAG_WORLD = 1 -- 標識世界
local TAG_PARTY = 2 -- 標識公會
local TAG_CHAT = 3 -- 標識私聊

-- 一些按鈕的Tag
local TAG_WORLD_BUTTON = 1
local TAG_PARTY_BUTTON = 2
local TAG_CHAT_BUTTON = 3
local TAG_SEND_BUTTON = 4
local TAG_CHAT_BUTTON2 = 5
local TAG_LAHEI_BUTTON = 6
local TAG_CLOSE_BUTTON = 7

-- 場景創建
ChatScene.create = function()
    local scene = cc.Scene:create()
    scene:addChild( ChatScene.createChatLayer() )
    return scene
end

--[[
touchEvent
觸摸事件回調方法
]]--
local function touchEvent( sender, eventType )
    if sender:getTag() == TAG_WORLD_BUTTON then
        wordPanel:setVisible(true)
        partyPanel:setVisible(false)
        chatPanel:setVisible(false)
        dialog:setVisible(false)
        ChatScene.setCurrentTag( TAG_WORLD )
    elseif sender:getTag() == TAG_PARTY_BUTTON then
        partyPanel:setVisible(true)
        wordPanel:setVisible(false)
        chatPanel:setVisible(false)
        dialog:setVisible(false)
        ChatScene.setCurrentTag( TAG_PARTY )
    elseif sender:getTag() == TAG_CHAT_BUTTON then
        partyPanel:setVisible(false)
        wordPanel:setVisible(false)
        chatPanel:setVisible(true)
        dialog:setVisible(false)
        ChatScene.setCurrentTag( TAG_CHAT )
    elseif sender:getTag() == TAG_SEND_BUTTON then
        print("sendText...")
        -- 獲得輸入框的文本
        local value = inputBox:getStringValue()
        local textView = ccui.Text:create(value,"Arial",20)
        print("value:"..value)
        if eventType == ccui.TouchEventType.began then
--            local custom_text = ChatScene.RichText()
            local custom_item = ccui.Layout:create()
            custom_item:setContentSize( textView:getContentSize() )
            textView:setPosition( cc.p( custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0 ) )
            custom_item:addChild( textView )
            -- 如果當前Tag爲世界
            if ChatScene.getCurrentTag() == TAG_WORLD then
                -- 插入自定義項
                worldList:insertCustomItem( custom_item, 0 )
                --                worldList:addChild(custom_item)
            elseif ChatScene.getCurrentTag() == TAG_PARTY then
                --                partyList:addChild(custom_item)
                partyList:insertCustomItem( custom_item, 0 )
            elseif ChatScene.getCurrentTag() == TAG_CHAT then
                --                chatList:addChild(custom_item)
                chatList:insertCustomItem( custom_item, 0 )
            end
        end
    elseif sender:getTag() == TAG_CHAT_BUTTON2 then
        partyPanel:setVisible(false)
        wordPanel:setVisible(false)
        chatPanel:setVisible(true)
        dialog:setVisible(false)
    elseif sender:getTag() == TAG_LAHEI_BUTTON then
        print("我就把你拉黑，逗比")
    elseif sender:getTag() == TAG_CLOSE_BUTTON then
        dialog:setVisible(false)
    elseif sender:getTag() == 8 then
        if eventType == ccui.TouchEventType.ended then
            ChatScene.widget:setVisible( not ChatScene.widget:isVisible() )
        end
    end
end

local function onExit(strEventName)
    ChatScene.uiLayer:release()
    ChatScene.uiLayer = nil
end

--[[
=================
addOpenButton
添加一個打開的按鈕
=================
]]--
function ChatScene.addOpenButton()
    local openButton = ccui.Button:create() -- 創建一個按鈕
    openButton:setTouchEnabled(true)-- 設置可觸摸
    openButton:loadTextures( "cocosui/animationbuttonnormal.png", "cocosui/animationbuttonpressed.png", "" )--加載紋理
    openButton:setAnchorPoint( cc.p( 0, 0 ) )
    openButton:setPosition( cc.p( winSize.width -100, winSize.height - 50 ) )
    ChatScene.uiLayer:addChild(openButton, 1)
    openButton:setTag(8)
    openButton:addTouchEventListener(touchEvent)
end

--[[
==============
textFieldEvent
輸入框監聽事件回調方法
==============
]]--
local function textFieldEvent(sender, eventType)
    if eventType == ccui.TextFiledEventType.attach_with_ime then
        print("attach_with_ime")
    elseif eventType == ccui.TextFiledEventType.detach_with_ime then
        print("detach_with_ime")
    elseif eventType == ccui.TextFiledEventType.insert_text then
        print("insert_text")
    elseif eventType == ccui.TextFiledEventType.delete_backward then
        print("delete_backward")

    end
end


-- ListView點擊事件回調
local function listViewEvent(sender, eventType)
    -- 事件類型爲點擊結束
    if eventType == ccui.ListViewEventType.ONSELECTEDITEM_END then
        print("select child index = ",sender:getCurSelectedIndex())
        if dialog:isVisible() == true then
            dialog:setVisible(false)
        else
            ChatScene.showDialog()
        end
    end
end

-- 滾動事件方法回調
local function scrollViewEvent(sender, eventType)
    -- 滾動到底部
    if eventType == ccui.ScrollviewEventType.scrollToBottom then
        print("SCROLL_TO_BOTTOM")
        -- 滾動到頂部
    elseif eventType == ccui.ScrollviewEventType.scrollToTop then
        print("SCROLL_TO_TOP")
    end

end

--[[
====================
createChatLayer
創建聊天層
====================
]]--
function ChatScene.createChatLayer()

    ChatScene.uiLayer = cc.Layer:create()-- 創建ui層
    print("getReferenceCount1:"..ChatScene.uiLayer:getReferenceCount())
    winSize = cc.Director:getInstance():getWinSize()-- 獲得屏幕大小

    ChatScene.setCurrentTag(TAG_WORLD)
    ChatScene.addOpenButton()
    ChatScene.findViews()
    ChatScene.setTouchEnabled()
    ChatScene.setTags()
    ChatScene.addTouchEventListener()


    -- 初始化三組數據
    local array = {}
    for i = 1, 20 do
        array[i] = string.format("請叫我巫大大%d", i - 1)
    end

    local array1 = {}
    for i = 1, 20 do
        array1[i] = string.format("公會開放啦%d", i - 1 )
    end

    local array2 = {}
    for i = 1, 20 do
        array2[i] = string.format("私聊列表項%d", i - 1 )
    end


    -- 創建模型
    local default_button = ccui.Button:create("cocosui/backtotoppressed.png", "cocosui/backtotopnormal.png")
    default_button:setName("Title Button")

    -- 創建默認item
    local default_itme = ccui.Layout:create()
    default_itme:setTouchEnabled(true)
    default_itme:setContentSize(default_button:getContentSize())
    default_button:setPosition(cc.p( default_itme:getContentSize().width / 2.0, default_itme:getContentSize().height / 2.0 ))
    default_itme:addChild(default_button)

    -- 設置模型
    worldList:setItemModel(default_itme)



    -- 這裏是5項
    --    for i = 1, math.floor( count / 4 ) do
    --        print("i:"..i)
    --        --  壓棧一個默認項(通過克隆創建的)進listView.
    --        worldList:pushBackDefaultItem()
    --    end
    --
    --    -- 插入默認項
    --    for i = 1, math.floor( count / 4 ) do
    --        -- 插入一個默認項(通過克隆創建的)進listView.
    --        worldList:insertDefaultItem(0)
    --    end

    --使用cleanup清空容器（container）中的所有子節點（children）
    --    worldList:removeAllChildren()

    --    local testSprite = cc.Sprite:create("cocosui/backtotoppressed.png")
    --    testSprite:setPosition(cc.p(200,200))
    --    worldList:addChild(testSprite)


    -- 獲得數組的大小
    local count = table.getn(array)
    print("count:"..count)
    -- 添加自定義item
    for i = 1, count do
        -- 創建一個Button
        local custom_button = ccui.Button:create("cocosui/button.png", "cocosui/buttonHighlighted.png")
        -- 設置Button名字
        custom_button:setName("Title Button")
        --  設置按鈕使用九宮（scale9）渲染器進行渲染
        custom_button:setScale9Enabled(true)
        -- 設置內容尺寸
        custom_button:setContentSize(default_button:getContentSize())

        -- 創建一個佈局
        local custom_item = ccui.Layout:create()
        -- 設置內容大小
        custom_item:setContentSize(custom_button:getContentSize())
        -- 設置位置
        custom_button:setPosition(cc.p(custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0))
        -- 往佈局中添加一個按鈕
        custom_item:addChild(custom_button)
        -- 往ListView中添加一個佈局
        worldList:addChild(custom_item)

    end

    --    local function customButtonListener(sender, touchType)
    --        if sender:getTag() == 1 then
    --            dialog:setVisible(true)
    --        end
    --    end


    for i = 1, 20 do
        local custom_button = ccui.Button:create("cocosui/button.png", "cocosui/buttonHighlighted.png")
        custom_button:setName("wwj")
        custom_button:setScale9Enabled(true)
        custom_button:setContentSize(default_button:getContentSize())

        local custom_item = ccui.Layout:create()
        custom_item:setContentSize(custom_button:getContentSize())
        custom_button:setPosition(cc.p(custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0) )
        custom_item:addChild(custom_button)
        partyList:addChild(custom_item)
    end

    for i = 1, 20 do
        local custom_button = ccui.Button:create( "cocosui/button.png", "cocosui/buttonHighlighted.png" )
        custom_button:setName("wwj")
        custom_button:setScale9Enabled(true)
        custom_button:setContentSize( default_button:getContentSize() )

        local custom_item = ccui.Layout:create()
        custom_item:setContentSize( custom_button:getContentSize() )
        custom_button:setPosition( cc.p( custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0 ) )
        custom_item:addChild( custom_button )
        chatList:addChild( custom_item )
    end

    for i = 1, 5 do
        local custom_text = ChatScene.RichText()

        local custom_item = ccui.Layout:create()
        custom_item:setTouchEnabled(true)
        custom_item:setContentSize( custom_text:getContentSize() )
        custom_text:setPosition( cc.p( custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0) )
        custom_item:addChild( custom_text )
        chatList:addChild( custom_item )


--        local custom_button = ccui.Button:create("cocosui/button.png", "cocosui/buttonHighlighted.png")
--        custom_button:setName("wwj")
--        custom_button:setScale9Enabled(true)
--        custom_button:setContentSize(default_button:getContentSize())

        --        local custom_item2 = ccui.Layout:create()
        --        custom_item2:setContentSize(custom_button:getContentSize())
        --        custom_button:setPosition(cc.p(custom_item2:getContentSize().width / 0.6, custom_item2:getContentSize().height / 0.6) )
        --        custom_item2:addChild(custom_button)
        --        custom_button:setTag(i)
        --        custom_button:addTouchEventListener(customButtonListener)
        --        chatList:addChild(custom_item2)

    end

    -- 插入自定義item
    local items = worldList:getItems()--返回項的集合
    -- 獲得項的個數
    local items_count = table.getn(items)
    --    for i = 1, math.floor( count / 4 ) do
    --        local custom_button = ccui.Button:create("cocosui/button.png", "cocosui/buttonHighlighted.png")
    --        custom_button:setName("Title Button")--改變widget的名字，使用名字可以更輕鬆地識別出該widget
    --        custom_button:setScale9Enabled(true)-- 設置按鈕使用九宮（scale9）渲染器進行渲染
    --        custom_button:setContentSize(default_button:getContentSize())
    --
    --        local custom_item = ccui.Layout:create()
    --        custom_item:setContentSize(custom_button:getContentSize())
    --        custom_button:setPosition(cc.p(custom_item:getContentSize().width / 2.0, custom_item:getContentSize().height / 2.0))
    --        custom_item:addChild(custom_button)
    --        custom_item:setTag(1)
    --        worldList:insertCustomItem(custom_item, items_count)
    --    end

    -- 設置item data
    items_count = table.getn(worldList:getItems())
    for i = 1, items_count do
        -- 返回一個索引和參數相同的項.
        local item = worldList:getItem( i - 1 )
        local button = item:getChildByName("Title Button")
        local index = worldList:getIndex(item)
        button:setTitleText(array[index + 1])
    end

    local partyListItems_count = table.getn(partyList:getItems())
    for i = 1, partyListItems_count do
        local item = partyList:getItem( i - 1 )
        local button = item:getChildByName("wwj")
        local index = partyList:getIndex(item)
        button:setTitleText(array1[index + 1])

    end

    local chatListItems_count = table.getn(chatList:getItems())
    for i = 1, 20 do
        local item = chatList:getItem( i - 1 )
        local button = item:getChildByName( "wwj" )
        local index = chatList:getIndex( item )
        button:setTitleText( array2[ index + 1 ] )
    end

    -- 移除Tag=1的子節點
    --    worldList:removeChildByTag(1)

    -- 移除項by index
    --    items_count = table.getn(worldList:getItems())
    -- worldList:removeItem(items_count - 1)

    -- 設置ListView對齊方式爲橫向居中
    worldList:setGravity(ccui.ListViewGravity.centerVertical)
    --set items margin
    worldList:setItemsMargin(2.0)
    worldList:setBounceEnabled(true)
    -- 設置ListView對齊方式爲橫向居中
    partyList:setGravity(ccui.ListViewGravity.centerVertical)
    --set items margin
    partyList:setItemsMargin(2.0)

    inputBox:addEventListener(textFieldEvent)

    ChatScene.uiLayer:addChild(ChatScene.widget)
    ChatScene.widget:setVisible(false)
    --    ChatScene.uiLayer:registerScriptHandler(onExit)

    return ChatScene.uiLayer
end

local function ListViewItem()
    local layout = ccui.Layout:create()

    layout:setSizePercent( cc.p( 200, 200 ) )
    layout:setBackGroundColorType( ccui.LayoutBackGroundColorType.solid )
    layout:setBackGroundColor(cc.c3b(255,0,0))

    local image = ccui.ImageView:create("")
    layout:addChild(image)
    return layout
end


local function loadListViewItemFromJson()
    listview_item = ccs.GUIReader:getInstance():widgetFromJsonFile( "res/listview_item/listview_item.ExportJson" )
    head_icon = listview_item:getChildByTag( 6 )
    level = listview_item:getChildByTag( 7 )
    name = listview_item:getChildByTag( 8 )
    text = listview_item:getChildByTag( 9 )
end


--[[
===================
設置相關標記
===================
]]--
function ChatScene.setTags()
    worldButton:setTag(TAG_WORLD_BUTTON)
    partyButton:setTag(TAG_PARTY_BUTTON)
    chatButton:setTag(TAG_CHAT_BUTTON)
    sendButton:setTag(TAG_SEND_BUTTON)
    chat:setTag(TAG_CHAT_BUTTON2)
    lahei:setTag(TAG_LAHEI_BUTTON)
    closeButton:setTag(TAG_CLOSE_BUTTON)
end


--[[
============================
findViews()
找到UI控件
============================
]]--
function ChatScene.findViews()
    ChatScene.widget = ccs.GUIReader:getInstance():widgetFromJsonFile( "ChatUI_1/ChatUI_1.json" )
    ChatScene.widget:setPosition( cc.p( 40, 40 ) )

    loadListViewItemFromJson()
    -- 獲得UI界面上的3個按鈕
    worldButton = ChatScene.widget:getChildByTag(6)
    partyButton = ChatScene.widget:getChildByTag(7)
    chatButton = ChatScene.widget:getChildByTag(8)

    -- 獲得三個每個按鈕對應的三個面板
    wordPanel = ChatScene.widget:getChildByTag(5)
    partyPanel = ChatScene.widget:getChildByTag(9)
    chatPanel = ChatScene.widget:getChildByTag(10)

    -- 獲得每個面板的ListView
    worldList = wordPanel:getChildByTag(13)
    partyList = partyPanel:getChildByTag(14)
    chatList = chatPanel:getChildByTag(15)

    -- 獲得輸入框
    inputBox = ChatScene.widget:getChildByTag(11)
    sendButton = ChatScene.widget:getChildByTag(12)

    dialog = ChatScene.widget:getChildByTag(20)
    chat = dialog:getChildByTag(21)
    lahei = dialog:getChildByTag(22)
    closeButton = dialog:getChildByTag(27)
end

--[[
==================
addTouchEventListener
添加觸摸事件
==================
]]--
function ChatScene.addTouchEventListener()
    -- 設置按鈕監聽事件
    worldButton:addTouchEventListener(touchEvent)
    partyButton:addTouchEventListener(touchEvent)
    chatButton:addTouchEventListener(touchEvent)
    sendButton:addTouchEventListener(touchEvent)
    chat:addTouchEventListener(touchEvent)
    lahei:addTouchEventListener(touchEvent)
    closeButton:addTouchEventListener(touchEvent)

    -- 設置ListView的監聽事件
    worldList:addScrollViewEventListener(scrollViewEvent)
    worldList:addEventListener(listViewEvent)
    partyList:addScrollViewEventListener(scrollViewEvent)
    partyList:addEventListener(listViewEvent)
    chatList:addScrollViewEventListener(scrollViewEvent)
    chatList:addEventListener(listViewEvent)

    --- 鍵盤事件監聽回調方法
    local function onkeyPressed(keycode, event)
        print("keypress")
        if keycode == cc.KeyCode.KEY_BACKSPACE then
           local str = inputBox:getStringValue()
            str = string.sub( str, 0, string.len( str ) - 1 )
            inputBox:setText( str )
        end
    end

    -- 鍵盤監聽事件
    local keyListener = cc.EventListenerKeyboard:create()
    keyListener:registerScriptHandler(onkeyPressed,cc.Handler.EVENT_KEYBOARD_PRESSED)
    local eventDispatcher = ChatScene.uiLayer:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(keyListener, ChatScene.uiLayer)
end


--[[
==================
RichText
富文本
=================
]]--
function ChatScene.RichText()
    local richText = ccui.RichText:create()
    richText:ignoreContentAdaptWithSize(false)
    richText:setContentSize(cc.size(100, 100))

    local re1 = ccui.RichElementText:create( 1, cc.c3b(255, 255, 255), 255, "This color is white. ", "Helvetica", 10 )
    local re2 = ccui.RichElementText:create( 2, cc.c3b(255, 255,   0), 255, "And this is yellow. ", "Helvetica", 10 )
    local re3 = ccui.RichElementText:create( 3, cc.c3b(0,   0, 255), 255, "This one is blue. ", "Helvetica", 10 )
    local re4 = ccui.RichElementText:create( 4, cc.c3b(0, 255,   0), 255, "And green. ", "Helvetica", 10 )
    local re5 = ccui.RichElementText:create( 5, cc.c3b(255,  0,   0), 255, "Last one is red ", "Helvetica", 10 )

    local reimg = ccui.RichElementImage:create( 6, cc.c3b(255, 255, 255), 255, "cocosui/sliderballnormal.png" )

    -- 添加ArmatureFileInfo, 由ArmatureDataManager管理
    ccs.ArmatureDataManager:getInstance():addArmatureFileInfo( "cocosui/100/100.ExportJson" )
    local arr = ccs.Armature:create( "100" )
    arr:getAnimation():play( "Animation1" )

    local recustom = ccui.RichElementCustomNode:create( 1, cc.c3b(255, 255, 255), 255, arr )
    local re6 = ccui.RichElementText:create( 7, cc.c3b(255, 127,   0), 255, "Have fun!! ", "Helvetica", 10 )
    richText:pushBackElement(re1)
    richText:insertElement(re2, 1)
    richText:pushBackElement(re3)
    richText:pushBackElement(re4)
    richText:pushBackElement(re5)
    richText:insertElement(reimg, 2)
    richText:pushBackElement(recustom)
    richText:pushBackElement(re6)

    richText:setLocalZOrder(10)

    return richText
end

local function textFieldCompleteHandler()

end


--[[
=====================
setTouchEnabled
設置一些控件可觸摸
====================
]]--
function ChatScene.setTouchEnabled()
    -- 設置可觸摸
    worldButton:setTouchEnabled(true)
    partyButton:setTouchEnabled(true)
    chatButton:setTouchEnabled(true)
    sendButton:setTouchEnabled(true)
    chat:setTouchEnabled(true)
    lahei:setTouchEnabled(true)
    closeButton:setTouchEnabled(true)
    inputBox:setTouchEnabled(true)
end

--[[
=================
setCurrentTag
設置當前Tag
=================
]]--
function ChatScene.setCurrentTag(tag)
    flag = tag;
end

--[[
================
獲得當前Tag
===============
]]--
function ChatScene.getCurrentTag()
    return flag
end

--[[
===============
顯示dialog
===============
]]--
function ChatScene.showDialog()
    local popup  = cc.Sequence:create(cc.ScaleTo:create( 0.0, 0.0 ),
        cc.ScaleTo:create( 0.06, 1.05 ),
        cc.ScaleTo:create( 0.08, 0.95 ),
        cc.ScaleTo:create( 0.08, 1.0 ),
        nil)
    dialog:setVisible(true)
    dialog:runAction( popup )
end


-- 返回場景
return ChatScene

源碼也給你們準備好了，請再次叫我活雷鋒：http://download.csdn.net/detail/wwj_748/7725699