最近準備做一個聊天系統,開始準備使用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
- end
- function 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.BLACK
- if 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
- end
- function 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
最後是效果圖:
本文摘自:http://blog.csdn.net/ljxfblog/article/details/26136773