Vamos a configurar nuestra Splash View o Splash Screen que es la primera
pantalla que se visualiza al ejecutar una aplicación Generalmente en la Splash screen se muestra el logo o una imagen de la empresa además de la versión del software. En este tutorial crearemos una Splash screen temporizada y con la opción de
ser saltada al toque del usuario. Es muy importante que se configure la
opción Sizing en Responsive es decir pantalla ajustable pues vamos a manejar algunas dimensiones en porcentajes.
Utilizamos una imagen de 128 x 128 píxeles como logo e icono de lanzamiento de la aplicación y hemos fijado la orientación de la pantalla a vertical por último activamos la opción para
previsualizar en modo Tableta lo cual nos facilitará el diseño con los
componentes En el diseño de nuestra Splash screen usaremos el componente Canvas con dimensiones iguales a la pantalla para el ancho y alto usamos valores porcentuales para asegurar que nuestro diseño se ajuste el tamaño de las pantallas de los diferentes dispositivos, eso es lo que proporciona la característica Responsive El renombrar los componentes es una
buena práctica el momento realizar la programación de la aplicación pues
facilita su identificación También usaremos un componente Sprite con dimensiones un poco menores al tamaño del logo La posición de la imagen la
definiremos más adelante usando bloques Por último usamos un componente Clock con intervalo fijado en 5.000 milisegundos es decir cinco segundos Estos cinco segundos son el tiempo de
vida que tendrá nuestra pantalla Splash En el emulador se observa que la imagen no está centrada en la pantalla La imagen contenida en el Canvas se posiciona usando el par de coordenadas X,Y Usaremos el controlador de eventos Inicializar Screen para colocar los bloques que deseamos se realicen al momento de ejecutar la aplicación En este caso serán los bloques para centrar nuestro logo Usamos el bloque de asignación para la propiedad X del sprite logo y construimos la expresión que calcula el valor de X X = (ancho de la pantalla – ancho
del sprite) / 2 Una vez construida la expresión hacemos la asignación y colocamos el bloque dentro del controlador de eventos
Inicializar pantalla Para calcular la coordenada Y simplemente copiamos y pegamos y modificamos X y ancho por Y y alto Como se puede observar el logo ya se encuentra centrado Ahora queremos que cuando el usuario toque la pantalla, es decir el canvas nuestro Splash de paso a la siguiente pantalla Lo anterior lo logramos usando el controlador de eventos Touched del Canvas dentro colocamos el bloque de asignación para apagar el Clock, es decir, colocarlo en estado False y el bloque de control que abre otra
pantalla especificada por el nombre que se escriba Si el usuario no toca la pantalla queremos que transcurridos cinco
segundos se dé paso a la siguiente pantalla Lo anterior lo logramos usando el
controlador de eventos Timer del Clock dentro colocamos los mismos bloques que están en Canvas Touched agregamos la pantalla que se debe abrir, Login y el resultado es inmediato ya estamos en la nueva pantalla Login nuestro Splash Screen funciona Ahora vamos a configurar la pantalla de
Login con valores similares a los usados en el
Splash pero aquí vamos a colocar activa la opción Deslizable que nos
será de mucha utilidad en el diseño de las pantallas virtuales Ahora dentro de la pantalla de Login crearemos dos pantallas virtuales: Login y Sign Up usando componentes de diseño Usaremos tres componentes de
disposición vertical el primero contendrá la sección de
encabezado con nuestro logo el segundo contendrá la screen virtual Login y el tercero contendrá la screen virtual Sign Up como se ve en la imagen de la
izquierda Para facilitar la programación
posterior renombramos cada uno de los tres contenedores verticales ahora cambiamos algunas propiedades de cada uno de los contenedores En nuestro diseño la altura del encabezado será del 30% de la pantalla y la altura de los otros dos
contenedores verticales será del 70% Para los tres el ancho por ahora será
del 100% de la pantalla Ahora se observa la importancia de activar la opción Deslizable de la pantalla que nos permite trabajar este tipo de diseños