最近准备做一个聊天系统,开始准备使用cocos2dx的UIRichText控件来显示聊天内容,结果在使用的时候才发现,cocos2dx的RichText功能非常有限,完全不具备实现聊天的功能,只实现了加入文本、图像和自定义控件的功能,支持不同字体、颜色、字号。
我个人认为,一个RichText控件应该具备以下基本功能:
1、多样化的文本显示功能,包括字体、颜色、字号的设置。
2、能显示图片以及一些特殊元素。
3、应该支持图片文字的超链接功能。
4、能够支持滚动的效果。
5、能够有很方便的换行功能,最好能设置行间距。
如果能够更好的实现聊天的功能,我觉得还需要加入以下功能:
1、文本特效:描边,下划线,阴影,发光等功能。
2、支持设置控件最大显示行数。
3、支持数据的分类显示,用于分频道显示聊天内容。
cocos2dx只实现了基础的1和2功能,所以考虑之后还是决定自己写一个RichText控件。UIRichText的框架还是不错的,实现了文本分行显示的技术。在他的基础上很容易扩展。
首先,扩展RichItem,用来支持多样化的文本需求。
其次,扩展Label控件,用于支持特殊的文字效果。
再次,需要实现滚动功能,控件继承UIScrollView。
最后,还需要对lua进行支持,包括使用功能以及超链接点击事件的注册。
以上是我实现控件的思路,这里就不贴代码了,很多,我会把我的控件代码共享给大家,大家在使用中有什么问题也可以向我咨询。
源代码在这里,cocos2dx-3.0功能强大的richText控件
最后贴一下使用的代码和效果图吧!
使用代码如下,我是在lua里面使用的,大家可以参考一下:
function ChatUI:initRichEdit()
local widget = self:getWidget()
if widget then
--创建小喇叭控件
self._richBugle = ui.RichTextUI:create()
self._richBugle:setSize(cc.size(940, 35))
self._richBugle:setAnchorPoint(cc.p(0, 0))
self._richBugle:setPosition(cc.p(100, 510))
self._richBugle:setMaxLine(1)
--创建聊天控件
self._richChat= ui.RichTextUI:create()
self._richChat:setSize(cc.size(940, 420))
self._richChat:setAnchorPoint(cc.p(0, 0))
self._richChat:setPosition(cc.p(20, 70))widget:addChild(self._richBugle)
widget:addChild(self._richChat)local function callback(sender, eventType)
if eventType == ui.RICHTEXT_ANCHOR_CLICKED then
print(">>>>>>>>>>>addEventListenerRichText")
end
end
self._richChat:addEventListenerRichText(callback)
end
endfunction ChatUI:addChatMsg(channel, roleName, chatMsg, signs)
local richText = (channel == Channel_ID_Bugle) and self._richBugle or self._richChat
if richText and channel and roleName and chatMsg then
local ChannelNameSwitch =
{
[Channel_ID_Team] = "【队伍】",
[Channel_ID_Privacy] = "【私聊】",
[Channel_ID_Faction] = "【帮会】",
[Channel_ID_World] = "【世界】",
[Channel_ID_System] = "【系统】"
}
local ChannelColor =
{
[Channel_ID_Team] = Color3B.ORANGE,
[Channel_ID_Privacy] = Color3B.ORANGE,
[Channel_ID_Faction] = Color3B.ORANGE,
[Channel_ID_World] = Color3B.ORANGE,
[Channel_ID_System] = Color3B.WHITE,
[Channel_ID_Bugle] = Color3B.ORANGE
}
local linkColor = Color3B.YELLOW
local linklineColor = Color4B.YELLOW
local outlineColor = Color4B.BLACKif channel == Channel_ID_Bugle then
richText:insertNewLine()
end
if ChannelNameSwitch[channel] then
local rc = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(ChannelNameSwitch[channel]), "DFYuanW7-GB2312.ttf", 25)
rc:enableOutLine(outlineColor, 2)
richText:insertElement(rc)
end
if channel ~= Channel_ID_System then
local rcn = ui.RichItemText:create(channel, linkColor, 255, strg2u(roleName), "DFYuanW7-GB2312.ttf", 25)
rcn:enableLinkLine(linklineColor, 1)
rcn:enableOutLine(outlineColor, 2)
richText:insertElement(rcn)
chatMsg = ":" .. chatMsg
end
local rcm = ui.RichItemText:create(channel, ChannelColor[channel], 255, strg2u(chatMsg), "DFYuanW7-GB2312.ttf", 25)
richText:insertElement(rcm)
if channel ~= Channel_ID_Bugle then
richText:insertNewLine()
end
end
endfunction ChatUI:initComponent()
self:addChatMsg(Channel_ID_Bugle, "王小二", "This is Bugle Msg")
self:addChatMsg(Channel_ID_System, "", "This is System Msg")
self:addChatMsg(Channel_ID_Team, "王小二", "This is Team Msg")
self:addChatMsg(Channel_ID_World, "王小二", "This is World Msg")
self:addChatMsg(Channel_ID_Faction, "王小二", "This is Faction Msg")self._channel = Channel_ID_World
self:showChannel(Channel_ID_All)
local btnChannel = self:getChild("Button_Channel")
if btnChannel then
btnChannel:setTitleText(strg2u("世界"))
end
end
最后是效果图:
文章图片
【Android开发|cocos2dx实现功能强大的RichText控件】
推荐阅读
- 游戏开发|pygame小游戏开发 - 冰雪英雄会
- 游戏|元宇宙密室逃脱游戏攻略来啦!
- 从零开发一个完整的Android项目(九)——图片浏览
- Android开发|ViewPager自适应高度问题
- Android|Android 指定销毁一个Activity
- Unity3d|Unity中的层级以及渲染顺序
- 【Android】简单图片浏览器
- 理解ButterKnife(自动生成绑定资源的代码)
- MAC下搭建Android Studio
- NestedScrollingParent 和NestedScrollingChild 实现嵌套滑动