取巧实现cocos2d-x输入框的多行输入

   声明：本博客为原创博客，转载请注明，原文地址为http://blog.csdn.net/chengyingzhilian/article/details/38660735

关于设计

关于如何实现多行输入，貌似cocos2d-x 一直没有解决，为啥UI会有如此缺陷呢。不该不该啊。网上搜索的基本的实现思路是：集成TextFieldTTF,然后重写关键算法。相对于这种正规军来说，下面的设计思路就算是取巧吧。

首先说明一下，EditBox是单行输入。虽然API wiki中出现多行的字眼。其次，LabelTTF是支持多行显示的。所以呢。取巧的方式正式采用EditBox+LabelTTF组合实现的。大体的设计思路呢，就是用Label 实时显示EditBox 的内容。

先看下设计图吧。

说明一下，绿色的框呢，表示屏幕界面，就这么大。多了看不到其他内容。

紫色的框呢表示输入区域，在此添加一个Label,用于显示输入的内容。

红色的区域是EditBox，左侧之所以要比屏幕长呢。原因有两点：

1 必须保证点击输入框位置能弹出输入法。这也就是输入框位置要有editBox 控件。

2.EditBox 要距离屏幕可识区域尽量的远，这样输入的单行内容就无法显示在EditBox中，而实时监听EditBox，一旦有变化更新到LabelTTF上。

灰色区域是一个事件遮罩。避免点击输入框外面而弹出输入框。

关于实现：

明白思路了，代码实现起来就简单多了。实现代码见本博客。

在此呢。使用Lua 脚本实现。

<span style="font-family:KaiTi_GB2312;">function multLineInput:init()
    local Spritecache = cc.SpriteFrameCache:getInstance()
    local frame = Spritecache:getSpriteFrame("touming.png")
    local codeBg1 = cc.Scale9Sprite:createWithSpriteFrame(frame)
    local size = self.contentNode:getContentSize()
    
    local boxSize = cc.size(size.width,size.height)
    self.editBox = cc.EditBox:create(boxSize,codeBg1)
    self.editBox:setAnchorPoint(cc.p(0.0,0.0))
    self.editBox:setFontSize(0)
    self.editBox:setMaxLength(330)
    self.editBox:setOpacity(0)
    self.contentNode:addChild(self.editBox)
	
	
local handler = function(event)
    if event == "began" then
        self.editBox:setText( self.contentLabel:getString())
    end
    
    if event == "changed" then
        local str =  self.editBox:getText()
        self.contentLabel:setString(str)
    end
    
    if event == "return" then
       local str =  self.editBox:getText()
       self.editBox:setText("")
       self.contentLabel:setString(str)
    end
end
    self.editBox:registerScriptEditBoxHandler(handler)
end</span>

对于监听可使用registerScriptEditBoxHandler 来实现。注意在退出的时候，需要unregisterScriptEditBoxHandler。

不过有一点需要注意，输入框是没有光标的。

如果研究一些cocos2d-x 做的游戏，你用发现在多行输入的界面，有些也是没有光标的。比如 昆仑的《武侠Q传》也是这样实现的吗。