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

发表于2016-07-20
评论0 1.7k浏览

想免费获取内部独家PPT资料库?观看行业大牛直播?点击加入腾讯游戏学院游戏程序行业精英群

711501594
  转载请注明: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文件到我们的程序中去:

?
1
ChatScene.widget = ccs.GUIReader:getInstance():widgetFromJsonFile( ChatUI_1/ChatUI_1.json )

  我们在编辑器添加了多个对象:
  WorldPanel、PartyPanel、ChatPanel分别对应世界、公会、私聊三个板块,板块下面对应其相应的子节点:WordList、PartyList、ChatList。
  我们需要在程序中找到它们:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
--[[
============================
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,通过监听“世界”、“公会”、“私聊”三个按钮来分别切换不同的板块,按钮的触摸监听事件很简单:

?
1
2
3
4
-- 设置按钮监听事件
   worldButton:addTouchEventListener(touchEvent)
   partyButton:addTouchEventListener(touchEvent)
   chatButton:addTouchEventListener(touchEvent)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
--[[
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提供三组数据

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
-- 初始化三组数据
   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

  --设置默认模型

?
1
2
3
4
5
6
7
8
9
10
11
12
13
-- 创建模型
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)

  --添加自定义项

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
-- 获得数组的大小
    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

  --每一项数据

?
1
2
3
4
5
6
7
8
9
-- 设置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的点击事件和滚动事件
 
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
-- 设置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,它就提供了类似富文本的类,满足基本的需求。


  代码实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
--[[
==================
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修正了。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
--- 键盘事件监听回调方法
   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添加一项就可以了。
  这里我监听了发送按钮的点击事件,然后获取到输入框的文本,在把文本添加到列表项中去。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

  以上基本是笔者这个聊天系统的重要内容,下面把完整的实现代码给大家:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
--[[
===============
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

腾讯GAD游戏程序交流群:484290331Gad游戏开发核心用户群

原文链接

著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引

游戏学院公众号二维码
腾讯游戏学院
微信公众号

提供更专业的游戏知识学习平台