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

2024-05-03

Context

这与闪屏图像响应能力有关，根据我的研究，它之所以发生是因为缺少文档电容器文档 - 启动画面 https://capacitorjs.com/docs/apis/splash-screen.

Problem

当实现电容器的闪屏插件时，问题就开始了。通常，此实现是在创建整个项目时从头开始进行的。然而，它在具有拉伸的宽高比（例如 Google Pixel 2 XL）或具有fat宽高比（例如 iPad Pro）。甚至在某些情况下，启动屏幕图像会四处移动或缩小/扩展（加载时）。

视觉解释

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

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

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://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-650835957
https://github.com/ionic-team/capacitor/issues/1627#issuecomment-707188787 https://github.com/ionic-team/capacitor/issues/1627#issuecomment-707188787

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Android

angular

ionicframework

splashScreen

capacitor