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

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

发表回复

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