TextField光标以及其他一些特性的lua实现

Cocos2d-x Lua
#1

最近项目中需要使用输入框，需要有光标而且输入的字符串过长时要动态显示。
我是一个新手，结局大家肯定都是猜得到，各种被虐出翔。在网上搜了一圈，都是2.x版本改CCTextFieldTTF.cpp的，我在3.2版本改了一下，果然酸爽到死。光标是出来了，但是总是感觉有点蛋疼，毕竟改C++代码成本以及后续维护都是比较蛋疼的事情。不过最后我发现了quick的extension目录里面的TextField里面有addListerner的方法，隐约觉得直接用lua就可以完成光标和一些功能。新手写得慢，花了一个下午，还是折腾出来了，贴出来抛砖引玉，希望大家有什么好的方案一起分享一下。

这是gist地址： https://gist.github.com/wojingdaile/18d17c87d638b3d4379c

#2

哥们，能不能上传到百度网盘或者贴代码啊。你给你网址被墙了

#3 
更加完善的输入框

]]

local PinUIInput = class(“PinUIInput”, cc.ui.UIInput)

function PinUIInput:ctor(params)
assert(params and type(params) == ‘table’)
assert(params.fontSize)
assert(params.size)

params.UIInputType = 2

PinUIInput.super.ctor(self, params)

self.fontSize = params.fontSize
self.size = params.size

self.allText = {}
local curText = self:getStringValue()
curText:gsub(".", function (c) table.insert(self.allText, c) end)

self:addEventListener(self.textFieldEventListner)
self:initCursorSprite('cursor.png')

end

function PinUIInput:textFieldEventListner(eventType)
print(’------------>input event: '…eventType)
local curText = self:getStringValue()
local curDimension = self:getDimension(curText)

if eventType == 0 then      -- attach IME
    PinLog.debug('PinUIInput Event: Attach IME. curText: %s', curText)
    self.cursor:setVisible(true)

    local allText = table.concat(self.allText)
    local allDimension = self:getDimension(allText)
    if allDimension > self:getContentSize().width then

        local charWidth = allDimension / #allText
        local displayLen = math.floor(self:getContentSize().width / charWidth - 0.5)

        local startPos = #allText - displayLen
        if startPos < 1 then
            startPos = 1
        end
        curText = string.sub(allText, startPos, -1)
        self:setText(curText)
    end

elseif eventType == 1 then  -- detach IME
    PinLog.debug('PinUIInput Event: Detach IME. curText: %s', curText)
    self.cursor:setVisible(false)

elseif eventType == 2 then  -- insert text
    table.insert(self.allText, string.sub(curText, -1, -1))

    PinLog.debug('PinUIInput Event: Insert text. curText: %s] allText: %s]', 
        curText, table.concat(self.allText))

    if curDimension > self:getContentSize().width then
        curText = string.sub(curText, 2)
        self:setText(curText)
    end

elseif eventType == 3 then  -- delete text
    if curText == '' then
        self.allText = {}
    else
        table.remove(self.allText)
    end

    PinLog.debug('PinUIInput Event: Delete backward text. curText: %s allText: %s]', 
        curText, table.concat(self.allText))

    local allText = table.concat(self.allText)
    local allDimension = self:getDimension(allText)
    if allDimension > self:getContentSize().width then
        if #allText > #curText then
            local startPos, endPos = string.find(allText, curText)
            curText = string.sub(allText, startPos - 2, endPos)
        end
        self:setText(curText)
    end
end

self.cursor:setPositionX(self:getDimension(curText))

end

function PinUIInput:initCursorSprite(imageName)
self.cursor = display.newSprite(imageName, 0, self.size.height / 2, {scale9 = false})
self.cursor:addTo(self)

local sequence = transition.sequence({
    cc.FadeOut:create(0.6),
    cc.FadeIn:create(0.7),
})
local foreverAction = cc.RepeatForever:create(sequence)

self.cursor:runAction(foreverAction)
self.cursor:setVisible(false)

end

function PinUIInput:getDimension(text)
local label = cc.ui.UILabel.new({
text = text,
size = self.fontSize,
font = self:getFontName()})

return label:getContentSize().width

end

function PinUIInput:getAllText()
return table.concat(self.allText)
end

return PinUIInput

#4

这快件根本就没啥用的，就只是在文字末尾增加了一个闪动的 光标，而且还有问题

#5

你说的没错，就只是加了光标而已。

#6

好贴,但是在C++扩展了,以后再分享

#7

用editbox就行了。。。费那么大劲造什么轮子。。。。

#8

edit box 在真机上显示不对啊，输入框在最顶端，页面也没有上移，你有碰到这个问题吗？

#9

有碰到这个问题，待解决