weiyinchao88

浏览: 1234425 次

最近访客更多访客>>

u012363178

nowayout

haibo18

SjNm129

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1435)

社区版块

存档分类

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

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

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

分享到：

Cocos2d-x 3.2 Lua示例CurrentLanguageTes ... | Cocos2d-x 手游聊天系统需求分析

2014-08-07 13:34
浏览 1767
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

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

一、加载Cocostudio制作的UI

二、Button的触摸事件监听

三、ListView添加列表项并设置列表点击事件

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

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

六、动态往ListView添加列表项

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

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

一、加载Cocostudio制作的UI

二、Button的触摸事件监听

三、ListView添加列表项并设置列表点击事件

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

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

六、动态往ListView添加列表项

评论

发表评论

相关推荐

最近访客更多访客>>