&&&&cocos2dx带光标的多行输入框
cocos2dx带光标的多行输入框
cocos2dx 自带的CCTextField控件 没有输入光标，而且只能输入单行文字，多行输入并可以让光标在输入位置闪烁一直是一个比较麻烦的事情。这里就实现了多行输入，光标准确的指示输入位置。
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
移动开发下载排行查看: 3372|回复: 26
【9秒原创】cocos2d-x ——输入框CCTextFieldTTF示例
在线时间 小时
一、cocos2d-x之输入框CCTextFieldTTF
前面介绍过CCEditBox输入框，它是在2.0以后的版本中加入的，另外还有一种输入框，就是CCTextFieldTTF，从类名中可以看出这个类和CCLabelTTF有关系，这个类正是CCLabelTTF的子类，它具备CCLabelTTF的一些特性。相对于CCEditBox，CCTextFieldTTF用法相对复杂一些，可以自己封装一个这样输入框，用法比较灵活，本例子只做一个基本的介绍，用法简单，在屏幕上显示一个输入框，点击输入框时打开键盘，当超过一定长度就不能再输入。想要在输入时响应一些事件处理就需要继承CCTextFieldDelegate，这个代理里面包括一些响应事件。
代码如下：bool TextFieldTest::init()
{
& & if(!CCLayer::init())
& & {
& && &&&
& & }
& & inputText=&&;
& & n=0;
& & size=CCDirector::sharedDirector()-&getWinSize();
& & CCSprite* background=CCSprite::create(&background.jpg&);
& & background-&setPosition(ccp(size.width*0.5, size.height*0.5));
& & this-&addChild(background);
& &
& & textField=CCTextFieldTTF::textFieldWithPlaceHolder(&Please input some words&, &&, 30);
& & textField-&setPosition(ccp(size.width*0.5,size.height*0.5));
& & this-&addChild(textField);
& &
& & CCMenuItemImage* input_bkg=CCMenuItemImage::create(&blank.png&,&blank.png&,this,menu_selector(TextFieldTest::openKeyboard));
& & input_bkg-&setAnchorPoint(ccp(0.5, 0.5));
& & input_bkg-&setPosition(textField-&getPosition());
& &
& & CCMenu* menu=CCMenu::create(input_bkg,NULL);
& & menu-&setAnchorPoint(CCPointZero);
& & menu-&setPosition(CCPointZero);
& & this-&addChild(menu);
& &
& & textField-&setDelegate(this);
& &
void TextFieldTest::openKeyboard()
{
& & textField-&attachWithIME();
}
bool TextFieldTest::onTextFieldAttachWithIME(CCTextFieldTTF * sender)
{
& & this-&setPosition(ccp(0,200));
& &
}
bool TextFieldTest::onTextFieldDetachWithIME(CCTextFieldTTF * sender)
{
& & this-&setPosition(ccp(0,0));
& &
}
bool TextFieldTest::onTextFieldInsertText(CCTextFieldTTF * sender, const char * text, int nLen)
{
& & n+=nL
& & if(n&5)
& & {
& && &&&
& & }
& &
& &
}
复制代码运行效果：
265.png (35.03 KB, 下载次数: 81)
13:47 上传
附件下载：
游客，如果您要查看本帖隐藏内容请
打赏列表共打赏了0次
还木有人打赏~
在线时间 小时
顶一下果果
在线时间 小时
我是来顶果果的, 有分么
在线时间 小时
有没有聊天文本的原创
在线时间 小时
顶一个~~~~
在线时间 小时
可以支持 在 mac 操作系统上吗
在线时间 小时
在线时间 小时
在线时间 小时
在线时间 小时
帮助微信开发者公众号实现盈利..
特别声明（务必查看！）
1、HTML5游戏《新版小
《全面征服》源代码
**** 本内容被作者隐藏
特别声明（务必查看！）
1、Unity2D 别踩小白块
广大自拍女性之友来了，还在为要晒哪一张自拍犹
特别声明（务必查看！）
1、微擎模块《海报专
| 联系方式
COPYRIGHT(C)2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备号-4
北京中清龙图网络技术有限公司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)
每个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 )
以上面这种方式就可以实现切换三个板块了。
三、ListView添加列表项并设置列表点击事件
我们可以看到效果图里面每个板块下面有对应的列表，它是使用Cocos2d-x UI中的ListView所呈现的。
笔者感觉使用ListView比较麻烦，这里笔者给出相应的使用方法供大家参考：
--首先我们为ListView提供三组数据
-- 初始化三组数据
local array = {}
for i = 1, 20 do
array[i] = string.format(请叫我巫大大%d, i - 1)
local array1 = {}
for i = 1, 20 do
array1[i] = string.format(公会开放啦%d, i - 1 )
local array2 = {}
for i = 1, 20 do
array2[i] = string.format(私聊列表项%d, i - 1 )
--设置默认模型
-- 创建模型
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)
--每一项数据
-- 设置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])
--设置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)
ChatScene.showDialog()
-- 滚动事件方法回调
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)
四、 富文本实现（可显示颜色文字和图片、动画）
何为富文本？笔者的理解是有着丰富文本的展示方式，比如可以展示颜色文本、图片、动画、还有超链接的这种就叫富文本。以前旧的版本Cocos2d-x可能并未提供这方面的支持，至于是哪个版本支持的笔者也没有去深究，笔者这里使用版本是Cocos2d-x 3.2，它就提供了类似富文本的类，满足基本的需求。
代码实现：
==================
=================
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), 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
五、文本输入框实现（解决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 )
-- 键盘监听事件
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 )
以上基本是笔者这个聊天系统的重要内容，下面把完整的实现代码给大家：
===============
聊天系统模块
===============
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
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 )
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() )
local function onExit(strEventName)
ChatScene.uiLayer:release()
ChatScene.uiLayer = nil
=================
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)
==============
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)
-- 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)
ChatScene.showDialog()
-- 滚动事件方法回调
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)
====================
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)
local array1 = {}
for i = 1, 20 do
array1[i] = string.format(公会开放啦%d, i - 1 )
local array2 = {}
for i = 1, 20 do
array2[i] = string.format(私聊列表项%d, i - 1 )
-- 创建模型
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()
-- 插入默认项
for i = 1, math.floor( count / 4 ) do
-- 插入一个默认项(通过克隆创建的)进listView.
worldList:insertDefaultItem(0)
--使用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)
local function customButtonListener(sender, touchType)
if sender:getTag() == 1 then
dialog:setVisible(true)
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)
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 )
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)
-- 插入自定义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)
-- 设置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])
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])
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 ] )
-- 移除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
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
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 )
===================
设置相关标记
===================
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)
============================
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)
==================
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 )
-- 键盘监听事件
local keyListener = cc.EventListenerKeyboard:create()
keyListener:registerScriptHandler(onkeyPressed,cc.Handler.EVENT_KEYBOARD_PRESSED)
local eventDispatcher = ChatScene.uiLayer:getEventDispatcher()
eventDispatcher:addEventListenerWithSceneGraphPriority(keyListener, ChatScene.uiLayer)
==================
=================
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), 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
local function textFieldCompleteHandler()
=====================
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)
=================
setCurrentTag
设置当前Tag
=================
function ChatScene.setCurrentTag(tag)
================
获得当前Tag
===============
function ChatScene.getCurrentTag()
return flag
===============
显示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 ),
dialog:setVisible(true)
dialog:runAction( popup )
-- 返回场景
return ChatScene
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'