uso de varias pantallas y pantalla splash · uso de varias pantallas y pantalla splash 4 cada...
Post on 08-Oct-2018
224 Views
Preview:
TRANSCRIPT
Uso de varias pantallas y
pantalla Splash
2 Uso de varias pantallas y pantalla Splash
Índice
1. USO DE VARIAS PANTALLAS.............................................................................................................................. 3
2. CREACIÓN DE PANTALLA DE INICIO O DE SPLASH ............................................................................................ 10
3 Uso de varias pantallas y pantalla Splash
1. Uso de varias pantallas
Vamos a explicar como se crean aplicaciones con múltiples pantallas en Android. La mayor parte de las
aplicaciones en Android se componen de varias pantallas, por esa razón vamos a ver cual es el proceso a
seguir en AppInventor.
Para ello, vamos a crear un proyecto nuevo, al que llamaremos por ejemplo, “pantallas”.
Como vimos en el reto anterior, en el menú principal de AppInventor, justo encima de viewer tenemos un
botón llamado “AddScreen” y junto a éste, otro llamado “RemoveScreen”. Estos dos botones son los
necesarios para crear y eliminar pantallas en AppInventor.
Vamos a crear una pantalla nueva, para ello, pulsamos el botón “AddScreen”, introducimos el nombre que
queramos y pulsamos el botón ok. Como podemos ver, en viewer, tenemos una nueva pestaña con el
nombre que introdujimos previamente.
4 Uso de varias pantallas y pantalla Splash
Cada pantalla es totalmente independiente de la anterior, desde la Web para crear la interfaz hasta el
Editor de Bloques. Para comprobarlo, vamos a poner un botón en la primera pantalla... para ello, pulsamos
la pestaña Screen1 y arrastramos un botón de la paleta a la primera pantalla.
Si pulsamos la pestaña Screen2, podemos comprobar tanto el viewer como la sección “components” está
vacía, ya que el botón lo hemos añadido a la pantalla Screen1 y no a la pantalla Screen2.
5 Uso de varias pantallas y pantalla Splash
Con la pestaña Screen1 seleccionada abrimos el Editor de Bloques, y vemos, que al pulsar la pestaña “My
Blocks” el Editor de Bloques muestra el componente del botón que hemos añadido.
6 Uso de varias pantallas y pantalla Splash
Ahora volvemos a la web de AppInventor y pulsamos la pestaña Screen2, regresamos al Editor de Bloques y
al pulsar la pestaña “My Blocks”, vemos que el Editor de Bloques está vacío.
Con esto, puedes comprobar que tanto la interfaz, como los bloques del Editor de Bloques, son totalmente
independientes, dependen de cada pantalla.
Ahora vas a abrir el emulador y a conectarlo con AppInventor como hemos hecho en el reto anterior... Una
vez arrancado, tienes la aplicación lanzada en el emulador, y puedes ver la pantalla Screen1 en él.
7 Uso de varias pantallas y pantalla Splash
Si en la web de AppInventor seleccionas la pestaña Screen2, comprobarás que el emulador se comporta de
la misma forma que el Editor de Bloques, cambiando la pantalla que se muestra en él a Screen2.
La navegación entre ventanas se hace igual que en el reto anterior.
Previamente has añadido un botón a la pantalla Screen1. Ahora harás que al pulsar ese botón, la pantalla
del emulador cambie de Screen1 a Screen2. Para conseguirlo selecciona en el Editor de Bloque el botón y
arrastra el bloque when Button1.Click do.
8 Uso de varias pantallas y pantalla Splash
A continuación rellena el hueco con el bloque adecuado. En este caso, es alguno que permita abrir nuevas
ventanas. Dirígete a la pestaña Built‐In y pulsa Control. Podrás localizar el siguiente bloque open
anotherscreen(abrir otra pantalla), éste es el que debes arrastrar.
Como puedes apreciar, a este bloque, hay que añadirle otro bloque más que contenga el nombre de la
pantalla que queremos abrir. Para conseguirlo, pulsa Text, y arrastra el bloque llamado “text”.
Por último, cambia el nombre “text” por el nombre de la pantalla que quieres abrir, en este caso “Screen2”.
Con esto ya está terminada toda la lógica necesaria para hacer que la aplicación pase de la primera pantalla
a la segunda.
Para probar que su funcionamiento, dirígete a la Web de AppInventor, (asegurate de tener seleccionada la
pantalla Screen1) y pulsa el botón del emulador.
Como ves en el emulador, aparece un mensaje informando de que el cambio entre pantallas no está
permitido actualmente en AppInventor. Para poder probar que funciona, debes instalar la aplicación en un
teléfono real y probarlo mediante el método que elijas de los explicados en el Reto2. De todas formas te lo
mostramos en el vídeo.
9 Uso de varias pantallas y pantalla Splash
10 Uso de varias pantallas y pantalla Splash
2. Creación de pantalla de inicio o de Splash
La mayoría de las aplicaciones que utilizamos en móviles, cuando las abrimos, nos muestran una pantalla
de bienvenida, de carga, o simplemente con el logotipo de la empresa, la utilización de esas imágenes es
visualmente atractiva, y le aporta un plus de calidad a nuestra aplicación... esta pantalla se llama
SplashScreen. AppInventor sin embargo, no ofrece esta posibilidad como tal.
Para crear una pantalla Splash en AppInventor, lo que debemos hacer en AppInventor, es crear una
pantalla normal, que pasado un tiempo que nosotros definamos, cambie a otra pantalla, la de la aplicación.
Es decir, necesitamos tener dos pantallas igual que en ejercicios anteriores, sólo que en lugar de hacer la
transición de una a otra a través de la pulsación de un botón se hará cuando pase determinado tiempo.
Para entender el funcionamiento, nos vamos a crear un proyecto nuevo en AppInventor, y lo llamamos por
ejemplo “Splash”.
Lo que vamos a hacer ahora es poner en la pantalla, algo que diferencie a nuestro Splash de la pantalla
principal de la aplicación. Arrastramos un Label de la paleta de componentes, y ponemos el texto que
queramos... en este caso, “HOLA!”
11 Uso de varias pantallas y pantalla Splash
Ahora nos creamos una pantalla nueva igual que en el reto anterior, pulsando en el botón “addscreen” del
menú principal de la web de AppInventor.
Para hacer que la pantalla Splash, en este caso “Screen1” sea una Splash, lo que debemos hacer es arrastrar
un componente que nos va a servir de temporizador para cambiar a la ventana de la aplicación.... pulsamos
en la pestaña Screen1 y en la paleta de componentes, podemos ver un componente llamado “clock”, ese es
el que vamos a necesitar, ya que además de oferecernos la posibilidad de saber la fecha, nos hace de
temporizador.
Arrastramos ese componente a nuestro viewer, y vemos que se nos coloca debajo de la pantalla del
Viewer, porque como otros componentes que ya hemos visto, es no‐visible.
Seleccionamos el componente, y en la sección properties, vemos un apartado llamado “Time Interval”... en
ese apartado es donde deberemos decir, cuanto tiempo vamos a querer estar viendo la pantalla splash,
introducimos 3000, las unidades son milisegundos, por tanto, esa cantidad se corresponde con 3 segundos.
Por último, debemos cambiar una cosa más del componente “Clock”, en properties, vemos que la opción
“TimerAlwaysFires” está seleccionada, debemos de‐seleccionarla, ya que eso lo que va a hacer es que el
temporizador esté continuamente ejecutándose, y lo que nos interesa es que el temporizador funcione sólo
una vez.
12 Uso de varias pantallas y pantalla Splash
Ahora debemos abrir el editor de bloques para configurar el cambio de una pantalla a otra.
Pulsamos el botón “open blocks editor”. En el editor de bloques, lo que debemos hacer es configurar lo que
pasa cuando el reloj llega a 3 segundos, en este caso pasar a otra ventana.
Para ello, pulsamos en la pestaña “My Blocks” y seleccionamos “Clock1” nuestro reloj... si miramos los
bloques que tenemos disponibles, vemos uno que pone “Clock1.Timer”, es decir temporizador, ese bloque
es el que nos interesa, ya que es el que se ejecutará cuando el temporizador llegue a los 3000 milisegundos
que hemos definido.
Arrastramos ese bloque a nuestro lienzo.
Lo que debemos hacer ahora es rellenar ese bloque con un bloque que nos permita abrir una nueva
ventana, para ello, igual que hicimos en retos anteriores, lo que debemos hacer es, en la pestaña “Built‐In”
pulsamos en “Control” y buscamos el bloque “Open anotherScreen”... arrastramos ese bloque al hueco del
bloque del reloj... a este bloque le debemos meter un bloque de texto con el nombre de la pantalla a la que
queremos ir, exactamente igual que en el reto 2, pulsamos nuevamente en la pestaña “Built‐In”,
seleccionamos “Text” y arrastramos el bloque “Text” a nuestro puzzle.
Cuando ya lo tenemos, debemos cambiar el texto “Text” por el nombre de la pantalla a la que queremos ir,
en este caso “Screen2”.
13 Uso de varias pantallas y pantalla Splash
De esta forma, cuando el reloj llegue a 3 segundos, automáticamente, cambiará la pantalla de presentación
o Splash por la siguiente pantalla.
Sin embargo, esta aplicación tiene un problema, y es que cuando estemos en la ventana de la aplicación, si
pulsamos el botón atrás del teléfono, nos volverá a la pantalla de Splash, para evitar esto, lo que debemos
hacer, es que además de abrir la ventana nueva, cierre la ventana de Splash. Si observamos el bloque “open
anotherscreen”, vemos que no tiene ninguna pestaña o hueco a la que añadir otro bloque para cerrar la
ventana.
De todas formas, vamos a buscar el bloque que nos hace falta para cerrar la ventana de Splash. Igual que
hemos hecho para abrir una ventana nueva, pulsamos en la pestaña “Buit‐In”, seleccionamos “Control” y
buscamos un bloque llamado “closescreen”.... si nos fijamos en ese bloque, vemos que tenemos el mismo
problema que con el bloque “open anotherscreen”, no tiene ningún hueco para anidar bloques.
Lo que debemos hacer en ese caso es crear un “procedimiento” que nos ejecute ese bloque.
Para ello, seleccionamos la pestaña “Built‐In” y pulsamos sobre “Definition”, el bloque que necesitamos es
el que pone “procedure”.
Lo arrastramos a nuestro lienzo.
Y dentro de ese bloque, vamos a poner el bloque “closescreen”. Por comodidad, vamos a cambiarle el
nombre al procedimiento, pulsando en el texto procedure del bloque, introducimos un nombre mas
familiar, como “cierraventana”.
Ahora lo que debemos hacer es pulsar en la pestaña “My Blocks”, seleccionar “MyDefinitions” y arrastrar el
bloque “cierraventana” en el bloque del reloj, de tal forma, que el bloque que abre una nueva ventana, se
anide a éste.
14 Uso de varias pantallas y pantalla Splash
De esta forma, cuando pasen 3 segundos, la ventana de splash se cerrará y se abrirá la nueva ventana (la
aplicación).
Con este método conseguimos que al pulsar el botón “atras” del telefono desde la pantalla de la aplicación,
la aplicación salga, y no se vuelva a ver la pantalla de splash.
Si lo preferimos, podemos sacar también el bloque “open anotherscreen” a otro procedimiento y hacer que
éste bloque se ejecute antes que el otro para facilitar la comprensión, es decir... primero paso a otra
ventana y luego cierro la ventana splash... el resultado es el mismo.
top related