離子和電容器 - 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 即可。

要輕松設置可拉伸區域，請勾選“顯示補丁”框，然后使用圖像外部的頂部和左側區域拖動並根據自己的喜好設置區域。 您應該能夠在徽標周圍看到綠色和粉紅色區域，但在實際徽標上看不到覆蓋顏色。

頂部和左側區域用於設置可拉伸區域，而底部和右側區域用於設置應包含內容的位置。 對於這個用例，您只想瞄准頂部和左側的黑色邊框。