虽然这件事 AI一句话就可以搞定,但是我们还是自己捣鼓一下。环境还是 Xcode >= 16.5。
启动图上不能跑代码,也不能做动画。首帧画出来之后,系统就把它撤掉。
先选一种做法
iOS 14 之后有两种方法可以设置启动图。
| 做法 | 介绍 |
|---|---|
UILaunchScreen | iOS 14 起写在 Info 里,底色加一张图 |
LaunchScreen.storyboard | 苹果推荐:LaunchScreen.storyboard(一套图适配所有 iPhone/iPad,自动布局) |
storyboard
在创建传统Storyboar项目时,项目中默认会有LaunchScreen.storyboard。
配置启动图
在Storyboar项目中,在project.pbxproj文件中默认带了下面配置:
INFOPLIST_KEY_UILaunchStoryboardName = LaunchScreen;
INFOPLIST_KEY_UIMainStoryboardFile = Main;
工程默认开了 GENERATE_INFOPLIST_FILE = YES,这个键会写进最终的 Info.plist,对应系统读的 UILaunchStoryboardName。
同时,你也可以手动配置,只需要在Info.plist里添加下面配置:
打开 General
选中项目 Target,切到 General。
找到启动图设置
在 App Icons and Launch Images 里定位 Launch Screen File。
选择启动图文件
下拉选择 LaunchScreen.storyboard,注意文件名称默认是LaunchScreen,注意空格。
Info.plist 写入 UILaunchStoryboardName = LaunchScreen。<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
手动声明会覆盖INFOPLIST_KEY_UILaunchStoryboardName,打包时会把这份 plist 和其余自动生成的键合并,不用额外处理,但如果遇到如果不生效可以删除此配置。
图片说明:
第一步:

第二步:

默认情况下是可视化布局,也可以在源码之间切换
LaunchScreen.storyboard 可以当画布拖,也可以当 XML 改。在左侧项目导航器里右键这个文件,选 Open As:
- Interface Builder:可视化画布,拖控件排版。双击文件时默认打开这个
- Source Code:底层 XML。要整段复制 storyboard 时用这个
居中 Logo
我在用 LaunchScreen.storyboard 时,常用的就是纯色背景,正中放一张 Logo。宽高写死、位置居中,各尺寸屏幕上差别很小,不用按机型各做一张。
Logo 先放进 Assets.xcassets。在资源目录上右键,选 New Image Set,名字用 LaunchLogo。把 @2x、@3x 拖进去。只有一张 PDF 时,选中这个 Image Set,右侧 Scales 改成 Single Scale,并勾上 Preserve Vector Data。
铺纯色背景
打开 LaunchScreen.storyboard。左侧大纲里点场景下的 View,点的是根视图,不是外层的 View Controller。
右侧 Attributes Inspector 里把 Background 改成纯色。这是根视图的底色,会铺满整屏。
要跟着浅色、深色模式变,就在 Assets 里再建一个 Color Set,背景选这个颜色名。写死的 RGB 不会随系统切换。
放上 Image View
View → Show Library(Shift + Cmd + L),搜 Image View,拖到根 View 上。
选中它,在 Attributes Inspector 里设置:
- Image 选
LaunchLogo。填资源名,不带扩展名 - Content Mode 选 Aspect Fit。Logo 按比例放进这块区域,不会被拉变形
约束到屏幕正中
选中 Image View,点画布右下角的 Align。勾上:
- Horizontally in Container
- Vertically in Container
点 Add 2 Constraints。这是相对根 View 的 centerX 和 centerY。
左侧大纲里展开这两条约束。第二项如果是 Safe Area,改成 Superview。Safe Area 会算上刘海和底部横条,Logo 会偏下一点。
再点旁边的 Add New Constraints,勾上 Width 和 Height,按设计尺寸填,比如 120 和 120,然后 Add 2 Constraints。
四条都在就够了:水平居中、垂直居中、宽度、高度。只做居中、不写宽高时,Image View 会按图片像素撑开,@3x 资源经常把 Logo 撑得很大。
画布上约束发黄或发红时,选中 Image View,点 Resolve Auto Layout Issues,选 Update Frames,让预览跟约束对齐。
UIImageView 可以,自定义类不行。这里也连不上 outlet,颜色和约束保存在 storyboard 里即可。单图铺满
启动图本身就是一整张画面时,用一张图贴满屏幕。Logo 和文案都画在这张图里,storyboard 上不再单独放控件。
图同样放进 Assets.xcassets,Image Set 起名 LaunchBackground。按要支持的最大屏幕出图。小屏会裁掉四周,主体放在画面中间。
放上 Image View
Shift + Cmd + L 拖一个 Image View 到根 View 上。
Attributes Inspector 里:
- Image 选
LaunchBackground - Content Mode 选 Aspect Fill。图按比例放大,直到盖住整块区域,多出来的边被裁掉
- 勾上 Clip to Bounds,裁切停在 Image View 自己的边缘
四边贴到屏幕
选中 Image View,点 Add New Constraints。取消 Constrain to margins,上、下、左、右都填 0,四条都勾上,点 Add 4 Constraints。
大纲里逐条看这些约束,参照项改成 Superview。留在 Safe Area 上时,刘海和底部横条外面会露出一条底色。
这四条已经决定宽高,不要再加 Width、Height。多出来的尺寸约束会和四边打架,画布变红。
发黄或发红时,同样用 Update Frames 对齐预览。
UILaunchScreen
iOS 14 之后可以不靠 storyboard。启动图写在 Info 的 UILaunchScreen 字典里,系统只认一个底色和一张图。图按自己的点尺寸画在正中,这里没有约束,也没有 Content Mode。
居中 Logo 就是这套键的本来用法。单图铺满也能做:在 Assets 里把图切成可拉伸,系统会把它拉到屏幕边缘。拉满时比例会变。要等比裁切、不变形,用上面 storyboard 的 Aspect Fill。
两套配置同时在时,系统用 storyboard。切过来之前,先清掉 UILaunchStoryboardName。
配置启动图
清掉 storyboard
Target → General → App Icons and Launch Images,把 Launch Screen File 清空。
Xcode 16 里这个下拉有时清完又弹回来。打开 project.pbxproj,删掉 INFOPLIST_KEY_UILaunchStoryboardName。Info.plist 里如果还有 UILaunchStoryboardName,一并删掉。
加上 Launch Screen 字典
Target → Info → Custom iOS Target Properties。点 +,添加 Launch Screen,类型选 Dictionary。
展开后再加子键。居中 Logo 和单图铺满用到这三个:
| 界面上的名字 | 键 | 作用 |
|---|---|---|
| Background color | UIColorName | Assets 里 Color Set 的名字,用来铺底色 |
| Image Name | UIImageName | Assets 里 Image Set 的名字 |
| Image respects safe area insets | UIImageRespectsSafeAreaInsets | 图是否缩在安全区内 |
名字和 UIImage(named:)、UIColor(named:) 用的是同一个字符串,不带扩展名。
<key>UILaunchScreen</key>
<dict>
<key>UIColorName</key>
<string>LaunchBackground</string>
<key>UIImageName</key>
<string>LaunchLogo</string>
<key>UIImageRespectsSafeAreaInsets</key>
<false/>
</dict>
工程开了自动生成 Info.plist 时,Info 里这份字典会和生成结果合并。
UIColorName 时,底色是系统的 systemBackground,会随浅色、深色模式变。居中 Logo
底色加一张不拉伸的图。图出现在屏幕正中,四周是底色。
Color Set 起名 LaunchBackground,Image Set 起名 LaunchLogo。显示出来的点宽 = 像素 ÷ scale。想要 120pt 的 Logo,@3x 槽就放 360×360。这张图保持不切片。菜单 Editor → Show Slicing 里如果已经 Start Slicing,图会被拉满屏幕。
写入颜色和图片名
Background color 填 LaunchBackground,Image Name 填 LaunchLogo。
相对整屏居中
Image respects safe area insets 设为 NO。图的中心在整屏中心,对应 storyboard 里相对 Superview 的 centerX、centerY。
设为 YES 时,中心改到安全区里面。刘海和底部横条会把 Logo 顶偏一点,对应 storyboard 里约束到 Safe Area。
透明像素会透出 LaunchBackground。浅色、深色各做一套时,给 Color Set 和 Image Set 都加上 Dark 外观,系统会自己选。
单图铺满
UIImageName 指到一张切过片的图时,系统把可拉伸的那一块放大到布局区域的四边。这里选不了 Aspect Fit 或 Aspect Fill。
Image Set 起名 LaunchBackground。按最大的屏幕出图,主体放中间。边缘最好是能被拉开的纯色或简单纹理。
把图切成可拉伸
选中槽里的那张图,菜单 Editor → Show Slicing,点图中间的 Start Slicing,选横竖一起切。
右侧 Attributes Inspector 里把 Left、Right、Top、Bottom 都改成 0,Center 选 Stretch。中间可拉伸区域的宽高设成这张图自己的像素尺寸,标灰的排除区收成 0。灰色部分不会画出来。
放了 @2x、@3x 的话,每个槽都切一次。
拉到物理边缘
Image Name 填 LaunchBackground。Image respects safe area insets 设为 NO,拉伸区域是整屏。设为 YES 时,图停在安全区里,外面露出底色。
不切片的图只会按点尺寸待在中间。碰巧和某一台手机一样大,换一台就对不齐。
<key>UILaunchScreen</key>
<dict>
<key>UIImageName</key>
<string>LaunchBackground</string>
<key>UIImageRespectsSafeAreaInsets</key>
<false/>
</dict>
改了图却还是旧的
启动图会被系统缓存。换了资源,模拟器里往往还是上一张。
按这个顺序清:
- 在模拟器里删掉 App
- Xcode 菜单 Product → Clean Build Folder(
Shift + Cmd + K) - 重新
Cmd + R
还是旧图的话,用模拟器菜单 Device → Erase All Content and Settings...,或者直接重启模拟器。真机上删掉 App 之后,有时还要重启手机。
只换像素、资源名不变时,缓存更顽固。把 Image Set 改个名字,Info 或 storyboard 里的引用一起改掉,一般就能看到新图。
和第一个界面接上
启动图停留的时间很短。它和根控制器差得太多,中间会闪一下。
底色、Logo 的位置尽量和 ViewController 第一帧一样。需要一段品牌动画时,在根控制器里用同一张图当第一帧,等 viewDidAppear 再动。动画写在启动图上不会执行。
根控制器怎么挂,还是看 创建基于 UIKit 的原生 iOS 项目 里 SceneDelegate 那一段。