SwiftUI Launch Screen启动页
SwiftUI Launch Screen启动页

SwiftUI Launch Screen启动页

在 iPhone 应用中,当用户打开应用时会看到一个短暂的启动画面,这个画面被称为 Launch Screen(启动页)。它是用户在应用完全加载之前看到的第一个界面,通常用于提升用户体验和增强品牌印象。

启动页的作用

1、给用户立即的视觉反馈:告知用户应用正在启动,而不是崩溃或没有响应。

2、减少等待感:通过展示简单的图形或品牌元素,让加载过程显得更流畅。

3、品牌宣传:展示应用的 logo 或核心元素,可以强化品牌形象。

创建LaunchScreen.storyboard

1、确认项目是否已经有 LaunchScreen.storyboard

打开项目,检查是否已有 LaunchScreen.storyboard 文件(通常位于项目的主目录)。

如果没有,右键项目目录,选择 New File > Storyboard,命名为 LaunchScreen.storyboard。

2、配置项目的启动页文件

打开 Info.plist 文件。

新增键值为 Launch screen interface file base name:LaunchScreenView

需要注意的是,Value值需要与创建的Launch Screen文件的名称一致。

编辑LaunchScreen文件

打开文件后,可以看到View视图是通过左侧的列表按钮进行控制的。

如果需要新增按钮或图片,可以点击Xcode右上角的新增按钮。

双击或者拖动到Lauch Screen文件中。

下面是Launch Screen工具栏的介绍,需要通过工具栏进一步控制启动页。

在编辑启动页内容时,主要应用的是工具栏的右侧功能:对齐、添加新容器、解决自动布局问题和嵌入。

例如,我们想要实现一个Sketch设计的界面效果:

首先点击启动页右上角的“+”号,找到Image组件:

按住“Image View”按钮,拖动到左侧的View列表中:

点击启动页中的图片,在右侧边栏中找到“Show the Attributes inspector”,找到Image字段,点击字段右侧的下拉按钮,可以选择Xcode项目中Assets图库照片。

再新建一个Text Field组件,并拖动到同样的View位置:

首次添加的Text Field组件默认带有一个边框,需要在右侧边栏的配置中取消边框。

下面是调整图标的大小,点击视图中的图标,在右侧边栏中找到“Show the Size inspector”,在这里调整图标的高度和宽度。

调整完成之后,图标和文字分散在视图中。

接着需要通过容器控制在视图中的布局。

按住Shift键,选中图标和文字。

点击工具栏中的对齐按钮,选择水平和垂直在容器中。

这时图片放大以及文字全部居中在视图中间。

同时,在启动页的文件导航栏中新增了一个Constraints文件夹。

在启动页左侧文件导航栏中,按住Shift键选择文字和图标。

在工具栏中找到“Add New Constraints”,设置Width和Height的数值。

在设置高度约束后,图标和文字都变得很小。

接着调整约束的位置。

从约束的文字描述上可以看到,图标和文字的centerX、centerY全部等于centerX和centerY。后者的centerX和centerY会根据具体的对象进行调整。

为了让图标和文字在视图的底部,我设置两者的centerY为Bottom:

设置后,图标和文字全部在视图的底部对齐居中。

调整右侧的“Constant”为-80,图标和文字会向上偏移80点。

再单独设置图标和文字的centerX常量数值。

最终的效果图如下。图标和文字大小如有需要,还可以再单独调整。

横屏的显示效果:

iPad显示效果:

可以看到在Constraints约束下,文字和图标都可以在底部对齐,通过控制常量设置图标和文字的偏移距离,从而实现启动页的编辑以及适配各机型的显示效果。

本地化语言

如果想要进一步适配应用显示的文字内容,支持多语言文字,需要设置不同语言的启动页,因为启动页中的文本好像不支持本地化显示

在这里,我单独创建了简体中文和繁体中文的启动页。

检查Xcode项目中是否含有String File文件,如果没有该文件,则创建一个String File文件。

在该文件右侧选择本地化语言列表。

在对应的语言文件中,新增UILaunchStoryboardName字段。

"UILaunchStoryboardName" = "启动页名称";

注意,如果不添加 ; 可能会报错。

在截图中,我的UILaunchStoryboardName后面是简体中文的启动页名称。

本地化实现效果:

这里可能存在疑惑,那就是为什么Info配置了“Launch screen interface file base name字段”,在String File文件中,还需要配置“Launch screen interface file base name”,这里是否存在重复?

经过测试发现,如果仅在String File个别语言文件中配置了“Launch screen interface file base name”字段,那么应用只会在个别语言下显示启动页。

如果在Info中配置了“Launch screen interface file base name”字段,并设置了默认值。那么如果应用语言的String File没有配置“ Launch screen interface file base name ”字段,则显示Info配置下的“Launch screen interface file base name”启动页。

实际上就是Info设置了默认的启动页,如果在 String File 中单独设置启动页,则显示对应String File的启动页,如果String File没有设置启动页,则显示Info中的启动页,两者并不冲突。

需要注意的是,如果应用在启动后,显示中文的启动页。用户修改了手机的系统语言,重新打开应用,仍然会显示中文的启动页。这个问题可能是一个BUG,只有卸载重装应用,应用才会重新识别系统语言并显示对应的本地化启动页。

因此,如果iOS还没有新启动页本地化配置方法,那么还是建议使用图片或统一的文字来显示启动页,避免用户切换语言后,显示其他语言的启动页。

总结

通过上述内容可以实现应用的启动页效果,如果感觉比较复杂,也可以尝试使用图片的方式来显示,还需要注意浅色和深色外观等场景下的展示,更多细节还需要自己摸索。

相关文章

1、iOS开发APP启动页文字国际化无效的问题:https://www.jianshu.com/p/53e334a7c9a0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

2、启动页面国家化(Launch Screen Localized Image):https://www.jianshu.com/p/e704580f1a3e

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开放者。

3条评论

  1. Jack Sparrow

    学到了以下几个知识:
    1. 如何创建 iOS 启动页。
    2. 熟悉启动页的操作界面。
    3. 如何添加约束。
    4. 如何设置垂直水平居中。

    本来想让题主补充如何设置全屏页背景,但我发现新建一个Image
    View 组件后手动拖拽填充满屏幕就行了,感觉还是很简单就算了。

    不过可以补充以下内容,因为这个评论系统放不了图片所以我就直接展示配置启动页时会出现的四个警告含义。

    – Update frames(更新框架)
    根据当前设置的约束更新视图的位置和大小
    不改变约束本身,只改变视图的实际显示位置
    适用场景:当你手动移动了视图,想让视图回到约束定义的位置

    – Update constraints(更新约束)
    根据视图当前的位置和大小更新约束的值
    保持视图当前位置不变,修改约束以匹配当前位置
    适用场景:当你调整了视图位置,想让约束适应新位置

    – Reset to suggested constraints(重置为建议的约束)
    删除所有现有约束
    根据视图当前位置自动添加新的推荐约束
    适用场景:当约束混乱或冲突时,想重新开始设置约束

    – Apply to all views in container(应用到容器内所有视图)
    将选择的操作应用到当前容器中的所有子视图
    可以和上面三个选项中的任意一个配合使用
    适用场景:需要批量处理多个视图的约束问题

    – 使用建议:
    如果只想调整视图位置:使用 Update frames
    如果想保持当前布局:使用 Update constraints
    如果约束太乱想重新开始:使用 Reset to suggested constraints
    如果需要处理多个视图:勾选 Apply to all views in container

    1. 不错的建议。

      只是如果不添加约束,Image手动拖住填满屏幕可能不适应其他机型?因为SE、iPhone15以及iPhone15 Pro Max这三种机型的分辨率都是不一样的,此外如果设置横屏或iPad,显示的图片可能也会存在问题。

      因此,我的考量是如果不设置约束,手动拖拽可能无法适配各种机型和横竖屏的情况。

      1. Jack Sparrow

        在我刚留言完之后我确实遇到的了这个不同设备自适应问题,看来是我没有考虑太多。

        遇到这个问题之后,我首先做的是添加约束,上下左右方向的Constant (边缘约束值)都设置为 0 确保背景图紧贴屏幕边缘,但是遇到一个新问题:顶部和底部的安全区域无法填充(对于全屏启动图)。

        启动图自适应解决方案:约束编辑器中设置上下左右四个边距都为0。

        具体步骤:
        打开Add New Constraints面板,设置约束:
        首先,取消勾选底部的”Constrain to margins”选项(这很重要!)
        然后设置四边约束:
        在约束编辑器中设置上下左右四个边距都为0
        点击四边的红色线条激活这些约束
        确保约束值都设为0
        具体操作:
        选中背景图片
        点击底部工具栏的”Add New Constraints”按钮(方形带线的图标)
        取消勾选”Constrain to margins”
        点击上下左右四条线使其变为红色
        设置所有数值为0
        点击”Add Constraints”按钮
        这样设置后,背景图会扩展到整个屏幕,包括安全区域外的部分。关键是要取消”Constrain to margins”选项,这样约束才会直接连接到视图边缘而不是安全区域。

        安全区域填充解决方案:Show the Attributes inspector 设置约束时,要确保连接到View的边缘,而不是Safe Area

        具体操作:
        Superview vs Safe Area:
        Superview 是指整个视图容器,延伸到屏幕边缘
        Safe Area 是系统定义的安全区域,会避开刘海、状态栏等
        对于启动页:
        需要背景图完全填充屏幕
        应该连接到Superview而不是Safe Area
        这样才能实现真正的全屏效果
        具体操作:
        选中约束
        在右侧属性面板中
        将Second Item从”Safe Area.top”改为”Superview”
        对其他三边约束也做相同修改
        这样设置后:
        背景图会延伸到整个屏幕
        不会受Safe Area的限制
        实现真正的全屏启动页效果
        记住:启动页的所有边缘约束都应该连接到Superview,而不是Safe Area。

回复 Jack Sparrow 取消回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注