Dienstag, Januar 21, 2020

Wie kann ich ein Hintergrundbild einstellen, auf die WebView auf Cordova/PhoneGap für Android?

Ich bin nicht nur auf der Suche nach dem Splash-Screen Funktionalität in der API; wenn möglich, möchte ich den HTML-Inhalt verwenden Sie einen transparenten hintergrund, und schlanke auf dem WebView zu liefern hintergrund-Bild. Ist so etwas möglich?

Abgesehen, kann ich wenigstens eine Hintergrundfarbe einstellen, die auf die WebView, das „durchscheinen“ zu HTML-Inhalten?

InformationsquelleAutor Luke Dennis | 2013-08-05

3 Kommentare

  1. 5

    Herausgefunden nach dem Graben in Cordova-source-und Android-docs. In src/com/…/MyApp.java:

    public class MyApp extends DroidGap
    {
        @Override
        public void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
    
            super.loadUrl(Config.getStartUrl(), 20000);
    
            //Must be after loadUrl!
            super.appView.setBackgroundColor(0x00000000); //transparent RGB
            super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    
            //Put background image in res/drawable/splash.jpg
            Drawable theSplash = getResources().getDrawable(R.drawable.splash);
            super.root.setBackground(theSplash);
        }
    }

    Und CSS:

    html,
    body,
    .transparent { background-color: transparent !important; }
    • Einfach nur neugierig, wie, warum, den Sie hinzufügen, den hintergrund Bild, um die webview statt der html-Seite? Sowas scheint zu nehmen, um zu einer der großen Vorteile von Cordova: cross-Plattform.
    • Um den gleichen Effekt wie background-attachment: fixed oder position: fixed, die beide problematisch sind in Android WebView-Umgebung.
    • Oh ich sehe…hmm, schade gibt es nicht eine bessere HTML5 einzige Weg, um zu erreichen, dass.
  2. 1

    Ich bin mir nicht sicher über die Einstellung eines Bildes, aber Sie können die hintergrund-Farbe mit diesem:

        <preference name="backgroundColor" value="0x00000000" />

    Fügen Sie diese in: res/xml/config.xml

    • Noch ein weisser hintergrund auf Android 2.3 / Cordova 2.8.1, mit einem leeren index.html und * { background:transparent !wichtig; }.
    • versuchen Sie auch das hinzufügen von code, um die config.xml die Datei liegt in /www
    • Soweit ich weiß, die Standard-weiß-Bildschirm, die Sie sehen, ist der hintergrund der webview und zu ändern, die Sie verwenden würden, CSS (inline-styles), angewandt auf das body-element ( body { background-color: #000; } )
    • Dies ist die gesamte index.html (ie, styling der auto-generiert <body> – tag): <style>html, body, * { background: transparent !important; }</style> ich versuche, das WebView hintergrund „durchscheinen“.
    • Ich bin nicht sicher, ob das möglich ist, aber dieser thread kann das sein, was du suchst: stackoverflow.com/questions/10919223/…
  3. 1

    Können Sie automatisieren möchten, einige davon in Ihrem Aufbau, aber das wird funktionieren. Es ist, wie ich ein splash-screen angezeigt in Android, während die app geladen hat (und nicht, nachdem es geladen war, oder mit einer künstlichen Verzögerung)…

    Erstellen Sie eine Datei in platforms/android/res/values/styles.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="MyTheme" parent="@android:style/Theme.NoTitleBar">
            <!-- set the splash screen as the background image on all windows -->
            <item name="android:windowBackground">@drawable/screen</item>
        </style>
    </resources>

    In Ihrem platforms/android/Manifest.xml ersetzen Sie das Thema mit @style/MyTheme

    In Ihrem config.xml Datei fügen Sie die folgenden zwei Zeilen

    <!-- make the webview transparent -->
    <preference name="backgroundColor" value="0x00000000" />
    <!-- cordova will copy the splash screen file to screen.png, 
         but seems to ignore it after then 
    -->
    <splash src="res/splash/splash.png"/>

    Offensichtlich benötigen Sie einen Spritzer.png-Datei zu verwenden.

Kostenlose Online-Tests