离子和电容器 - Android 启动画面响应能力

Question

语境

这与闪屏图像响应能力有关，根据我的研究，这只是因为Capacitor Docs - Splash Screen 中缺少文档。

问题

问题是在实现电容的闪屏插件时开始的。通常，当您创建整个项目时，此实现是从头开始的。然而，它没有/没有对具有设备工作良好拉伸纵横比（例如谷歌像素2 XL）或具有设备脂肪纵横比（例如iPad的专业版）。甚至在某些情况下，启动画面图像会四处移动或缩小/扩展（加载时）。

视觉说明

换句话说，本机实现导致启动画面图像就像下图一样。如果设备被拉伸或变胖，则不会保留图像纵横比。

Answer 1

所以我们的目标是不让这些图像被拉伸或变胖。像标准宽高比图像一样保留图像。要解决此问题并使启动图像能够响应屏幕设备和宽高比的天文数字，您将必须进行操作：

• Capacitor.config.json（离子项目）
• app.component.ts（离子项目）
• styles.xml（Android 项目）

#1 电容器配置 JSON（Ionic 项目）

{
 ...

    "plugins": {
        "SplashScreen": {
            "launchAutoHide": false,
            "androidScaleType": "CENTER_CROP",
            "splashFullScreen": true,
            "splashImmersive": false,
            "backgroundColor": "#ffffff" // YOUR SPLASH SCREEN MAIN COLOR
        }
    }

...
}

#2 应用程序组件 TS（Ionic 项目）

import { Plugins } from '@capacitor/core'
const { SplashScreen } = Plugins;
...

export class AppComponent implements OnInit {
    ...

    // DON'T USE SPLASHSCREEN SHOW METHOD ANYWHERE
    // SplashScreen.show(); 

    initializeApp() {
        this.platform.ready().then(async () => {
            SplashScreen.hide();
        });
    }
}

#3 Styles.xml（Android 项目）

<?xml version="1.0" encoding="utf-8"?>
<resources>
...

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
        <item name="android:windowNoTitle">false</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowIsTranslucent">true</item>
    </style>
<resources>

就是这样！现在，所有图像都保留了宽高比，并且它们将始终响应所有设备。

参考

• https://capacitorjs.com/docs/apis/splash-screen
• https://github.com/ionic-team/capacitor/issues/1627#issuecomment-650835957
• https://github.com/ionic-team/capacitor/issues/1627#issuecomment-707188787