Cocos2d-x 手游聊天系统Demo实现（Lua实现）

女爷i 2022-08-10 17:34 184阅读 0赞

# **Cocos2d-x 手游聊天系统Demo实现** #

转载请注明：IT\_xiao小巫

本篇博客给大家分享的是一个手游聊天系统，笔者也是第一次使用Cocos2d-x来实现这样一个模块，其中有很多不清楚不明白的地方都是通过自己不断摸索实现的，前面笔者对聊天系统做的简单的需求分析，只是对聊天的一些元素进行的说明还不太够专业。本篇博客会给大家介绍如何实现一个手游聊天Demo，会从代码层面上给大家做相关的说明，如有不对或者错漏的地方请各位明确指出并纠正。

首先来给大家看一下动态效果图：

![20140807111050921][]

本篇博客内容大纲：

**1. 加载Cocostudio制作的UI**

**2. Button的触摸事件监听**

**3. ListView添加列表项并设置列表点击事件**

**4. 富文本实现（可显示颜色文字和图片、动画）**

**5. 文本输入框实现（解决pc键盘无法删除字符的bug）**

**6. 动态往ListView添加列表项**

## 一、加载Cocostudio制作的UI ##

笔者所分享的这个Demo是通过Cocostudio的UI编辑器制作的，童鞋们也可自己制作更加好看的UI，不过一般都会有美工帮我们做好让我使用的。如下图所示：

![20140807115222007][]

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，它就提供了类似富文本的类，满足基本的需求。

![20140807131644778][]

代码实现：

--[[
    ==================
    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][http_download.csdn.net_detail_wwj_748_7725699]

**[http://vote.blog.csdn.net/Article/Details?articleid=38272837][http_vote.blog.csdn.net_Article_Details_articleid_38272837]  
2014年博文大赛，快快献上你宝贵的一票吧，你们的支持将会是小巫的动力和坚持。**

[20140807111050921]: /images/20220810/d32dd54137e24caca20216c65a162027.png
[20140807115222007]: /images/20220810/bf09b82c0e1c40fca5ec19e59bc5362e.png
[20140807131644778]: /images/20220810/573e3f07035b401e81c7755d759c8bb8.png
[http_download.csdn.net_detail_wwj_748_7725699]: http://download.csdn.net/detail/wwj_748/7725699
[http_vote.blog.csdn.net_Article_Details_articleid_38272837]: http://vote.blog.csdn.net/Article/Details?articleid=38272837