iOS开发中如何让splash screen同时适配横屏和竖屏显示

基础适配逻辑 #

• 避免使用固定尺寸的满屏图片作为启动屏素材，优先采用纯色背景+居中独立logo的设计方案，可适配绝大多数屏幕比例，不会出现拉伸、裁剪问题
• 为横竖屏分别配置独立的布局资源，系统切换方向时会自动加载对应配置
• 禁止启动屏页面在方向切换时销毁重建，避免出现闪屏、布局加载异常

不同开发场景的具体操作 #

原生Android开发 #

1. 在res目录下新建layout-land文件夹，和默认layout目录下的启动屏布局文件保持完全相同的文件名，仅修改横屏适配的布局参数
2. 推荐使用Layer List绘制启动屏背景，无需依赖满屏图片：

<!-- res/drawable/splash_background.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <!-- 全屏填充背景色 -->
    <item android:drawable="@color/white"/>
    <!-- 居中放置logo，不会随屏幕拉伸变形 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_splash_logo"/>
    </item>
</layer-list>

3. 在AndroidManifest.xml中给启动页Activity添加配置，避免页面重建：

<activity
    android:name=".SplashActivity"
    android:configChanges="orientation|screenSize|keyboardHidden"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Flutter开发 #

使用flutter_native_splash官方推荐插件时，直接在pubspec.yaml中配置适配参数即可：

flutter_native_splash:
  color: "#ffffff" # 和启动页背景色一致
  image: assets/logo.png # 居中logo的路径
  android_gravity: center # 安卓端logo居中
  ios_content_mode: center # iOS端logo居中
  fullscreen: true
  android: true
  ios: true

配置完成后执行flutter pub run flutter_native_splash:create命令自动生成横竖屏适配的启动屏资源。

React Native开发 #

• 使用react-native-splash-screen插件时，安卓端在res/layout-land目录下新增横屏启动页布局，iOS端在LaunchScreen.storyboard中配置约束，保证logo居中、背景色填充全屏
• 在AndroidManifest.xml和iOS的Info.plist中开启对应横竖屏方向的支持

特殊场景处理 #

如果你的应用本身仅需支持竖屏使用，可以直接给启动页固定竖屏方向，无需做横屏适配：

• 安卓端在Activity配置中添加android:screenOrientation="portrait"
• iOS端在Xcode的Deployment Info中仅勾选Portrait方向

内容的提问来源于stack exchange，提问作者Lê Quốc Khánh