Cocos2d-x 手游聊天系统Demo实现（Lua实现），2024年大厂Android岗面试必问

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

代码实现：

–[[

==================