Splash PhoneGap Build Solution


Quienes hayan tratado de implementar el patrón de Splash a través de los plugins de PhoneGap Build habrán tenido que lidear con el Bug que actualmente se encuentra incluido en la plataforma y básicamente es el relacionado con el pequeño desplazamiento que sufre el Splash y que la verdad se vé poco profesional.

Cuando se compila usando el entorno nativo como por ejemplo XCode se podría solucionar modificando la línea:


_imageView.frame = CGRectMake(0, 0, _imageView.image.size.width, _imageView.image.size.height); 

por

 _imageView.frame = CGRectMake(0, -20, _imageView.image.size.width, _imageView.image.size.height);

En la clase de implementación CDVSplashScreen que corresponde al plugín de Splash, el problema es que esta solución funciona siempre y cuando no uses Phonegap Build.

Bien, con el objetivo de solucionar el impace pensé en una estrategia para incluir un Splash decente que funcionará de forma correcta después de publicar la App en PhoneGap Build. La solución fué la siguiente:

- Incluir una imagen susceptible a ser desplazada, es decir que si se desplaza no se note el efecto. Esta imagen es necesaria incluirla ya que de lo contrario PhoneGap Build colocará una por default que obviamente no es nuestra.

- Al conjunto de páginas de mi App construidas con JQuery Mobile adicionarle una página que será el Splash con el diseño de nuestra marca corporativa, dicha página Splash será la páina inicial o de entrada a la aplicación, algo así como se muestra en el diagrama:



Es decir ahora no será mi "page-home" mi punto de entrada si no el Splash.

- Deshabilitar la propiedad de "auto hidden Splash" del archivo config.xml que es el archivo que incluimos al subir la App a PhoneGap Build:


<preference name="AutoHideSplashScreen" value="false" />


- A través de JQM le programo para que una vez iniciada mi App, permanezca unos segundos en mi página de Splash y posteriormente redireccione al "page home".


function init() {
    document.addEventListener("deviceready", onDeviceReady, true);  
}

var onDeviceReady = function() {
    navigator.splashscreen.hide();
    setTimeout(function() {
              document.location.hash = "#page-home";
    }, 500);
Previous
Next Post »

1 comments:

Click here for comments
Unknown
admin
17 de septiembre de 2014, 10:19 ×

oye la imagen que dices debe tener un nombre en especial, otra cosa la configuracion del splash debe quitarse del config.xml

Congrats bro Unknown you got PERTAMAX...! hehehehe...
Reply
avatar
Thanks for your comment