2014 年 12 月 16 日
教程:新的原生文本输入功能
从 每日构建版本 #2520 开始,Corona Labs 工程团队对两个原生文本输入 API 函数 native.newTextField() 和 native.newTextBox() 进行了重大更新。其中一些是重大更改,这意味着它们将导致你的应用程序行为有所不同。
在讨论这些更改之前,让我们先讨论一下为什么要实施这些更改。本质上,原生 API 功能位于 Corona SDK OpenGL 显示层次结构之外。如果你将内容区域定义为 320x480,创建一个字体大小为 20 磅的 display.newText() 对象,然后在 iPhone 5S (640x1136) 上运行该应用,Corona SDK 将自动将其变成一个 40 像素的文本对象。在相同的情况下,如果 原生 输入字段内的文本也为 20 磅,则操作系统会将字体从 20 磅缩放到 40 磅,以使其适合。但是,如果你的内容区域不是像素完美的(比如在应该是 360 磅的 iPad 上为 320 磅),或者你试图将其适配到 Android 的 160-ppi 设置,则缩放可能最终不匹配。此外,在 iOS、OS X 和 Android 上,“装饰”(输入区域周围的装饰/边框)的数量各不相同,从而加剧了整体问题。
考虑到这一点,让我们探讨一下更改以及它们如何影响这两个 API 调用。
native.newTextField() 和 native.newTextBox() 现在使用缩放字体
这是一个重大更改。现在,当使用 native.newTextField() 或 native.newTextBox() 时,指定的字体大小将与使用相同字体大小的 display.newText() 对象的大小相匹配(以前这是基于设备的本机磅值大小)。
由于这是一个重大更改,并且你可能已经实施了字体缩放的解决方法,因此我们通过 display.setDefault() 提供了两个新的“旧版”设置选项。请注意,原生文本输入字段和框有不同的选项
- 输入字段 —
display.setDefault( "isNativeTextFieldFontSizeScaled", false )
- 输入框 —
display.setDefault( "isNativeTextBoxFontSizeScaled", false )
字体自动调整大小以适应字段高度
在之前的教程中,我们介绍了一些函数来帮助调整文本输入字段及其内部文本的大小。其中一个示例函数允许你指定字段的所需高度,并使字体适合该字段。这现在是 native.newTextField() 的默认行为。
但是,如果你已经实现了解决方法,你也可以更改此行为。你可以让字体调整大小以适应字段,或者让字段调整大小以包含字体。这可以通过两个新函数来实现
第一个函数 (object:resizeFontToFitHeight()) 在你创建字段后更改输入字段的高度,并且希望调整字体大小以使其适合该字段时很有用。例如
1 2 3 4 5 6 7 |
local textField = native.newTextField( 160, 240, 280, 40 ) textField.text = "Hello World" -- 更改文本字段的高度 textField.height = 60 -- 调整字体大小以最适合文本字段的新高度 textField:resizeFontToFitHeight() |
第二个函数 (object:resizeHeightToFitFont()) 在字体大小是更高优先级,并且字段可以具有可变大小以适应字体大小时很有用。
1 2 3 4 5 6 7 8 |
local textField = native.newTextField( 160, 240, 280, 40 ) textField.text = "Hello World" -- 将文本字段的字体大小更改为系统默认大小 textField.size = 60 -- 调整文本字段的高度以最适合字体 textField:resizeHeightToFitFont() |
重要提示:如果你选择使用这些新的缩放方法,则不应使用先前教程中介绍的函数。
在 Android 上更好地使用装饰
在 Android 上,文本字段周围的“装饰”来自 9 切片图像图(在 Corona 术语中)。这包含一些额外的透明度,导致框比它需要的要小。现在,我们会查看像素来缩放文本字段,使其更好地匹配你在 Corona Simulator 和 iOS 设备上看到的内容。这应该使构建多平台应用程序更加容易。
在上图中,绿色区域表示使字段略小于其应有大小的额外透明度。由于此更改,当你使用每日构建版本 #2520 或更高版本重建你的应用程序时,你现有的文本字段将稍微变大。
OS X 的 Corona 模拟器现在调整字体大小
先前教程中的一个警告涉及到 OS X 的 Corona 模拟器中的字体缩放。如果模拟器“皮肤”的缩放比例不是 100%,则字体会显得太大。因此,你只能在皮肤缩放比例为 100% 时使用我们引入的新函数。现在,原生字体将在 OS X 的 Corona 模拟器中正确调整大小。
支持系统默认字体大小
Corona SDK 现在允许你设置原生文本输入对象的字体大小,以匹配用户选择的系统默认大小。为此,只需将字体的大小设置为 nil
,native.newTextField() 和 native.newTextBox() 的字体大小将遵循系统默认值。
1 2 3 4 |
local textField = native.newText( 160, 240, 280, 30 ) textField.size = nil -- 将字体大小设置为系统默认值 textField:resizeHeightToFitFont() |
这是一个非常有用的功能,但您可能需要花费更多精力来布局文本字段,因为默认字体大小在不同设备之间可能会有很大差异。 如果您将 nil
作为 display.newText() 或 display.newEmbossedText() 的 fontSize
属性传入(或者直接完全省略它),这些对象也将使用默认字体大小。
其他杂项修复
截至 Daily Build #2520,还实现了与字体相关的另外两个功能/修复
- 之前,在 iOS 上,存在一个错误,阻止您更改 native.newTextBox() 的大小,直到在该框内有文本后。 此错误已修复。
- 之前,如果您想更改 native.newTextField() 或 native.newTextBox() 的字体,您必须调用 native.newFont() API,而对于 display.newText(),您总是需要为字体名称指定一个字符串。现在,为了保持一致性,您也可以将 native.newFont() 值传递给 display.newText()。
结论
通过这些控制和调整原生输入字段/框以适应特定字体大小或字段高度的新功能,使用 Corona 开发跨平台应用程序的用户界面现在更加容易和一致。
Erich Grüttner D.
发布于 15:57, 12 月 16 日太棒了!!!!
非常感谢 CoronaLabs 团队!!!
Jetson Bates
发布于 11:59, 12 月 17 日感谢更新。我确信很多人,包括我自己,都会觉得这非常有用。
Josep Alemany Fruitos
发布于 11:27, 12 月 18 日这是必须的! 感谢 Corona 团队的工作!
Dave Haynes
发布于 16:16, 12 月 18 日我们已经在我们的应用程序中使用新方法了。 干得好!
RuneW
发布于 04:43, 1 月 2 日我认为这非常重要,应该从每日构建版本中发布出来。
Joshua Quick
发布于 21:31, 1 月 2 日目前,初级和基础用户可以使用我们在此处博客上发布的解决方案……
/blog/2014/12/02/tutorial-sizing-text-input-fields
RuneW
发布于 15:14, 1 月 31 日是啊……
RuneW
发布于 04:01, 3 月 5 日object:resizeHeightToFitFont() 示例中的以下行对我来说没有意义
— 将文本字段的字体大小更改为系统默认值
textField.size = 60
最后一行是正确的吗? 将 .size 设置为 60 意味着将字体更改为系统默认值?