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

Question

语境

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

问题

问题在实现电容器的启动画面插件时开始。 通常，此实现是在您创建整个项目时从头开始的。 但是，它在宽高比较宽的设备（例如 Google Pixel 2 XL）或宽高比较宽的设备（例如iPad Pro）上效果不佳。 甚至在某些情况下，初始屏幕图像会四处移动或收缩/展开（在加载时）。

视觉解释

换句话说，本机实现导致闪屏图像如下图所示。 如果设备被拉伸或变胖，则图像纵横比不会保留。

Answer 1

（代表问题作者发布，以便将答案材料移动到正确的位置） 。

解决方案

所以目标是不要让这些图像被拉伸或变胖。 像在标准纵横比图像中一样保留图像。 要解决此问题并使启动图像响应屏幕设备和纵横比的天文多样性，您将必须操作：

• 电容器.config.json（离子项目）
• app.component.ts（离子项目）
• styles.xml（安卓项目）

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

{
 ...

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

...
}

#2 应用组件 TS（离子项目）

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（安卓项目）

<?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

Answer 2

如果你得到两次启动画面（闪烁）试试这个 style.xml (android)

<item name="android:background">@drawable/splash</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>

Answer 3

当我在 Android 设备上将我的应用程序从 Capacitor v3 升级到 Capacitor v4 时，闪屏再次变形。 我必须做的是在可绘制文件夹（启动画面的图像所在的位置）而不是常规的 png 文件中创建 9-patch-png 文件。

我按照本指南了解如何创建这些文件： https://www.joshmorony.com/creating-a-dynamic-universal-splash-screen-for-capacitor-android/

Answer 4

如果您使用纯色作为初始屏幕的背景，其他帖子中建议的解决方案可能对您有用，但如果您使用复杂图像（如渐变），则需要了解以下内容：

如果你想在你的启动画面和你的应用程序之间无缝过渡，你需要安装@capacitor/splash-screen ，因为 Android <item name="android:background">@drawable/splash</item>不会让你淡出退出启动屏幕，此外，当 Android 启动屏幕被您的 Ionic 应用程序替换时，您将在渲染 WebView 时体验短暂的空白屏幕。

@capacitor/splash-screen允许您通过选择自己何时应该隐藏启动屏幕以及淡出应该花费多长时间来缓解这种情况。

@capacitor/splash-screen不会替换本机 Android 初始屏幕<item name="android:background">@drawable/splash</item> ，而是创建一个 Android ImageView后立即打开本机启动画面），然后淡出到 WebView。

您可以隐藏原生 Android 初始屏幕以仅使用@capacitor/splash-screen之一，方法是为原生初始屏幕设置<item name="android:background">@null</item> ，但这被认为是不好的练习，因为每次启动应用程序时都会产生闲逛片刻的错觉（创建 Ionic 应用程序并在屏幕上显示所需的时间）。

最后，如果您希望原生 Android 启动屏幕覆盖整个屏幕并保持其纵横比，这根本是不可能的（至少对于 Android 11 及更早版本），您只能在应用程序已启动后使用ImageView后执行此操作.

所以...您可以采取以下措施来缓解这种情况：

首先，确保本机 Android 启动画面的配置和@capacitor/splash-screen创建的启动画面相同，因此当它从第一个到第二个时，您不会得到“调整大小”。

然后，您必须将启动画面分成两层，一层用于背景（可以拉伸以填充视口而不保持其纵横比），另一层用于您的徽标（或其他应该居中并保持的元素它的纵横比）。

然后，为您的初始屏幕创建一个自定义可绘制对象（即 drawable/launch_splash.xml），这将允许您创建一个包含任意多个图层的初始屏幕（在我们的案例 2 中，一个用于背景，一个用于徽标）。

最后，使用这个自定义的 drawable 代替原来的初始屏幕。

这是我所做的完整示例：

capacitor.config.ts

const config: CapacitorConfig = {
  // ...
  plugins: {
    // ...
    SplashScreen: {
      launchAutoHide: false,
      androidSplashResourceName: 'launch_splash',
    },
  },
};

（确保在对capacitor.config.ts进行任何更改后重新构建您的应用程序，或者自己将更改报告给capacitor.config.json文件）。

android/app/src/main/assets/capacitor.config.json

{
  // ...
  "plugins": {
    // ...
    "SplashScreen": {
      "launchAutoHide": false,
      "androidSplashResourceName": "launch_splash"
    }
  }
}

android/app/src/main/res/values/styles.xml

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

  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
  </style>

  <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:background">@null</item>
  </style>

  <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
    <item name="android:background">@drawable/launch_splash</item> <!-- launch_splash -->
  </style>

</resources>

android/app/src/main/res/drawable/launch_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- You can add as many layer as you want as long as they are drawable bitmaps or vectors -->
  <item android:drawable="@drawable/ic_launcher_background"/> <!-- will stretch to exactly match the viewport size -->
  <item android:drawable="@drawable/ic_launcher_foreground" android:gravity="center"/> <!-- will be centered in the viewport without stretching -->
</layer-list>

src/app/tabs/tabs.page.ts

export class TabsPage implements AfterViewInit {

  // ...

  public ngAfterViewInit(): void {
    // Do this in your app landing page
    // You may adjust the timing and wait for any promises or data required by your app,
    // so its fully ready before hiding the splash screen
    // I just added a 100ms delay to help the transition be smooth as it can be quite laggy when your app just finished being rendered
    setTimeout(() => {
      SplashScreen.hide({fadeOutDuration: 300});
    }, 100);
  }

}

Answer 5

解决方案

所以目标是不要让这些图像被拉伸或变胖。 像在标准纵横比图像中一样保留图像。 要解决此问题并使启动图像响应屏幕设备和纵横比的天文多样性，您将必须操作：

• 电容器.config.json（离子项目）
• app.component.ts（离子项目）
• styles.xml（安卓项目）

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

{
 ...

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

...
}

#2 应用组件 TS（离子项目）

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（安卓项目）

<?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

Answer 6

我支持多米尼克的回答。 您只需要创建 9-patch-png 文件并删除当前的 PNG 文件。

我用这个作为参考https://www.joshmorony.com/creating-a-dynamic-universal-splash-screen-for-capacitor-android/

最后一部分已经过时了。 您不需要编辑任何其他内容。 只要确保您在styles.xml中使用 @drawable/splash 即可。

要轻松设置可拉伸区域，请勾选“显示补丁”框，然后使用图像外部的顶部和左侧区域拖动并根据自己的喜好设置区域。 您应该能够在徽标周围看到绿色和粉红色区域，但在实际徽标上看不到覆盖颜色。

顶部和左侧区域用于设置可拉伸区域，而底部和右侧区域用于设置应包含内容的位置。 对于这个用例，您只想瞄准顶部和左侧的黑色边框。