教程：移动原生文本输入字段/框

2014年11月18日

Corona 开发人员面临的一个挑战是如何处理 native.newTextField() 和 native.newTextBox() 对象，特别是当它们位于屏幕下半部分，可能会被设备的键盘覆盖时。一个常见的解决方案是在键盘激活时，将原生文本字段/框对象向上移动一定的“键盘高度”，从而使它们保持在用户的视野/访问范围内。

使用显示组

为了简单起见，原生对象可以作为一个“单元”移动，特别是作为 display.newGroup() 的一部分，其中可能包含支持对象，如背景、图像、按钮等。请考虑以下代码：

display.setDefault( "background", 0.5 )

-- Create forward references for UI objects
local value1, value2, result

-- Create new display group for the UI objects
local UIGroup = display.newGroup()

-- Listener function for text input events
local function textListener( event )

    if ( event.phase == "began" ) then

        -- Transition group upward to y=50
        transition.to( UIGroup, { time=1000, y=50 } )

    elseif ( event.phase == "ended" or event.phase == "submitted" ) then

        local v1 = tonumber( value1.text )
        local v2 = tonumber( value2.text )
        if ( v1 and v2 ) then
            -- Update the "result" text object
            result.text = v1 + v2
            -- Dismiss (hide) the native keyboard
            native.setKeyboardFocus( nil )
            -- Transition group back down to y=300
            transition.to( UIGroup, { time = 1000, y = 300 })
        end
    end
end

local title = display.newText( "Add two numbers", display.contentCenterX, 75, native.systemFont, 40 )
title:setFillColor( 0, 0, 0 )
UIGroup:insert( title )

value1 = native.newTextField( display.contentCenterX, 150, 160, 40 )
UIGroup:insert( value1 )
value1:addEventListener( "userInput", textListener )
value1.inputType = "number"

value2 = native.newTextField( display.contentCenterX, 225, 160, 40 )
UIGroup:insert( value2 )
value2:addEventListener( "userInput", textListener )
value2.inputType = "number"

local plus = display.newText( "+", display.contentCenterX-120, 215, native.systemFont, 80 )
plus:setFillColor( 0, 0, 0 )
UIGroup:insert( plus )

result = display.newText( "______", display.contentCenterX, 300, native.systemFont, 80 )
result:setFillColor( 0, 0, 0 )
UIGroup:insert( result )

local equals = display.newText( "=", display.contentCenterX-120, 300, native.systemFont, 80 )
equals:setFillColor( 0, 0, 0 )
UIGroup:insert( equals )

-- Initially position the group at y=300
UIGroup.y = 300

display.setDefault( "background", 0.5 )

-- 为 UI 对象创建前向引用

local value1, value2, result

-- 为 UI 对象创建新的显示组

local UIGroup = display.newGroup()

-- 文本输入事件的监听器函数

local function textListener( event )

if ( event.phase == "began" ) then

-- 将组向上过渡到 y=50

transition.to( UIGroup, { time=1000, y=50 } )

elseif ( event.phase == "ended" or event.phase == "submitted" ) then

local v1 = tonumber( value1.text )

local v2 = tonumber( value2.text )

if ( v1 and v2 ) then

-- 更新“结果”文本对象

result.text = v1 + v2

-- 关闭（隐藏）原生键盘

native.setKeyboardFocus( nil )

-- 将组向下过渡回 y=300

transition.to( UIGroup, { time = 1000, y = 300 })

end

local title = display.newText( "加两个数字", display.contentCenterX, 75, native.systemFont, 40 )

title:setFillColor( 0, 0, 0 )

UIGroup:insert( title )

value1 = native.newTextField( display.contentCenterX, 150, 160, 40 )

UIGroup:insert( value1 )

value1:addEventListener( "userInput", textListener )

value1.inputType = "number"

value2 = native.newTextField( display.contentCenterX, 225, 160, 40 )

UIGroup:insert( value2 )

value2:addEventListener( "userInput", textListener )

value2.inputType = "number"

local plus = display.newText( "+", display.contentCenterX-120, 215, native.systemFont, 80 )

plus:setFillColor( 0, 0, 0 )

UIGroup:insert( plus )

result = display.newText( "______", display.contentCenterX, 300, native.systemFont, 80 )

result:setFillColor( 0, 0, 0 )

UIGroup:insert( result )

local equals = display.newText( "=", display.contentCenterX-120, 300, native.systemFont, 80 )

equals:setFillColor( 0, 0, 0 )

UIGroup:insert( equals )

-- 最初将组的位置设置为 y=300

UIGroup.y = 300

这段代码创建了一个简单的 UI（用户界面），其中包含两个名为 value1 和 value2 的文本字段，以及加号 (+) 和等于号 (=) 文本对象、一个标题文本标签和一个用于保存两个字段求和结果的标签。所有这些对象都插入到 UIGroup 显示组中，包括原生文本字段。因此，当我们定位该组（或向上或向下过渡它）时，所有内容都会统一移动。

当然，这并不意味着您可以将原生对象放置在普通显示对象的前面——原生对象将始终显示在其他显示对象的前面，但我们仍然可以将这些对象的移动和定位作为一个集体组来处理。

请注意，在处理文本字段输入时，我们先确认两个字段都已输入值，然后再将组过渡回下方。我们还会确认每个值都是数字，以避免在将它们相加时出现任何潜在错误。通过这两个检查，当用户与这些字段交互时，它们将保持在键盘上方可访问，然后，当两者都具有有效条目时，该组可以过渡回下方，同时键盘被关闭/隐藏。当然，根据您自己的设计，此方法可能会有所不同，但您应确保在所需的交互期间输入字段保持可访问状态。

结论

如所演示的，此方法对于处理原生输入对象非常有用。它尤其有利于业务/实用程序应用程序的开发人员，因为这些类别的应用程序通常依赖于基于键盘的交互。

Rob Miracle

[email protected]

Rob 是 Corona Labs 的开发者关系经理。除了热衷于帮助其他开发者使用 Corona 制作出色的游戏外，他还喜欢在空闲时间制作游戏。自 1979 年以来，Rob 一直在为从个人电脑到大型机的各种平台编写游戏代码。他在游戏行业拥有超过 16 年的专业经验。

7 条评论

Fernando Faria
发布于 02:56, 11 月 20 日

我们何时可以选择获取原生键盘的高度？
- joseanquiles
  发布于 22:37, 11 月 20 日
  
  谢谢你，Rob。它清楚地解释了关于原生文本字段的很多内容。
  我原以为文本字段无法插入到组中。
  只有一个疑问：如何找到 y 位置，以便文本字段不被键盘隐藏？
  - Rob Miracle
    发布于 14:13, 11 月 22 日
    
    如果你的文本字段名为“myTextField”，那么你可以使用 myTextField.y 获取其 Y 位置。
RuneW
发布于 00:40, 11 月 21 日

我认为文本字段的组支持可能是新公开发布版本中的新功能之一？

这使事情变得容易一些，但我期待着 Corona 设法制作一个文本字段 **小部件** 而不是依赖于原生文本字段的那一天！

这样一个小部件将被制作成当小部件获得焦点时，它所在的组将自动向上滚动到给定位置。它将在 Android 模拟器中工作。并且里面的文本实际上会以可预测的方式表现，而不是像我的 Galaxy S5 手机上的演示那样（第一行是“1”，第二行是“2”）

http://www.sub20hz.com/fun/android/android_textField.png

我期待着这一天的到来！
ojnab
发布于 13:10, 11 月 22 日

不知道可以将原生文本字段插入到组中。此行为是否适用于其他原生显示对象？此外，这是否意味着如果我对组调用 removeSelf，则插入到组中的文本字段也将被销毁？
deniz
发布于 04:10, 11 月 23 日

你如何将原生文本字段放置在键盘的正上方？在 Android 设备上，键盘高度因设备而异（或其操作系统特定），在 iOS 设备上，如果您使用一些备用键盘，键盘高度也会有所不同。Corona 的这种限制使得无法创建类似 WhatsApp 的聊天 UI。请实现一个类似于 native.keyboardHeight 的函数
- Rob Miracle
  发布于 10:56, 11 月 23 日
  
  首先，没有办法获取 Android 的键盘高度。工程部门一直在尝试自动平移，屏幕会自动滚动到视图中。它似乎在 Android 上工作，但它仅在 iOS 的单方向应用程序上工作。由于这是一个实验性功能，在 iOS 上存在一些相当大的限制，我们没有在博客中介绍它。但是，如果您想尝试一下，请添加以下键
  
  CoronaWindowMovesWhenKeyboardAppears = true,
  
  到 iOS 的 settings->iphone->plist 表中或
  
  coronaWindowMovesWhenKeyboardAppears = true,
  
  到 build.settings 中 Android 的 settings->android 表中。是的，它们的开头字母大小写不同。Apple 的标准是将第一个字母大写，Google 的标准是将第一个字母小写。这将导致活动字段（如果它在键盘下方）平移到视图中。除了与键盘顶部齐平之外，没有其他额外的控件可以移动它。
  
  由于使此功能正常工作的复杂性，工程部门可能需要一段时间才能回到这里。只要您了解其局限性，就可以使用它。

教程：移动原生文本输入字段/框