Quick-x项目下Samples学习之EditBox

想写好Cocos2dx-Lua，不过还是想用封装版本的来写，省去了更多的代码，所以用了Quick-x。至于Cocos2dx的C++版本给我的感觉就是代码太冗余，不适合敏捷开发。（也许是我的C++太菜的原因 =  =）

学习Quick-x，先把大神的samples学一遍。至少开发过程中不会走弯路。

如题：

EditBox学习。

local MainScene = class("MainScene", function()
    return display.newScene("MainScene")
end)


function newButton(imageName, listener, setAlpha)
    local sprite = display.newScale9Sprite(imageName)  --创建9patch图片
    if setAlpha == nil then setAlpha = true end

    sprite:setTouchEnabled(true)  --设置精灵可触摸
    sprite:addTouchEventListener(function(event, x, y)  --给精灵添加触摸事件
        if event == "began" then
            print("began~")
            if setAlpha then sprite:setOpacity(128) end  --触摸时，将透明度设成128范围[0-255]
            return true
        end
        local touchInSprite = sprite:getCascadeBoundingBox():containsPoint(CCPoint(x, y))
        if event == "moved" then
            if touchInSprite then
                if setAlpha then sprite:setOpacity(128) end
            else
                sprite:setOpacity(255)
            end
        elseif event == "ended" then
            if touchInSprite then listener() end
            sprite:setOpacity(255)
        else
            sprite:setOpacity(255)
        end
    end)

    return sprite
end


function MainScene:ctor()
    local btn = newButton("EditBoxBg.png", function ( )
        print("button pressed")
    end):addTo(self):pos(display.cx - 100, display.cy)
    btn:setContentSize(cc.size(120, 160))

    local editBox2 = ui.newEditBox({
        image = "EditBoxBg.png",   --editBox的图片资源（96x96）
        size = CCSize(400, 96),    --editBox大小
        x = display.cx,            --x坐标
        y = display.cy,            --y坐标
        listener = function(event, editbox)   --监听事件
            if event == "began" then          --点击editBox时触发（触发顺序1）
                self:onEditBoxBegan(editbox)
            elseif event == "ended" then        --输入结束时触发 （触发顺序3）
                self:onEditBoxEnded(editbox)
            elseif event == "return" then        --输入结束时触发（触发顺序4）
                self:onEditBoxReturn(editbox)
            elseif event == "changed" then       --输入结束时触发（触发顺序2）
                self:onEditBoxChanged(editbox)
            else
                printf("EditBox event %s", tostring(event))
            end
        end
    })
    editBox2:setReturnType(kKeyboardReturnTypeSend)
    self:addChild(editBox2)

    local btn = newButton("EditBoxBg.png", function ( )
        print("button pressed")
    end):addTo(self):pos(display.cx + 100, display.cy)
    btn:setContentSize(cc.size(120, 160))
end

--获取editBox中的内容 getText()
function MainScene:onEditBoxBegan(editbox)
    printf("editBox1 event began : text = %s", editbox:getText()) 
end

function MainScene:onEditBoxEnded(editbox)
    printf("editBox1 event ended : %s", editbox:getText())
end

function MainScene:onEditBoxReturn(editbox)
    printf("editBox1 event return : %s", editbox:getText())
end

function MainScene:onEditBoxChanged(editbox)
    printf("editBox1 event changed : %s", editbox:getText())
end

function MainScene:onEnter()
    if device.platform ~= "android" then return end

    -- avoid unmeant back 避免偶然的返回事件，所以将函数的执行推后0.5S
    self:performWithDelay(function()
        -- keypad layer, for android
        local layer = display.newLayer()
        layer:addKeypadEventListener(function(event) --添加键盘事件监听
            if event == "back" then game.exit() end    --back键的消息
        end)
        self:addChild(layer)  --场景上添加Layer。

        layer:setKeypadEnabled(true)  --设置键盘监听事件可用
    end, 0.5)
end

return MainScene

效果图如下：

总结：给精灵添加事件以后的触摸机制问题，点击精灵时，触发began方法，然后按住鼠标不放，在拖拽的过程中不停的调用moved方法，在鼠标在释放的时候，调用了一次ended方法。这个就是触摸的调用相关。只要你点击了精灵，必定触发began事件。只要你释放了点击，必定调用一次ended方法。

然后就是需要注意began里面的return true、这个的作用是让触摸事件继续被moved、ended方法监听。如果不加return true，触摸的监听会只执行began，而moved和ended方法是进不去的，更别说在moved和ended方法中处理什么事件了。

回顾一下，如何让精灵启动监听，首先创建精灵，setTouchEnabled()，addTouchEventListener()，然后就可以启动精灵的触摸点击监听了。

editBox的大小影响着字体的大小，使用setFontSize()无效、目前我的解决方法是，使用一层透明的image加载上去，调整大小，让Size小点，然后就可以让字体小点了。