Splash screens not working in PhoneGap Build

问题:

I can't get splash screens working at all, in either Android or iOS.

I'm using PhoneGap Build and I've set config.xml like this, which is for v3.0.0 now.

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
    xmlns:gap = "http://phonegap.com/ns/3.0.0"
    id        = "myid"
    version   = "1.0.0">


<name>myname</name>

<description>
    mydesc
</description>

<author>
</author>

<preference name="permissions" value="none"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="android-minSdkVersion" value="14" />       <!-- JB 4.0 -->
<preference name="fullscreen" value="true" />

<icon src="icon.png" />
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:splash src="splash.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="splash.png" gap:platform="android" width="320" height="480" />

</widget>

I've taken the personal info out.

The app works fine otherwise but I've never got the splash screen to work, ever, even when it was for PhoneGap 2.7.0 and 2.9.0 and just Android.

The splash.png and icon.png are actually the same image at the moment. I've tried with different ones though. I only started testing on iOS recently and the PhoneGap Build default icon only seems to come up in iOS do I decided I need to put a custom splash screen.

I cannot find an example of where or how you use the tags, except the official docs and even there they show an example config.xml and the tags but they don't say where to put them or if there are any other rules.

回答1:

For iOS

You will need to copy your splash screen images into the platform directory, they will not automatically be copied from www/res/.

For iOS this will be:

platform/ios/[name of your project]/splash/

These should be the PhoenGap default splashscreens.

For Android

The documentation seems a bit lacking for this. But you need to create the relevant folders in your platform/android/res folder. These should be:

• platform/android/res/drawable-land-hdpi
• platform/android/res/drawable-land-ldpi
• platform/android/res/drawable-land-mdpi
• platform/android/res/drawable-land-xhdpi
• platform/android/res/drawable-land-xxhdpi
• platform/android/res/drawable-port-hdpi
• platform/android/res/drawable-port-ldpi
• platform/android/res/drawable-port-mdpi
• platform/android/res/drawable-port-xhdpi
• platform/android/res/drawable-port-xxhdpi

Inside those folders you will need to upload your splash screen, make sure it is called splash.png, otherwise it will not be picked up by the application.

One final and important step, you need to add the following line to your main Activity file, this can be found within your android project folder and will be named the same name as your application. The file extends the Cordova default activity file which explains about extending and adding the splash screen. The file will be:

platforms/android/src/com/[your app name]/[your app name].java

It should look something like this:

package com.your.project;

import android.os.Bundle;
import org.apache.cordova.*;

public class YourProject extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html")
    }
}

But needs to be changed to:

package com.your.project;

import android.os.Bundle;
import org.apache.cordova.*;

public class YourProject extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        super.setIntegerProperty("splashscreen", R.drawable.splash);
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html")
    }
}

Notice the additional line added:

super.setIntegerProperty("splashscreen", R.drawable.splash);

Official documentation is here, http://docs.phonegap.com/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens, but it doesn't seem to cover all the necessary steps.

回答2:

Based on your comment below your question, here is what I recommend.

1. Create a small black square and save the image as splash.png
2. Place splash.png in your root folder (the same location as your index.html)
3. Use this in your config.xml <gap:splash src="splash.png" />

You will now have a solid black splash screen that will look like there is no splash screen.

回答3:

So this issues seems to be fixed now.

As you can see from my initial question I was coding the config wrong. The PGB versions selection code should not be "xmlns:gap = "http://phonegap.com/ns/3.0.0" but:

<preference name="phonegap-version" value="3.0.0" />

I do blame PGB a bit for this as the docs weren't clear (though they are improving).

Anyway - get your splash screens working use the info here.

I'm now using PGB 3.3.0 and it seems all fine.