-
Notifications
You must be signed in to change notification settings - Fork 1
Splash publicacion
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
enconfig.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
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.
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
- Repaso y conceptos basicos
- Ejercicios para repasar
- Problematica de desarrollo mobile
- Phonegap
- Requerimientos e instalacion
- Phonegap CLI
- [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
- Plugins
- Hello world
- Estructura de un proyecto Phonegap
- Plugin Device
- Debugging
- Incorporando un framework CSS
- Plugin Vibration
- Sumando partes
- Plugin Battery Status
- Un poco de jQuery
- jQuery Mobile
- Navegacion
- Plugin Dashboard
- Revision de Plugin Dashboard
- Paginas extra
- ToDo
- Persistencia
- ToDo Persistente
- Plugin Camera
- Opciones de camara
- App Mi Galeria
- Revision de Galeria
- Plugin File
- Escribir y leer texto
- Escribir archivos binarios
- Guardando fotos
- Debugger: weinre
- Inspeccionar con weinre
- Phonegap Developer App
- Refactor de apps
- Plugin Media
- Pruebas con audio
- Control y monitoreo de audio
- Encapsular play/pausa
- Hacks
- Formato de tiempos
- Grabar y reproducir
- Proyecto Integrador
- Revision de interfaz
- Interfaz basica
- Entrevista: modelo
- Funcionalidad: revision
- Seleccion de framework
- iRec: navegacion
- iRec: fileApi
- iRec: guias
- iRec: entrevistas
- iRec: recordApi
- iRec: helpers
- iRec: mediaApi
- iRec: inicializar paginas
- iRec: refactor
- iRec: mediaApi refactor
- iRec: recordApi refactor
- iRec: helpers
- iRec: guias.js
- iRec: entrevistas.js
- iRec: crear guias
- iRec: re-inicializando
- iRec: re-ordenando
- iRec: pendientes
- iRec: reporte ux
- iRec:revision: volver
- iRec:entrevista: volver
- iRec:revision: cambios
- iRec:revision: stop
- iRec:revision: Rew 10"
- iRec:revision: tag Go
- iRec: limpieza
- Firma de apps
- Android
- Generacion de key
- Firma de apk
- Alineacion de zip
- Firmar con Phonegap
- iOS
- Detalles finales
- Config.xml
- Iconos
- Splash