Splash publicacion - CGastrell/phonegap GitHub Wiki

Para poder configurar los splash screens necesitamos varios pasos:

• copiar los archivos
• configurar correctamente la seccion de splashes en config.xml
• instalar el plugin org.apache.cordova.splashscreen
• [tal vez] agregar unos tags preference en config.xml
• [tal vez] agregar un paso de inicializacion en nuestro index.js

Para los splash hice un set minimo, todos portrait, estas son imagenes mas grandes, asi que solo inserto una aca y el resto les doy las URL. Descarguenlas y guardenlas en www/res/screen/android

https://raw.githubusercontent.com/codenautas/interview-recorder/cgastrell/irec/www/res/screen/android/screen-mdpi-portrait.png

https://raw.githubusercontent.com/codenautas/interview-recorder/cgastrell/irec/www/res/screen/android/screen-hdpi-portrait.png

https://raw.githubusercontent.com/codenautas/interview-recorder/cgastrell/irec/www/res/screen/android/screen-xhdpi-portrait.png

La seccion de splashes de nuestro config.xml es mas desastrosa que la de iconos:

    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />

De esta seccion no sirve nada, esta todo configurado para PhonegapBuild y no es compatible con el compilador propio que usamos. Borrenla.

En su lugar vamos a definir un tag platform con la propiedad name="android":

<platform name="android">
</platform>

Y dentro vamos a incluir tags splash a cada uno de las imagenes que descargaron:

<platform name="android">
  <splash src="www/res/screen/android/screen-ldpi-portrait.png" density="port-ldpi"/>
  <splash src="www/res/screen/android/screen-mdpi-portrait.png" density="port-mdpi"/>
  <splash src="www/res/screen/android/screen-hdpi-portrait.png" density="port-hdpi"/>
  <splash src="www/res/screen/android/screen-xhdpi-portrait.png" density="port-xhdpi"/>

  <splash src="www/res/screen/android/screen-hdpi-landscape.png" density="land-hdpi"/>
  <splash src="www/res/screen/android/screen-ldpi-landscape.png" density="land-ldpi"/>
  <splash src="www/res/screen/android/screen-mdpi-landscape.png" density="land-mdpi"/>
  <splash src="www/res/screen/android/screen-xhdpi-landscape.png" density="land-xhdpi"/>

</platform>

Si bien nosotros no copiamos nuevas imagenes para landscape, a partir de que usamos el plugin vamos a necesitar indicar donde estan esas imagenes. El proyecto ya las tiene, son las imagenes de Cordova que ven cuando arranca la aplicacion, aca solo estamos siendo explicitos para que no genere errores.

Documentacion

Ahora debemos instalar el plugin, se acuerdan? Esperemos que la internet nos acompañe:

phonegap plugin add org.apache.cordova.splashscreen

Vamos a verificar que tengamos configurado como queremos el plugin. En la seccion donde estan los tag preference deberiamos tener estas, sino, las agregamos

    <preference name="SplashScreen" value="screen" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="SplashScreenDelay" value="10000" />

Finalmente vamos a editar el archivo index.js. Segun documentacion, una vez instalado el plugin, tendremos disponible esta variable:

navigator.splashscreen

La cual tiene 2 metodos: show() y hide() con obvios efectos.

Por defecto se muestra el splash, lo que necesitamos hacer es decirle a nuestra aplicacion cuando queremos ocultarlo. Si no lo hacemos, se ocultara segun configuramos la preferencia SplashScreenDelay, que expresa cuantos milisegundos esperar antes de ocultarla. Es verdad que tambien configuramos AutoHideSplashScreen en false, pero a mi no me funciono, se esconde igual (lo cual no me molesto, pero si me molesto que no funcionara como dice que deberia).

Cuando vamos a ocultar el splash? Cuando terminemos de inicializar todo. Nuestro ultimo paso de inicializacion es llamando a fileApi.initialize(), el cual ejecuta un callback. Vamos poner la llamada justo antes de cerrar el callback de fileApi.initialize():

  fileApi.initialize(function(err, apiRef){
    if(err) {
      console.log('file api error');
      console.log(err);
      return;
    }

    guias.initialize();
    entrevistas.initialize();

    recordApi.initialize();

    document.addEventListener('pause', function(){
      recordApi.stop();
      revisionApi.stop();
    });


    navigator && navigator.splashscreen && navigator.splashscreen.hide();
  });

A probar:

phonegap prepare android
phonegap run android

Ref: Splashes