使用 Corona SDK 进行混合移动应用开发入门 - 显示对象。

下载 Corona SDK 项目.zip

下载 CoronaShow.zip

下载 Phindi APK (重命名)

引言

我关于 Corona SDK 的第一篇文章，使用 Corona SDK 进行混合移动应用开发入门，是对该 SDK 用于开发混合应用的介绍。本文将介绍一些简单的显示对象，并展示开发人员如何使用以下对象设计其业务应用：

• Button
• 圆
• Image
• ImageRect
• Rect
• RoundedRect
• SegmentedControl
• Slider (范围)
• TextBox (原生多行输入) 和
• TextField (原生单行输入) 用于电子邮件、电话、网站、数字、小数、密码和文本

在本文中，我们还将介绍过渡、屏幕背景色和按钮点击事件等。Corona SDK 包含一些显示对象和组件，可以帮助开发人员构建外观精美的业务应用程序。由于 Corona SDK 主要用于游戏开发，因此通过遵循一些简单的设计指南并应用这些对象，也可以实现业务应用程序的构建。

虽然还有其他一些显示对象和其他组件，但我的目的是介绍一些基本控件，以便开发日常应用程序。我注意到，在大多数游戏开发中，Image 显示对象使用得很多。本文附带的是生成已附 Android 应用的完整应用程序。我在设备上运行该应用时，编译后运行流畅且令人印象深刻。言归正传，让我们详细看看这些控件。

一些不太严谨的假设：您已阅读上面链接的《使用 Corona SDK 进行混合移动应用开发入门》一文。您有兴趣探索其他移动应用开发框架，并且您具备一定的编程经验。

背景

我在引言中提到的上一篇文章详细介绍了安装 Corona SDK 及其创建您的第一个应用。在这篇后续文章中，我们将详细介绍一些显示对象和组件。我们讨论按钮点击事件和不同的屏幕过渡。虽然其中一些显示对象具有更多属性，但此处只重点介绍了创建屏幕控件的基本属性。有关更多详细信息，您可以参阅上一篇文章，其中提供了电子书和其他与 Corona SDK 相关内容的链接，尤其是在此处。

当您启动附带的应用程序时（启动 Corona Simulator > File > Open Project > main.lua），您将看到以下应用屏幕。

请注意，下面的屏幕来自模拟器，您的最终应用外观会略有不同，因为它会适应您设备操作系统的原生控件。

图 1

此屏幕显示了各种创建的按钮，每个按钮被选中后都会演示相关的兴趣点。让我们看看这些部分。

如前所述，Corona SDK 应用的主要控制器是 main.lua 文件。在附带的应用中，当应用启动时，main.lua 启动，然后打开 buttons.lua 场景文件。

注意：遗憾的是 Lua 不是此处提供的编码语言之一，因此没有语法高亮显示。因此，我将所有注释标记为绿色，代码标记为蓝色。

使用代码

main.lua

-- 设置应用的 iOS 状态栏

display.setStatusBar(display.HiddenStatusBar)
local widget = require "widget"
local composer = require "composer"
widget.setTheme("widget_theme_android_holo_light")
-- 有用的函数
display.setDefault("background", 0,0,0)
composer.gotoScene("buttons", {effect="fade", time = 400})

1. 当应用启动时，状态栏会被隐藏。

2. 加载了 widget 和 composer 插件，因为它们将用于在应用中显示组件并执行其他应用功能。

3. 使用组件，我们将应用主题设置为 android_holo_light。我们可以根据正在开发的应用程序设置各种主题。它们是：

• widget_theme_ios
• widget_theme_android
• widget_theme_ios7
• widget_theme_android_holo_dark
• widget_theme_android_holo_light

4. 我们使用 RGB 值 0,0,0 将场景/表单的背景色设置为白色。

5. 然后，我们使用 composer 插件转到 buttons (.lua) 场景。请注意，文件名扩展名未包含，因为 SDK 知道如何处理。我们使用的效果/过渡是“fade”，持续时间为 400 毫秒。屏幕之间有各种效果/过渡，这些在此处是自解释的：

• fade
• zoomOutIn
• zoomOutInFade
• zoomInOut
• zoomInOutFade
• flip
• flipFadeOutIn
• zoomOutInRotate
• zoomOutInFadeRotate
• zoomInOutRotate
• zoomInOutFadeRotate
• fromRight
• fromLeft
• fromTop
• fromBottom
• slideLeft
• slideRight
• slideDown
• slideUp
• crossfade

您可以通过自己的代码探索和体验这些效果，但在此第二个版本中，我在图 1 中描绘的每个按钮中都包含了大部分这些效果。让我们看看处理按钮的场景 buttons.lua。

buttons.lua

buttons 场景是应用打开的第一个场景。此场景如上面图 1 所示。它包含各种可点击的按钮，这些按钮会跳转到解释我在此处试图演示的对象 的其他场景。按钮提供了一个交互式控件，用户可以选择/点击，并在选择后发生一个事件。

Corona SDK 中的按钮是通过定义一个按钮控件 widget.newButton( options ) 来定义的。选项可以是 x、y 位置、宽度和高度、左上角位置、按钮标题等。如您在上面注意到的，上面的按钮有各种颜色，从蓝色到红色等。有趣的是，设置了两个属性使按钮呈现这种外观。它们是 defaultFile 和 overFile。

defaultFile 是一个指向图像文件的链接，该图像应在按钮处于活动状态时显示在按钮上；overFile 指向一个文件，该文件应在按钮被点击时显示。如果您仔细查看代码文件，您会找到像 buttonBlue.png 和 buttonBlueOver.png 这样的 png 文件。当我定义按钮时，我在这些属性中使用了这些名称，应用选择了该应用并完成了它的魔力。这两个文件以及其他文件是您应用程序的资源文件，要使您的应用运行，它们应该包含在您的项目文件夹中。

看看此场景中的最后一个按钮，文本字段。没有指定 defaultFile 和 overFile，按钮呈现了不同的外观。这是 Corona SDK 的一个不错的灵活性，也是我开始喜欢它的原因之一。您可以基于图像定义应用的外观和感觉。创建每个按钮时，都会触发一个事件。

-- 将按钮添加到名为 btnCircle 的屏幕
local onbtnCircleEvent = function( event )
composer.gotoScene("circle", {effect="fade", time = 400})
end
local btnCircle = widget.newButton
{
id = "btnCircle",
label = "Circle",
font = native.systemFont,
emboss = true,
left = 10,
top = 45,
width = 150,
height = 40,
labelColor = {default={0,0,0}},
onEvent = onbtnCircleEvent,
defaultFile = "buttonBlue.png",
overFile = "buttonBlueOver.png",
}
sceneGroup:insert(btnCircle)

上面的定义是关于带有 Circle 标题的按钮。onbtnCircleEvent 是在 Circle 按钮被点击时触发的事件。按钮事件应该在按钮对象定义之前定义。

我们将 btnCircle 对象定义为 newButton。我们给它一个相同的 ID 并将其标记为 Circle。控件指定的字体是原生系统字体。emboss 属性可以设置为 true/false。如果设置为 true，按钮文本看起来就像雕刻在按钮上一样。我们指定屏幕内的左上角位置来放置按钮，以及它的宽度和高度。

labelColor 属性指示按钮文本的颜色。这里您传递您想要的颜色的 RGB 值。我在此处没有添加 labelColor 的 over 属性，但您也可以添加它，并像默认颜色一样传递 RGB。

然后我们告诉应用，当按钮被点击时，通过 onEvent，onbtnCircleEvent 应该被触发。onbtnCircleEvent 是一个在按钮被点击时执行的函数，它基本上使用淡入淡出效果打开 circle 场景。

然后我们将按钮定义为具有默认图像 buttonBlue.png 和 overFile buttonBlueOver.png，当场景创建时，此按钮被插入到我们的组中。

这就是此应用中所有按钮的定义方式。您还会注意到，Rect 按钮是右对齐的，而 Rounded Rect 按钮的标题是左对齐的。默认情况下，按钮居中对齐，但通过将 align 属性更改为“left”或“right”可以更改按钮的对齐方式，使用 align = "left" / "right"。

Corona SDK 入门：2

为此场景创建一个标题实际上很简单。已使用文本控件来完成此操作，并将其放置在屏幕中央。

我们首先定义变量来保存屏幕尺寸，即屏幕可见区域的宽度和高度。

local _H = display.viewableContentHeight
local _W = display.viewableContentWidth

然后使用 buttonsTitle 变量添加标题，该变量放置在屏幕中央。

-- 将标题添加到名为 buttonsTitle 的屏幕
local buttonsTitle = display.newText("Beginning Corona SDK: 2",0,0,native.systemFont,14,"center")
buttonsTitle.anchorY = 0
buttonsTitle.x = _W/2
buttonsTitle.y = 5
buttonsTitle:setTextColor(0,0,0)
sceneGroup:insert(buttonsTitle)

anchorY - 定义在左、上、宽、高框内标题应锚定的位置。

x = _W/2 将标题放置在屏幕中央

y = 5 将标题放置在屏幕顶部 5 个位置

setTextColor(0,0,0) 传递 RGB 值使文本变为黑色（我们有一个白色背景）

circle.lua

此场景演示了如何创建圆，以防您的应用需要此类功能。概述：创建一个半径为指定坐标 (xCenter, yCenter) 的圆。局部原点位于圆的中心，锚点初始化为该局部原点。创建圆的语法是：display.newCircle( xCenter, yCenter, radius )

-- 将圆添加到名为 circleNew 的屏幕
local circleNew = display.newCircle(200,200,100)
circleNew.strokeWidth = 1
circleNew:setStrokeColor(0,0,255)
circleNew:setFillColor(255,255,255)
--设置边界框的左边缘
circleNew.anchorX = 0
--设置边界框的右边缘
circleNew.anchorY = 0
circleNew.x = 100
circleNew.y = 200
sceneGroup:insert(circleNew)

从上面的代码中，我们创建了一个圆，但决定通过锚定将其移动到左侧 = 100 和顶部 = 200。

图 2

很简单，不是吗？此屏幕和其他屏幕的有趣之处之一是屏幕左上角有一个返回按钮。该按钮的目的是正是如此，返回到前一个屏幕，它的定义如下：

-- 将按钮添加到名为 circleLeftButton 的屏幕
local oncircleLeftButtonEvent = function( event )
composer.gotoScene("buttons", {effect="slideRight", time = 400})
end
local circleLeftButton = widget.newButton
{
id = "circleLeftButton",
label = "",
labelAlign = "left",
font = native.systemFont,
emboss = true,
left = 0,
top = 0,
height = 40,
labelColor = {default={0,0,0}},
onEvent = oncircleLeftButtonEvent,
defaultFile = "leftArrow.png",
overFile = "leftArrowOver.png",
}
sceneGroup:insert(circleLeftButton)
end

当点击此左侧按钮时，使用 composer 打开 buttons 场景。有关创建按钮的更多详细信息，请参见上文。在此实例中，使用了 slideRight 效果，如可用效果/过渡中所述。

Image 和 ImageRect 控件

图 3 和图 4

这两个显示对象在定义方面没有巨大差异，除了一个对象提供一个适合其构造的图像（图 4 - ImageRect），而另一个则不（图 4 - Image）。

它们的目的都是从文件中显示图像。如果启用了内容缩放，则最好使用 ImageRect。

创建图像控件的语法是 display.newImage( [parent,] filename [,baseDir] [,x,y] [,isFullResolution]) ，而创建 ImageRect 的语法是 display.newImageRect( [parent,] filename, [baseDir,] width, height )

为了演示图像控件，创建了 dad.lua，用于创建图 3 中图像的代码是：

-- 将图像添加到名为 imgNew 的屏幕
local imgNew = display.newImage("61045423.jpg",0,0)
--设置边界框的左边缘
imgNew.anchorX = 0
--设置边界框的右边缘
imgNew.anchorY = 0
imgNew.x = 0
imgNew.y = 0
imgNew.isFullResolution = true
sceneGroup:insert(imgNew)

由于我们想将图像放置在左侧=0，顶部=0 的位置，因此我们对其进行了锚定并使用 x 和 y 来放置它。对于 ImageRect，我们的场景是 mom.lua。您会记得我们的第一篇文章使用了相同的 dad.lua 和 mom.lua 场景，并且这仍然沿用该思路。

imageRect 定义如下：

-- 将 ImageRect（图像自适应）添加到名为 imgNew 的屏幕
local imgNew = display.newImageRect("61045423.jpg",320,480)
--设置边界框的左边缘
imgNew.anchorX = 0
--设置边界框的右边缘
imgNew.anchorY = 0
imgNew.x = 0
imgNew.y = 0
sceneGroup:insert(imgNew)

对于 imageRect，我们指定了放置图像的矩形区域的宽度和高度。图像本身将被调整大小以适合该区域。此处指定的宽度和高度 320 和 480 与我们 config.lua 文件中的应用设置相同。

Rect 和 RoundedRect

您可以使用这些控件来创建矩形对象。顾名思义，一个有圆角，另一个没有。

图 4 和图 5

图 4 描绘了一个带有白色边框和与场景相同填充色的矩形，图 5 是一个带有圆角的白色矩形。

创建矩形的语法是 display.newRect( x, y, width, height ) ，而创建圆角的矩形的语法是 display.newRoundedRect( x, y, width, height, cornerRadius ).

查看 rect.lua，我们像这样轻松地创建了这个矩形：

-- 将 Rect 添加到名为 rectNew 的屏幕
local rectNew = display.newRect(0,0,150,150)
rectNew.strokeWidth = 2
rectNew:setStrokeColor(255,255,255)
rectNew:setFillColor(0,26,128)
--设置边界框的左边缘
rectNew.anchorX = 0
--设置边界框的右边缘
rectNew.anchorY = 0
rectNew.x = 10
rectNew.y = 100
sceneGroup:insert(rectNew)

宽度和高度均为 150。我们将描边颜色设置为白色，并将填充色（内部颜色）设置为 RGB 0,26,128。我们将它放置在左侧 10，顶部 100。

对于 RoundedRect，我们将其定义为...

-- 将 RoundedRect 添加到名为 roundedRectNew 的屏幕
local roundedRectNew = display.newRoundedRect(0,0,150,50,12)
roundedRectNew.strokeWidth = 3
roundedRectNew:setStrokeColor(0,0,255)
roundedRectNew:setFillColor(255,255,255)
--设置边界框的左边缘
roundedRectNew.anchorX = 0
--设置边界框的右边缘
roundedRectNew.anchorY = 0
roundedRectNew.x = 10
roundedRectNew.y = 100
sceneGroup:insert(roundedRectNew)

查看这些控件的定义，人们会注意到主要区别在于定义为 12 的 CornerRadius 属性。

Segmented Control

此组件创建一个分段控件。我们将在后续文章中深入探讨此控件的功能，但在此我们只讨论设计。创建分段控件的语法是 widget.newSegmentedControl( options ).

创建此控件时需要考虑的选项之一是段宽度、要创建的段以及活动的段。此控件有一个 onPress 事件，可以在按下段时触发。让我们来看看这个控件。

-- 将 SegmentedControl 添加到名为 nSegmentControl 的屏幕
-- 监听分段控件事件
local function onnSegmentControlPress( event )
local target = event.target
local trgCaption = target.segmentLabel
end
local nSegmentControl = widget.newSegmentedControl
{
id = "nSegmentControl",
left = 10,
top = 100,
defaultSegment = 2,
segments = {"One","Two","Three","Four","Five"},
onPress = onnSegmentControlPress,
labelFont = native.systemFont
}
sceneGroup:insert(nSegmentControl)

从上面的代码中，我们定义了一个方法来捕获 onnSegmentControlPress 的 onPress 事件。目前它并没有做太多事情，只是读取所选段的名称 target.segmentLabel。

我们将标签放置在左侧=10 和顶部=100 的位置，将其默认段设置为 2（即“Two”段），并为段使用系统字体。这在下面的图 6 中有所体现。

图 6

Slider

滑块是用户用来选择 0% 到 100% 范围的范围控件。当滑块值更改时，此控件也会触发一个事件。

图 7

从 buttons 场景中选择滑块将打开创建的滑块屏幕。创建滑块控件的语法是 widget.newSlider( options ).

您可以像上面所示的那样在表单上拥有垂直和水平滑块，只需将 orientation 属性从 horizontal 改为 vertical 即可。下面的代码会在屏幕上创建两个滑块。默认情况下，滑块的方向是水平的。

-- 添加滑块/范围，其值存储从 0% - 100%
-- 监听滑块中的值更改
local function progBarListener( event )
local value = event.value
end
local progBar = widget.newSlider
{
id = "progBar",
left = 50,
top = 100,
width = 200,
height = 50,
value = 25,
listener = progBarListener
}
sceneGroup:insert(progBar)
-- 添加滑块/范围，其值存储从 0% - 100%
-- 监听滑块中的值更改
local function vSliderListener( event )
local value = event.value
end
local vSlider = widget.newSlider
{
id = "vSlider",
left = 10,
top = 20,
width = 20,
height = 200,
value = 25,
orientation = "vertical",
listener = vSliderListener
}
sceneGroup:insert(vSlider)

这里的事件监听器除了读取滑块的值外，并没有做太多事情。在后续文章中我们将添加到移动应用中时会讨论更多。

TextBox（原生控件）

文本框是一个用于用户输入的输入字段控件，如图 8 所示。原生文本框是可滚动的，用于显示文本内容。创建文本框的语法是 native.newTextBox( centerX, centerY, width, height ).

图 8

文本框是一个原生对象，因为它会适应 iOS 和 Android 平台上的设备控件。此控件拥有的属性包括字体、对齐方式、占位符、大小、文本属性等。您还可以通过将 editable 属性设置为 false 来创建文本框，例如 .isEditable = true。您还可以通过设置 native.setKeyboardFocus( textBoxID ) 来让应用聚焦于文本框控件，其中 textBoxID 是要接收焦点的控件。

-- 将 TextBox/多行文本框添加到名为 txtNewTextBox 的屏幕
local txtNewTextBox = native.newTextBox(0,0,300,300)
--设置边界框的左边缘
txtNewTextBox.anchorX = 0
--设置边界框的右边缘
txtNewTextBox.anchorY = 0
txtNewTextBox.x = 10
txtNewTextBox.y = 50
txtNewTextBox:setTextColor(0,0,0)
txtNewTextBox.placeholder = "Placeholder"
txtNewTextBox.font = native.newFont(native.systemFont, 12)
native.setKeyboardFocus(txtNewTextBox)
txtNewTextBox.isEditable = true
sceneGroup:insert(txtNewTextBox)

我们将文本框放置在左侧=10 和顶部=50 的位置。我们将其文本颜色设置为黑色，占位符设置为“Placeholder”。使用 12 号字体的系统字体，并在打开场景时使其获得焦点，并且它是可编辑的。

TextFields

文本字段是获取用户输入的另一种方式，用于单行控件。文本字段用于定义电子邮件、密码、电话、网站等输入控件。这个原生控件通过简单地更改输入类型为

• 默认（普通文本）
• number
• phone
• url
• email
• decimal

就可以接受各种输入，并且键盘会相应地调整以接受预期的输入。图 9 以下是此类输入的简单示例。创建文本字段的语法是 native.newTextField( centerX, centerY, width, height ).

图 9

创建此类输入表单时，最好先创建一个填充屏幕的矩形，并捕获其点击事件来隐藏键盘，因为当您选择输入控件时会显示键盘，而背景点击事件可以轻松隐藏它。此示例中并未实现这一点。从上面的屏幕中，我们添加了标签来显示用户需要输入什么。但是，我们可以仅使用占位符来代替，并删除文本字段上方的标签/标题。

-- 将 TextField 添加到名为 txtFirstName 的屏幕
local txtFirstName = native.newTextField(0,0,300,30)
txtFirstName.anchorX = 0
txtFirstName.anchorY = 0
txtFirstName.x = 10
txtFirstName.y = 70
txtFirstName:setTextColor(0,0,0)
--设置输入类型
txtFirstName.inputType = "default"
--定义占位符
txtFirstName.placeholder = "First Name"
--设置字体
txtFirstName.font = native.newFont(native.systemFont, 12)
native.setKeyboardFocus(txtFirstName)
sceneGroup:insert(txtFirstName)

姓氏

--将 TextField 添加到名为 txtLastName 的屏幕
local txtLastName = native.newTextField(0,0,300,30)
txtLastName.anchorX = 0
txtLastName.anchorY = 0
txtLastName.x = 10
txtLastName.y = 130
txtLastName:setTextColor(0,0,0)
--设置输入类型
txtLastName.inputType = "default"
--定义占位符
txtLastName.placeholder = "Last Name"
--设置字体
txtLastName.font = native.newFont(native.systemFont, 12)
sceneGroup:insert(txtLastName)

我们还向此场景添加了两个按钮，这些按钮可以编程以执行某些功能，例如取消场景或保存详细信息。不过，这另说。

现在，就到这里了。请继续关注我关于 Corona SDK 体验的更多文章。

关注点

打开一个屏幕后，再次打开它会恢复到之前打开时的设置。例如，对于分段控件，如果您选择了段 5，然后关闭屏幕，再次打开时，它将恢复到上次选择的段。

在此应用中，我为屏幕使用了不同的背景色。当我摆弄屏幕时，背景色是从前一个屏幕继承的。我通过在场景显示事件中为每个屏幕设置默认背景色来解决了这个问题，如下所示。

-- Called when the scene is shown
function scene:show(event)
local sceneGroup = self.view
display.setDefault("background", 255,255,255)
end

我创建了一个名为 Corona.Show 的简单工具，以帮助我快速开发 Corona SDK 应用，但这仍处于早期阶段，并且在我进行过程中进行开发。您可以在此处下载它。本文讨论的项目是 Phindi，您可以自己打开并重新编译它。我还在此处包含了此应用生成的 apk，您可以在您的 Android 设备上安装它。

我希望这能为 SDK 提供一些有价值的信息。有关此内容的更多详细信息，请在我的个人资料中查找我的详细信息并发送消息。