构建启动屏幕 — iOS

本指南概述了如何自定义基于故事板的文档,以便在 iOS 应用启动时显示启动屏幕

Xcode 配置

作为本指南的基础,请使用我们的 项目模板,其中包含所需的基本文件。

  1. 从我们的 GitHub 存储库下载 项目模板(launchimage-master.zip)并解压缩它。

  2. 双击 LaunchImage.xcodeproj 文件以启动 Xcode。

Xcode 是一个功能强大且全面的开发工具,可能看起来很复杂。幸运的是,我们的项目模板大大简化了配置过程。假设您已按照上述说明下载并打开了 模板,只需按照以下步骤操作

  1. 在 Xcode 中,在左侧的导航器列中,展开LaunchImageLaunchImage文件夹树

如果导航器不可见,可通过以下方式显示它视图导航器 显示导航器 (⌘-0).

  1. 在导航器文件夹树中,选择 Assets.xcassets 条目

  1. 在您 desired 的图像编辑应用程序中,创建三个图像。您需要一个“基础”版本,一个尺寸加倍的版本,以及一个尺寸三倍的版本。这些图像不需要遵循特定的像素大小,因为它们将缩放以适应 UIImageView,同时保持原始的纵横比。

我们在项目模板包中包含了三个示例图像,您可以使用它们进行测试。

  1. 将三个图像保存/复制到 Corona 项目的根文件夹(与 main.lua 同级)并使用iOS 风格的后缀方案分别命名为 Launch.png[email protected][email protected]

  2. 返回 Xcode,在中央窗格中,选择 Launch 条目

  1. 在其右侧,您会注意到三个标记为1x2x3x 的“插槽”。从 Finder 中,将您之前创建的图像拖到它们各自的插槽中:将 Launch.png 拖到 1x 插槽,将 [email protected] 拖到 2x 插槽,将 [email protected] 拖到 3x 插槽

  1. 现在,在左侧的导航器列中,选择 LaunchScreen.storyboard 文件

在中央窗格中,如果您选择视图控制器场景,您应该会看到启动屏幕外观的近似预览。本指南不涉及对此故事板的进一步调整和设计 — 我们仅概述如何生成一个带有中心图像的基本启动屏幕。

  1. 立即保存您的项目,然后选择文件导出…从 Xcode 应用程序主菜单中。
重要

在导出之前,请确保在左侧导航器列中仍然选中 LaunchScreen.storyboard — 这对于生成正确的文件类型至关重要。

  1. 在导出对话框面板中,导航到 Corona 项目的根文件夹。然后,在底部附近,找到文件格式选择框,并将选择更改为Interface Builder 故事板包.

选择Interface Builder 故事板包对于此步骤至关重要 — 请不要使用默认选项。

  1. 准备就绪后,单击保存为您的项目创建一个 LaunchScreen.storyboardc 文件夹。

为了确保您正确地完成了所有操作,请按照以下清单进行检查

  1. 在 Finder 中,导航到 Corona 项目的根文件夹。

  2. 在其中,检查是否存在 LaunchScreen.storyboardc 文件。如果它不存在,您可能忘记了选择正确的位置(项目的根文件夹)导出文件时。如有必要,请重复上述步骤8-10

  3. 获取有关 LaunchScreen.storyboardc 文件的更多信息(⌘-I)。它的种类应该是已编译的 Interface Builder 故事板文档。如果不是,您可能忘记了在导出文件时选择正确的文件格式。如有必要,请重复步骤8-10

  4. 检查该文件夹是否包含将用于启动屏幕的三个图像:Launch.png[email protected][email protected]。如果这些文件不存在,您可能忘记将它们保存/复制到根文件夹。

构建设置

将新的已编译故事板包与 Corona 项目链接还需要最后一个方面

  1. 打开 Corona 项目的 build.settings 文件。

  2. iphoneplist 表中,添加一个值为 "LaunchScreen"UILaunchStoryboardName

settings =
{
    iphone =
    {
        plist =
        {
            CFBundleIconFiles = {},  -- Required!
            UILaunchStoryboardName = "LaunchScreen",  -- Required!
        },
    },
}
  1. 保存您的 build.settings 文件。
重要

如果您的 plist 表中存在 UILaunchImages 键和关联的子表(如下所示),您必须将其删除,以及与该设置关联的所有图像文件。UILaunchStoryboardName 键将取代它,LaunchScreen.storyboardc 文件将控制您的所有启动屏幕。

静态方法

创建 LaunchScreen.storyboardc 文件的另一种方法是在项目文件夹中包含一组静态图像,然后在项目的 build.settings 文件中链接它们。这些图像必须遵循以下指示的名称/大小,并且必须与 main.lua 放在项目根目录中。

注意

如果您已按照上述步骤创建了基于故事板的启动屏幕,则可以完全忽略此部分。以下信息仅提供给想要使用各种静态图像文件作为启动屏幕的开发人员。

文件 尺寸 (宽×高) 方向 目标设备
Default@2x~iphone.png 640 × 960 竖屏 iPhone 4s
Default@2x~iphone.png 640 × 1136 竖屏 iPhone 5 / 5s
Default@2x~iphone.png 1136 × 640 横屏 iPhone 5 / 5s
Default@2x~iphone.png 750 × 1334 竖屏 iPhone 6 / 6s / 7
Default@2x~iphone.png 1334 × 750 横屏 iPhone 6 / 6s / 7
Default@2x~iphone.png 1242 × 2208 竖屏 iPhone 6 Plus / 6s Plus / 7 Plus
Default@2x~iphone.png 2208 × 1242 横屏 iPhone 6 Plus / 6s Plus / 7 Plus
Default-Portrait.png 768 × 1024 竖屏 iPad 2 / 3, iPad Mini 1
Default-Landscape.png 1024 × 768 横屏 iPad 2 / 3, iPad Mini 1
Default@2x~iphone.png 1536 × 2048 竖屏 iPad 4, iPad Air, iPad Mini 2 / 3 / 4, iPad Pro 9.7"
Default@2x~iphone.png 2048 × 1536 横屏 iPad 4, iPad Air, iPad Mini 2 / 3 / 4, iPad Pro 9.7"
Default@2x~iphone.png 2048 × 2732 竖屏 iPad Pro 12"
Default@2x~iphone.png 2732 × 2048 横屏 iPad Pro 12"

将这些文件添加到项目文件夹后,您必须在 build.settingsUILaunchImages 表中指定它们的存在和其他定义

settings =
{
    iphone =
    {
        plist =
        {
            -- Required launch image files/definitions table
            UILaunchImages = {
                {  -- iPhone 4 Portrait
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default",
                    ["UILaunchImageOrientation"] = "Portrait",
                    ["UILaunchImageSize"] = "{320, 480}"
                },
                {  -- iPhone 4 LandscapeLeft
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default",
                    ["UILaunchImageOrientation"] = "LandscapeLeft",
                    ["UILaunchImageSize"] = "{320, 480}"
                },
                {  -- iPhone 4 LandscapeRight
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default",
                    ["UILaunchImageOrientation"] = "LandscapeRight",
                    ["UILaunchImageSize"] = "{320, 480}"
                },
                {  -- iPhone 5 Portrait
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default-568h",
                    ["UILaunchImageOrientation"] = "Portrait",
                    ["UILaunchImageSize"] = "{320, 568}"
                },
                {  -- iPhone 5 LandscapeLeft
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default-568h",
                    ["UILaunchImageOrientation"] = "LandscapeLeft",
                    ["UILaunchImageSize"] = "{320, 568}"
                },
                {  -- iPhone 5 LandscapeRight
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default-568h",
                    ["UILaunchImageOrientation"] = "LandscapeRight",
                    ["UILaunchImageSize"] = "{320, 568}"
                },
                {  -- iPad Portrait
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default-Portrait",
                    ["UILaunchImageOrientation"] = "Portrait",
                    ["UILaunchImageSize"] = "{768, 1024}"
                },
                {  -- iPad LandscapeLeft
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default-Landscape",
                    ["UILaunchImageOrientation"] = "LandscapeLeft",
                    ["UILaunchImageSize"] = "{768, 1024}"
                },
                {  -- iPad LandscapeRight
                    ["UILaunchImageMinimumOSVersion"] = "7.0",
                    ["UILaunchImageName"] = "Default-Landscape",
                    ["UILaunchImageOrientation"] = "LandscapeRight",
                    ["UILaunchImageSize"] = "{768, 1024}"
                },
                {  -- iPhone 6 Portrait
                    ["UILaunchImageMinimumOSVersion"] = "8.0",
                    ["UILaunchImageName"] = "Default-667h",
                    ["UILaunchImageOrientation"] = "Portrait",
                    ["UILaunchImageSize"] = "{375, 667}"
                },
                {  -- iPhone 6 LandscapeLeft
                    ["UILaunchImageMinimumOSVersion"] = "8.0",
                    ["UILaunchImageName"] = "Default-667h",
                    ["UILaunchImageOrientation"] = "LandscapeLeft",
                    ["UILaunchImageSize"] = "{375, 667}"
                },
                {  -- iPhone 6 LandscapeRight
                    ["UILaunchImageMinimumOSVersion"] = "8.0",
                    ["UILaunchImageName"] = "Default-667h",
                    ["UILaunchImageOrientation"] = "LandscapeRight",
                    ["UILaunchImageSize"] = "{375, 667}"
                },
                {  -- iPhone 6 Plus Portrait
                    ["UILaunchImageMinimumOSVersion"] = "8.0",
                    ["UILaunchImageName"] = "Default-736h",
                    ["UILaunchImageOrientation"] = "Portrait",
                    ["UILaunchImageSize"] = "{414, 736}"
                },
                {  -- iPhone 6 Plus LandscapeLeft
                    ["UILaunchImageMinimumOSVersion"] = "8.0",
                    ["UILaunchImageName"] = "Default-Landscape-736h",
                    ["UILaunchImageOrientation"] = "LandscapeLeft",
                    ["UILaunchImageSize"] = "{414, 736}"
                },
                {  -- iPhone 6 Plus LandscapeRight
                    ["UILaunchImageMinimumOSVersion"] = "8.0",
                    ["UILaunchImageName"] = "Default-Landscape-736h",
                    ["UILaunchImageOrientation"] = "LandscapeRight",
                    ["UILaunchImageSize"] = "{414, 736}"
                },
                {  -- iPad Pro Portrait
                    ["UILaunchImageMinimumOSVersion"] = "9.0",
                    ["UILaunchImageName"] = "Default-Portrait-1366",
                    ["UILaunchImageOrientation"] = "Portrait",
                    ["UILaunchImageSize"] = "{1024, 1366}"
                },
                {  -- iPad Pro Landscape Right
                    ["UILaunchImageMinimumOSVersion"] = "9.0",
                    ["UILaunchImageName"] = "Default-Landscape-1366",
                    ["UILaunchImageOrientation"] = "LandscapeRight",
                    ["UILaunchImageSize"] = "{1024, 1366}"
                },
                {  -- iPad Pro Landscape Left
                    ["UILaunchImageMinimumOSVersion"] = "9.0",
                    ["UILaunchImageName"] = "Default-Landscape-1366",
                    ["UILaunchImageOrientation"] = "LandscapeLeft",
                    ["UILaunchImageSize"] = "{1024, 1366}"
                },
            },
        },
    },
}