SplashScreen
Muestra y oculta la pantalla de la aplicación.
Métodos
- splashscreen.show
- splashscreen.hide
Acceso a la función
A partir de la versión 3.0, Cordova implementa nivel de dispositivo APIs como plugins. Uso de la CLI plugin comando, que se describe en la interfaz de línea de comandos, para añadir o eliminar esta característica para un proyecto:
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git
$ cordova plugin rm org.apache.cordova.core.splashscreen
Estos comandos se aplican a todas las plataformas específicas, sino modificar las opciones de configuración específicas de la plataforma que se describen a continuación:
-
Android (en
app/res/xml/config.xml)<feature name="SplashScreen"> <param name="android-package" value="org.apache.cordova.SplashScreen" /> </feature> -
(en iOS
config.xml)<feature name="SplashScreen"> <param name="ios-package" value="CDVSplashScreen" /> </feature>
Algunas plataformas que soportan esta característica sin necesidad de ninguna configuración especial. Ver soporte de plataforma para tener una visión general.
Configuración
Android
Copiar la imagen en pantalla splash en
res/drawabledel proyecto Android. El tamaño de cada imagen debe ser:Xlarge (xhdpi): al menos 960 × 720
- grande (IPAP): al menos 640 × 480
- medio (mdpi): al menos 470 × 320
-
pequeño (ldpi): por lo menos 426 × 320
Usted debe usar una imagen 9-parche para tu pantalla de presentación.
-
En el método
onCreatede la clase que extiendeDroidGap, agregue las dos líneas siguientes:super.setIntegerProperty("splashscreen", R.drawable.splash); super.loadUrl(Config.getStartUrl(), 10000);La primera línea establece la imagen que se mostrará como el splashscreen. Si llama a
splash.pngque no sea tu imagen, tienes que modificar esta línea. La segunda línea es la normalsuper.loadUrl, pero tiene un segundo parámetro que especifica un valor de tiempo de espera para la pantalla de bienvenida. En este ejemplo, la pantalla muestra durante 10 segundos. Para despedir a la pantalla una vez que la aplicación recibe el eventodeviceready, llame al métodonavigator.splashscreen.hide().
iOS
Copiar tus imágenes en pantalla splash en el proyecto iOS Resources/splash Directorio. Sólo agregar las imágenes de los dispositivos que desea apoyar, como el iPad o el iPhone. El tamaño de cada imagen debe ser:
- Default-568h@2x~iphone.png (640x1136 pixels)
- Default-Landscape@2x~ipad.png (2048x1496 pixels)
- Default-Landscape~ipad.png (1024x748 pixels)
- Default-Portrait@2x~ipad.png (1536x2008 pixels)
- Default-Portrait~ipad.png (768x1004 pixels)
- Default@2x~iphone.png (640x960 pixels)
- Default~iphone.png (320x480 pixels)
SplashScreen.show
Aparece la pantalla de splash.
navigator.splashscreen.show();
Descripción
Este método muestra la pantalla de la aplicación.
Plataformas soportadas
- Android
- BlackBerry 10
- iOS
- Windows Phone 7 y 8
- Windows 8
Ejemplo rápido
navigator.splashscreen.show();
Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
navigator.splashscreen.show();
}
</script>
</head>
<body>
<h1>Example</h1>
</body>
</html>
SplashScreen.Hide
Despedir a la splash screen.
navigator.splashscreen.hide();
Descripción
Este método despide la pantalla de la aplicación.
Plataformas soportadas
- Android
- BlackBerry 10
- iOS
- Windows Phone 7 y 8
- Windows 8
Ejemplo rápido
navigator.splashscreen.hide();
Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//
function onDeviceReady() {
navigator.splashscreen.hide();
}
</script>
</head>
<body>
<h1>Example</h1>
</body>
</html>
iOS chanfle
Ajuste de AutoHideSplashScreen del archivo config.xml debe ser false. Para retrasar oculta la pantalla splash durante dos segundos, agregue un temporizador como el siguiente en el controlador de eventos deviceready:
setTimeout(function() {
navigator.splashscreen.hide();
}, 2000);