Distribuir componentes por la pantalla
Para
organizar de forma más fácil los componentes en la pantalla de tu
aplicación existe una categoría llamada Layout (Disposición) aquí.
Dentro de ella encontrarás tres componentes que te permiten distribuir fácilmente los elementos siguiendo una disposición horizontal, vertical o como una tabla. Vamos a ver cómo utilizarlos.
1 Empieza un proyecto nuevo y llámalo "organizar_componentes".
Para este ejemplo no vamos a programar nada con el Editor de bloques, simplemente vamos a ver cómo colocar componentes en la pantalla.
2 Selecciona el componente HorizontalArrangement (Horizontal) y ponlo en la ventana de tu aplicación.
3 Verás que aparece un cuadrado en la pantalla. Ahora cada vez que añadas un componente nuevo a la pantalla dentro de este cuadrado estos componentes se distribuirán, en este caso, de forma horizontal. Prueba a hacerlo añadiendo tres botones. Cambia el texto de los botones para que te quepan en la pantalla.
4 Verás que los botones aparecen alineados a la izquierda de la pantalla. Para centrarlos tienes dos posibilidades:
4.1 Dentro de las propiedades del componente Screen (pantalla) tienes la propiedad AlignHorizontal que sirve para alinear todos los componentes que aparecen en tu pantalla (izquierda, centrado, derecha). Recuerda que en este caso estaríamos centrando todos los componentes de la pantalla. Prueba a cambiar esta propiedad para ver el resultado.
4.2 La otra opción consiste en alinear únicamente los componentes (en este caso los botones) que hemos incluido dentro del componente HorizontalArrangement1. Para ello selecciónalo y vamos a ver sus propiedades.
La primera propiedad se llama también HorizontalArrangement aunque en este caso aparece en gris porque no podemos cambiarla. Vamos a ver por qué.
Fíjate un poco más abajo que existe una propiedad llamada Width (ancho). Esta propiedad tiene el valor Automatic (automático) y quiere decir que el ancho de este componente se calcula automáticamente en función de los componentes que tenga dentro, en nuestro caso, tres botones. Es decir, el ancho de la caja es el mismo que la suma del ancho de los tres botones, por lo tanto, no se pueden centrar. Están ya centrados. Vamos a cambiarlo.
5 Selecciona la propiedad Width (ancho) y cambia el valor a "Fill Parent" que quiere decir que ajuste el ancho al tamaño que tenga la pantalla en ese momento. Es decir, que use el ancho total de la pantalla sobre la que mostramos este componente.
6 Verás que la caja del componente HorizontalArrangement1 se estira hasta llegar al borde de la pantalla, que es el tamaño máximo de la ventana. Ahora la propiedad HorizontalArrangement está activada y nos permite centrar los botones. Cambia el valor de la propiedad Width (ancho) a Center (centro). ¿Ves la diferencia?
7 Una ventaja de hacer esto es que al girar (cambiar la orientación de tu móvil o tablet) el ancho de la pantalla también cambia y de esta forma tus botones siempre aparecerán centrados. Prueba a hacerlo.
8 En la propiedad Width (ancho) también puedes definir un número concreto de pixeles. Esto te permite colocar con mayor precisión los botones donde quieras.
9 Ahora selecciona el componente VerticalArrangement (Vertical) y añádelo por debajo.
10 Vuelve a coger tres botones y añádelos dentro del cuadro del componente VerticalArrangement que acabas de crear. Verás que los componentes se distribuyen en este caso de forma vertical.
11 Si seleccionas sus propiedades verás que tampoco puedes modificar su posición ni vertical ni horizontal. Nuevamente cambia las propiedades Width (ancho) y Height (alto) por "Fill Parent" y verás cómo puedes centrar los botones tanto verticalmente como horizontalmente. Prueba a cambiar las propiedades y verás cómo lo entiendes rápidamente.
12 Por último coge el componente TableArrangement y ponlo en tu ventana de programa.
13 Este componente te permite crear una tabla donde colocar de forma ordenada otros componentes como botones, etc. En sus propiedades verás que te permite seleccionar el número de columnas y filas. Déjalo en 2 x 2 y añade dentro del cuadro cuatro nuevos botones.
14 Por último, si no quieres que tu aplicación permita al usuario cambiar la orientación de la pantalla. Dentro de las propiedades del componente Screen tienes una propiedad llamada ScreenOrientation. Basta con que selecciones la orientación que quieres que tenga tu aplicación y de esta forma nunca cambiará.
La pantalla de tu aplicación debe quedar así:
15 Verás que este componente necesita también saber las coordenadas donde quieres dibujar el círculo y, además, necesita saber el radio del círculo que quieres dibujar. Puedes empezar por despegar las coordenadas que teníamos unidas al bloque DrawPoint anterior y pegarlas a este nuevo bloque.
16 Ahora, para decirle al bloque .DrawCircle el radio que queremos para nuestros círculos, tenemos que pasarle un dato numérico (un número) a la propiedad R (Radio). Selecciona la categoría Math (matemáticas) y coge el primer bloque “0”. Recuerda que esto creará un bloque numérico. Cambia el número cero por 20 y pégalo a la propiedad R (radio).
17 Por último puedes borrar el anterior bloque .DrawPoint.
18 Prueba tu programa.
Este evento nos dice si el usuario ha arrastrado (drag) el dedo por el lienzo. Verás que este evento nos pasa nuevos parámetros. Los dos primeros (startX y startY) nos indican dónde ha empezado el usuario a tocar el lienzo aunque ahora no las vamos a usar. Nos interesan las propiedades prevX y prevY y las propiedades currentX y currentY. Este conjunto de propiedades nos dicen desde dónde y hasta dónde está el usuario ha arrastrado el dedo. Vamos a verlo dibujando una línea.
21 Vuelve al componente Canvas1 y coge el bloque Canvas1.DrawLine (Dibujar línea) y arrástralo dentro del evento Canvas1.Dragged.
Este bloque nos pide las coordenadas del inicio y del final de la línea que queremos dibujar. Nuevamente esta información ya la tenemos porque nos la está facilitando el evento.
22 Colocando el ratón sobre las propiedades PrevX y PrevY, coge las correspondientes “get PrevX” y “get PrevY” y pégalas a los bloques x1 e y1 respectivamente. Estas son las coordenadas de inicio de la línea que corresponden a las coordenadas donde el usuario ha empezado a arrastrar el dedo.
23 Ahora, haz lo mismo con las propiedades currentX y currentY y pégalas a x2 e y2 respectivamente. Estas serán las coordenadas donde termina la línea y que corresponden a donde el usuario tiene el dedo en este momento. Pruébalo y verás cómo lo entiendes mejor.
24 Ahora que entiendes cómo funciona el evento Canvas.Dragged puedes probar a cambiar el bloque .DrawLine por .DrawPoint
25 Recuerda que el evento .Touched también funciona. Así puedes ver la diferencia entre tocar y arrastrar el dedo por la pantalla.
Dentro de ella encontrarás tres componentes que te permiten distribuir fácilmente los elementos siguiendo una disposición horizontal, vertical o como una tabla. Vamos a ver cómo utilizarlos.
1 Empieza un proyecto nuevo y llámalo "organizar_componentes".
Para este ejemplo no vamos a programar nada con el Editor de bloques, simplemente vamos a ver cómo colocar componentes en la pantalla.
2 Selecciona el componente HorizontalArrangement (Horizontal) y ponlo en la ventana de tu aplicación.
3 Verás que aparece un cuadrado en la pantalla. Ahora cada vez que añadas un componente nuevo a la pantalla dentro de este cuadrado estos componentes se distribuirán, en este caso, de forma horizontal. Prueba a hacerlo añadiendo tres botones. Cambia el texto de los botones para que te quepan en la pantalla.
4 Verás que los botones aparecen alineados a la izquierda de la pantalla. Para centrarlos tienes dos posibilidades:
4.1 Dentro de las propiedades del componente Screen (pantalla) tienes la propiedad AlignHorizontal que sirve para alinear todos los componentes que aparecen en tu pantalla (izquierda, centrado, derecha). Recuerda que en este caso estaríamos centrando todos los componentes de la pantalla. Prueba a cambiar esta propiedad para ver el resultado.
4.2 La otra opción consiste en alinear únicamente los componentes (en este caso los botones) que hemos incluido dentro del componente HorizontalArrangement1. Para ello selecciónalo y vamos a ver sus propiedades.
La primera propiedad se llama también HorizontalArrangement aunque en este caso aparece en gris porque no podemos cambiarla. Vamos a ver por qué.
Fíjate un poco más abajo que existe una propiedad llamada Width (ancho). Esta propiedad tiene el valor Automatic (automático) y quiere decir que el ancho de este componente se calcula automáticamente en función de los componentes que tenga dentro, en nuestro caso, tres botones. Es decir, el ancho de la caja es el mismo que la suma del ancho de los tres botones, por lo tanto, no se pueden centrar. Están ya centrados. Vamos a cambiarlo.
5 Selecciona la propiedad Width (ancho) y cambia el valor a "Fill Parent" que quiere decir que ajuste el ancho al tamaño que tenga la pantalla en ese momento. Es decir, que use el ancho total de la pantalla sobre la que mostramos este componente.
6 Verás que la caja del componente HorizontalArrangement1 se estira hasta llegar al borde de la pantalla, que es el tamaño máximo de la ventana. Ahora la propiedad HorizontalArrangement está activada y nos permite centrar los botones. Cambia el valor de la propiedad Width (ancho) a Center (centro). ¿Ves la diferencia?
7 Una ventaja de hacer esto es que al girar (cambiar la orientación de tu móvil o tablet) el ancho de la pantalla también cambia y de esta forma tus botones siempre aparecerán centrados. Prueba a hacerlo.
8 En la propiedad Width (ancho) también puedes definir un número concreto de pixeles. Esto te permite colocar con mayor precisión los botones donde quieras.
9 Ahora selecciona el componente VerticalArrangement (Vertical) y añádelo por debajo.
10 Vuelve a coger tres botones y añádelos dentro del cuadro del componente VerticalArrangement que acabas de crear. Verás que los componentes se distribuyen en este caso de forma vertical.
11 Si seleccionas sus propiedades verás que tampoco puedes modificar su posición ni vertical ni horizontal. Nuevamente cambia las propiedades Width (ancho) y Height (alto) por "Fill Parent" y verás cómo puedes centrar los botones tanto verticalmente como horizontalmente. Prueba a cambiar las propiedades y verás cómo lo entiendes rápidamente.
12 Por último coge el componente TableArrangement y ponlo en tu ventana de programa.
13 Este componente te permite crear una tabla donde colocar de forma ordenada otros componentes como botones, etc. En sus propiedades verás que te permite seleccionar el número de columnas y filas. Déjalo en 2 x 2 y añade dentro del cuadro cuatro nuevos botones.
14 Por último, si no quieres que tu aplicación permita al usuario cambiar la orientación de la pantalla. Dentro de las propiedades del componente Screen tienes una propiedad llamada ScreenOrientation. Basta con que selecciones la orientación que quieres que tenga tu aplicación y de esta forma nunca cambiará.
La pantalla de tu aplicación debe quedar así:
Dibujando con App Inventor (Canvas)
Ya
hemos visto que cada aplicación que hacemos con AppInventor tiene una
pantalla principal (componente Screen) dentro de la cual colocamos otros
componentes como botones, texto, etc.
El componente Canvas (Lienzo de dibujo) es otro componente más que podemos incluir dentro de nuestra pantalla principal y que nos va a permitir dibujar y hacer animaciones.
Otra característica del componente Canvas (Lienzo) es que es un espacio sensible al tacto; es decir, el usuario podrá usar los dedos para interactuar con nuestra aplicación, por ejemplo, para dibujar o mover objetos usando gestos como tocar, arrastrar, etc. Vamos a ver varios ejemplos.
1 Empieza con un proyecto nuevo y llámalo "canvas".
2 En las propiedades de la pantalla (Screen) cambia la propiedad AlignHorizontal por Center (centrado).
3 Desactiva la propiedad Scrollable. La propiedad Scrollable nos dice si queremos poder desplazarnos verticalmente (scroll) por la pantalla en el caso de que el contenido que estemos mostrando ocupe más espacio que el tamaño de la pantalla. Es importante que recuerdes esta propiedad en el futuro porque afecta mucho a la hora de diseñar el interface de usuario.
4 Dentro de la categoría “Drawing and Animation”, selecciona el componente Canvas (Lienzo) y colócalo en la pantalla de tu programa.
5 Cambia el color de fondo y las propiedades Width (ancho) y Height (largo) a "fill parent". Verás como el componente Canvas
(Lienzo) ocupa ahora toda la pantalla.
6 Por último añade un botón por encima o por debajo del lienzo. Cambia el nombre del botón por "boton_borrar" y cambia el texto del botón por "Borrar".
7 Vamos al Editor de bloques.
8 Como siempre verás que aparecen los componentes Canvas1 y boton_borrar que hemos añadido en el Diseñador. Selecciona el componente boton_borrar y coge el evento boton_borrar.Click.
9 Ahora selecciona el componente Canvas1 y busca el bloque llamado "call Canvas1.Clear" (borrar). Este bloque borra el canvas (lienzo) lo que nos permite limpiarlo al pulsar el botón. Arrástralo dentro del evento boton_borrar.Click.
10 Ahora vuelve a seleccionar el componente Canvas1 y coge el evento Canvas1.Touched.
Este evento nos informa si el usuario ha tocado el lienzo. Verás que al ponerlo en tu pantalla aparece junto con tres propiedades. Las propiedades X e Y nos indican la posición en la cual el usuario ha tocado el lienzo, y la propiedad touchedSprite nos dice si el usuario ha tocado algún gráfico que hubiese en ese momento en el lienzo. Veremos en detalle cómo trabajar con coordenadas un poco más adelante.
El componente Canvas (Lienzo de dibujo) es otro componente más que podemos incluir dentro de nuestra pantalla principal y que nos va a permitir dibujar y hacer animaciones.
Otra característica del componente Canvas (Lienzo) es que es un espacio sensible al tacto; es decir, el usuario podrá usar los dedos para interactuar con nuestra aplicación, por ejemplo, para dibujar o mover objetos usando gestos como tocar, arrastrar, etc. Vamos a ver varios ejemplos.
1 Empieza con un proyecto nuevo y llámalo "canvas".
2 En las propiedades de la pantalla (Screen) cambia la propiedad AlignHorizontal por Center (centrado).
3 Desactiva la propiedad Scrollable. La propiedad Scrollable nos dice si queremos poder desplazarnos verticalmente (scroll) por la pantalla en el caso de que el contenido que estemos mostrando ocupe más espacio que el tamaño de la pantalla. Es importante que recuerdes esta propiedad en el futuro porque afecta mucho a la hora de diseñar el interface de usuario.
4 Dentro de la categoría “Drawing and Animation”, selecciona el componente Canvas (Lienzo) y colócalo en la pantalla de tu programa.
5 Cambia el color de fondo y las propiedades Width (ancho) y Height (largo) a "fill parent". Verás como el componente Canvas
(Lienzo) ocupa ahora toda la pantalla.
6 Por último añade un botón por encima o por debajo del lienzo. Cambia el nombre del botón por "boton_borrar" y cambia el texto del botón por "Borrar".
7 Vamos al Editor de bloques.
8 Como siempre verás que aparecen los componentes Canvas1 y boton_borrar que hemos añadido en el Diseñador. Selecciona el componente boton_borrar y coge el evento boton_borrar.Click.
9 Ahora selecciona el componente Canvas1 y busca el bloque llamado "call Canvas1.Clear" (borrar). Este bloque borra el canvas (lienzo) lo que nos permite limpiarlo al pulsar el botón. Arrástralo dentro del evento boton_borrar.Click.
10 Ahora vuelve a seleccionar el componente Canvas1 y coge el evento Canvas1.Touched.
Este evento nos informa si el usuario ha tocado el lienzo. Verás que al ponerlo en tu pantalla aparece junto con tres propiedades. Las propiedades X e Y nos indican la posición en la cual el usuario ha tocado el lienzo, y la propiedad touchedSprite nos dice si el usuario ha tocado algún gráfico que hubiese en ese momento en el lienzo. Veremos en detalle cómo trabajar con coordenadas un poco más adelante.
DIBUJANDO PUNTOS
11 Ahora sólo nos queda decidir qué queremos hacer cuando el usuario toca el lienzo. En este caso vamos a dibujar un punto. Para ello, volvemos a seleccionar el componente Canvas1 y vemos que dentro de sus bloques existe uno llamado Canvas1.DrawPoint (dibujar punto). Arrástralo y colócalo dentro del evento Canvas1.Touched.
Verás que este bloque necesita saber dónde quieres dibujar el punto
(X e Y). Como queremos dibujar el punto justamente donde el usuario ha
tocado el lienzo, este dato ya lo tenemos porque nos lo está dando el
evento .Touched en sus propiedades X e Y.
12 Sólo nos queda pasarle esos mismos datos al bloque .DrawPoint. Para ello, coloca el ratón sobre cada uno de los bloques “x” e “y” del evento Canvas1.Touched:
y pega los bloques “get x” y “get y” al bloque .DrawPoint donde corresponde. Así:
13 Si todo funciona correctamente, verás que al tocar el lienzo se dibuja un punto. ¿Funciona?
Vamos a hacer un pequeño repaso. Algunos eventos que podemos usar en nuestros programas vienen acompañados de propiedades, también llamadas parámetros. En el caso del evento Canvas1.Touched nos informa de la posición donde el usuario ha tocado el lienzo (coordenadas X e Y). Esta información la podemos usar dentro del evento, como en este caso, para dibujar algo precisamente en esa posición. Cuando un evento nos pasa información usando parámetros, recuerda que esas propiedades / parámetros los podrás encontrar junto al propio bloque del evento, en la parte superior, y que para utilizarlos sólo tienes que pasar el ratón por encima y se desplegarán los bloques que puedas necesitar.
12 Sólo nos queda pasarle esos mismos datos al bloque .DrawPoint. Para ello, coloca el ratón sobre cada uno de los bloques “x” e “y” del evento Canvas1.Touched:
y pega los bloques “get x” y “get y” al bloque .DrawPoint donde corresponde. Así:
13 Si todo funciona correctamente, verás que al tocar el lienzo se dibuja un punto. ¿Funciona?
Vamos a hacer un pequeño repaso. Algunos eventos que podemos usar en nuestros programas vienen acompañados de propiedades, también llamadas parámetros. En el caso del evento Canvas1.Touched nos informa de la posición donde el usuario ha tocado el lienzo (coordenadas X e Y). Esta información la podemos usar dentro del evento, como en este caso, para dibujar algo precisamente en esa posición. Cuando un evento nos pasa información usando parámetros, recuerda que esas propiedades / parámetros los podrás encontrar junto al propio bloque del evento, en la parte superior, y que para utilizarlos sólo tienes que pasar el ratón por encima y se desplegarán los bloques que puedas necesitar.
DIBUJANDO CÍRCULOS
14 Vamos a probar ahora a dibujar círculos. Como estamos dibujando dentro del componente Canvas (Lienzo) todos los bloques relacionados con dibujar los vas a encontrar siempre dentro del componente Canvas. Selecciónalo de nuevo y coge el bloque llamado Canvas1.DrawCircle y ponlo dentro del evento .Touched tal y como hemos hecho antes.15 Verás que este componente necesita también saber las coordenadas donde quieres dibujar el círculo y, además, necesita saber el radio del círculo que quieres dibujar. Puedes empezar por despegar las coordenadas que teníamos unidas al bloque DrawPoint anterior y pegarlas a este nuevo bloque.
16 Ahora, para decirle al bloque .DrawCircle el radio que queremos para nuestros círculos, tenemos que pasarle un dato numérico (un número) a la propiedad R (Radio). Selecciona la categoría Math (matemáticas) y coge el primer bloque “0”. Recuerda que esto creará un bloque numérico. Cambia el número cero por 20 y pégalo a la propiedad R (radio).
17 Por último puedes borrar el anterior bloque .DrawPoint.
18 Prueba tu programa.
CAMBIO DE COLOR
19 Para cambiar el color con el que pintamos en el Canvas (Lienzo) vamos a usar el bloque Canvas1.PaintColor (color de la pintura). Arrástralo dentro del evento .Touched por encima del bloque .DrawCircle y pégale el color que quieras. ¿Recuerdas cómo hacerlo?
DIBUJANDO LÍNEAS
20 Vamos a aprender a dibujar con el dedo. Para ello, selecciona de nuevo el componente Canvas1 y coge el bloque evento Canvas1.Dragged.Este evento nos dice si el usuario ha arrastrado (drag) el dedo por el lienzo. Verás que este evento nos pasa nuevos parámetros. Los dos primeros (startX y startY) nos indican dónde ha empezado el usuario a tocar el lienzo aunque ahora no las vamos a usar. Nos interesan las propiedades prevX y prevY y las propiedades currentX y currentY. Este conjunto de propiedades nos dicen desde dónde y hasta dónde está el usuario ha arrastrado el dedo. Vamos a verlo dibujando una línea.
21 Vuelve al componente Canvas1 y coge el bloque Canvas1.DrawLine (Dibujar línea) y arrástralo dentro del evento Canvas1.Dragged.
Este bloque nos pide las coordenadas del inicio y del final de la línea que queremos dibujar. Nuevamente esta información ya la tenemos porque nos la está facilitando el evento.
22 Colocando el ratón sobre las propiedades PrevX y PrevY, coge las correspondientes “get PrevX” y “get PrevY” y pégalas a los bloques x1 e y1 respectivamente. Estas son las coordenadas de inicio de la línea que corresponden a las coordenadas donde el usuario ha empezado a arrastrar el dedo.
23 Ahora, haz lo mismo con las propiedades currentX y currentY y pégalas a x2 e y2 respectivamente. Estas serán las coordenadas donde termina la línea y que corresponden a donde el usuario tiene el dedo en este momento. Pruébalo y verás cómo lo entiendes mejor.
24 Ahora que entiendes cómo funciona el evento Canvas.Dragged puedes probar a cambiar el bloque .DrawLine por .DrawPoint
25 Recuerda que el evento .Touched también funciona. Así puedes ver la diferencia entre tocar y arrastrar el dedo por la pantalla.
Guardando el Canvas
Más adelante vamos a ver cómo podemos guardar la imagen del canvas para poder recuperarla cuando queramos.
No olvides guardar tu programa porque lo usaremos más adelante.
No olvides guardar tu programa porque lo usaremos más adelante.
Las coordenadas de la pantalla
Imagina
que el Canvas (Lienzo) es un tablero de ajedrez donde cada cuadrícula
representa un punto en la pantalla, también llamado pixel. Ya sabes que
las imágenes que aparecen en tu ordenador o dispositivo están formadas
por muchos pixeles y cada uno de ellos ocupa una posición en la pantalla
que se representa como un valor X (plano horizontal) e Y (plano
vertical) llamado ejes de coordenadas.
Es importante entender cómo funcionan estas coordenadas porque serán necesarias para que puedas colocar de forma precisa tus imágenes en la pantalla de tus aplicaciones. Vamos a hacer un pequeño programa que nos ayudará a entenderlo mejor.
1 Crea un nuevo proyecto y llámalo "coordenadas".
2 En las propiedades de la pantalla (Screen) cambia la propiedad AlignHorizontal a Center y desactiva la propiedad Scrollable. Ahora añade un componente Canvas (Lienzo) y cambia sus propiedades Witdh (Ancho) y Height (Largo) a Fill Parent.
3 Ahora añade un botón justo debajo y cambia el texto del botón por "Borrar".
4 Por último añade un componente HorizontalArrangement justo al final.
5 Dentro de este último componente coloca cuatro etiquetas (label). Asegúrate de que quedan en orden de izquierda a derecha.
6 Cambia el texto de la primera etiqueta label1 por "X: ".
7 En la segunda etiqueta label2 cambia su nombre por valor_x y cambia el texto por "0"
8 Cambia el texto de la tercera etiqueta label3 por " / Y:".
9 Por último cambia el nombre de la cuarta etiqueta label4 por valor_y y el texto por "0"
10 Tiene que quedarte así:
11 Vamos ahora al Editor de bloques.
12 En primer lugar vamos a programar el botón para que se borre el lienzo al pulsarlo. Selecciona el componente button1 y coge
el evento button1.Click.
13 Ahora selecciona el componente Canvas y busca el bloque "call Canvas1.Clear" y sitúalo dentro del evento .Click tal y como hemos aprendido antes.
14 Ahora selecciona nuevamente el componente Canvas y coge el evento Canvas1.Dragged. Recuerda que este evento nos dice si el usuario está arrastrando el dedo por el lienzo dándonos, entre otras, las coordenadas actuales (currentX y currentY).
15 Vamos a dibujar un punto donde el usuario tenga el dedo así que selecciona de nuevo el componente Canvas y busca el bloque Canvas1.DrawPoint (dibujar punto) y colócalo dentro del evento Canvas1.Dragged.
16 Tal y como hemos aprendido antes, este bloque espera que le digamos las coordenadas donde queremos dibujar el punto. Como estamos dentro del evento .Dragged y este evento nos pasa precisamente esa información en las propiedades currentX y currentY, vamos a usarlas. Recuerda que las tienes en el bloque .Dragged. Sólo tienes que colocar el ratón sobre ellas y arrastrar los bloques “get currentX” y “get currentY” a su lugar correspondiente.
17 También queremos que cuando el usuario pulse la pantalla nos muestre las coordenadas del lienzo donde ha pulsado usando las etiquetas que hemos preparado para ello. Selecciona la etiqueta valor_x, busca el bloque "set valor_x to" y ponlo dentro del evento .Dragged debajo del bloque .DrawPoint.
18 Haz lo mismo con la etiqueta valor_y.
19 Ahora sólo queda pasar los datos de las coordenadas que queremos que aparezcan en las etiquetas. Nuevamente tenemos esta información en las propiedades currentX y currentY. Tiene que quedar así:
Ahora verás que al arrastrar el dedo dentro del lienzo aparecerá un punto y las coordenadas de ese punto debajo.
Fíjate que las coordenadas x:0 y:0 están en la esquina superior izquierda. Cuanto más abajo pulses, la coordenada Y va creciendo. Cuanto más a la derecha pulses, la coordenada X irá creciendo.
Si cambias la orientación de tu móvil o tablet verás que el tamaño del lienzo también cambia. Lógicamente el lienzo se vuelve más ancho y corto si trabajas con tu dispositivo colocado de forma horizontal, y se estrecha y alarga si lo pones en vertical. Pruébalo. Cuando hayas terminado puedes grabar tu proyecto.
Es importante entender cómo funcionan estas coordenadas porque serán necesarias para que puedas colocar de forma precisa tus imágenes en la pantalla de tus aplicaciones. Vamos a hacer un pequeño programa que nos ayudará a entenderlo mejor.
1 Crea un nuevo proyecto y llámalo "coordenadas".
2 En las propiedades de la pantalla (Screen) cambia la propiedad AlignHorizontal a Center y desactiva la propiedad Scrollable. Ahora añade un componente Canvas (Lienzo) y cambia sus propiedades Witdh (Ancho) y Height (Largo) a Fill Parent.
3 Ahora añade un botón justo debajo y cambia el texto del botón por "Borrar".
4 Por último añade un componente HorizontalArrangement justo al final.
5 Dentro de este último componente coloca cuatro etiquetas (label). Asegúrate de que quedan en orden de izquierda a derecha.
6 Cambia el texto de la primera etiqueta label1 por "X: ".
7 En la segunda etiqueta label2 cambia su nombre por valor_x y cambia el texto por "0"
8 Cambia el texto de la tercera etiqueta label3 por " / Y:".
9 Por último cambia el nombre de la cuarta etiqueta label4 por valor_y y el texto por "0"
10 Tiene que quedarte así:
11 Vamos ahora al Editor de bloques.
12 En primer lugar vamos a programar el botón para que se borre el lienzo al pulsarlo. Selecciona el componente button1 y coge
el evento button1.Click.
13 Ahora selecciona el componente Canvas y busca el bloque "call Canvas1.Clear" y sitúalo dentro del evento .Click tal y como hemos aprendido antes.
14 Ahora selecciona nuevamente el componente Canvas y coge el evento Canvas1.Dragged. Recuerda que este evento nos dice si el usuario está arrastrando el dedo por el lienzo dándonos, entre otras, las coordenadas actuales (currentX y currentY).
15 Vamos a dibujar un punto donde el usuario tenga el dedo así que selecciona de nuevo el componente Canvas y busca el bloque Canvas1.DrawPoint (dibujar punto) y colócalo dentro del evento Canvas1.Dragged.
16 Tal y como hemos aprendido antes, este bloque espera que le digamos las coordenadas donde queremos dibujar el punto. Como estamos dentro del evento .Dragged y este evento nos pasa precisamente esa información en las propiedades currentX y currentY, vamos a usarlas. Recuerda que las tienes en el bloque .Dragged. Sólo tienes que colocar el ratón sobre ellas y arrastrar los bloques “get currentX” y “get currentY” a su lugar correspondiente.
17 También queremos que cuando el usuario pulse la pantalla nos muestre las coordenadas del lienzo donde ha pulsado usando las etiquetas que hemos preparado para ello. Selecciona la etiqueta valor_x, busca el bloque "set valor_x to" y ponlo dentro del evento .Dragged debajo del bloque .DrawPoint.
18 Haz lo mismo con la etiqueta valor_y.
19 Ahora sólo queda pasar los datos de las coordenadas que queremos que aparezcan en las etiquetas. Nuevamente tenemos esta información en las propiedades currentX y currentY. Tiene que quedar así:
Ahora verás que al arrastrar el dedo dentro del lienzo aparecerá un punto y las coordenadas de ese punto debajo.
Fíjate que las coordenadas x:0 y:0 están en la esquina superior izquierda. Cuanto más abajo pulses, la coordenada Y va creciendo. Cuanto más a la derecha pulses, la coordenada X irá creciendo.
Si cambias la orientación de tu móvil o tablet verás que el tamaño del lienzo también cambia. Lógicamente el lienzo se vuelve más ancho y corto si trabajas con tu dispositivo colocado de forma horizontal, y se estrecha y alarga si lo pones en vertical. Pruébalo. Cuando hayas terminado puedes grabar tu proyecto.
Usando varias pantallas
App
Inventor nos permite usar varias pantallas dentro de nuestras
aplicaciones. Cada pantalla se comporta como un programa aparte. Cada
vez que cambias de pantalla en el Diseñador verás que cambia también el
Editor de bloques. Esto te permite programar cada pantalla con sus
bloques correspondientes de forma independiente.
Vamos a hacer un programa que muestre una pantalla de bienvenida o Splash Screen. Recuerda que las pantallas de inicio de las aplicaciones se llaman SplashScreens y sirven para dar la bienvenida a tus usuarios o cuando la aplicación tarda un tiempo en arrancar y no quieres que tus usuarios se impacienten. Vamos a ver cómo hacerlo con AppInventor.
1 Crea un nuevo proyecto y llámalo: "pantallas".
2 Recuerda que puedes cambiar el nombre de las pantallas pero para nuestro ejemplo las vamos a dejar como están: Screen1 y Screen2.
3 Cambia las siguientes propiedades del componente Screen: AlignHorizontal=center, Scrollable=no, AlignVertical=center.
4 Cambia también el color de fondo por el que quieras.
5 Añade un componente label y cambia el texto por:" Bienvenido a mi aplicación". Añade un botón y cambia el texto por "Continuar".
6 Vamos al Editor de bloques.
7 Coge el evento .Click del botón.
8 Añade dentro un bloque "open another screen" (abrir otra pantalla) que encontrarás en la categoría Control.
Este procedimiento nos permite abrir otra pantalla dando el nombre exacto de la pantalla que queremos abrir. Ten cuidado con las mayúsculas y las minúsculas en el nombre.
9 Crea un bloque de texto con el texto: "Screen2".
10 Pégalo al bloque anterior.
11 Vamos a añadir la segunda pantalla de nuestro programa. Pulsa en "Add Screen" (añadir pantalla) aquí:
12 Como en la pantalla anterior, cambia las siguientes propiedades del componente screen: AlignHorizontal=center, Scrollable=no, AlignVertical=center.
13 Cambia también el color de fondo por otro nuevo.
14 Añade un componente label y cambia el texto por: "Esta es la pantalla principal de mi aplicación".
15 Añade un botón y cambia el texto por "Volver".
16 Vamos al Editor de bloques.
17 Coge el evento .Click del botón
18 Añade dentro otro bloque "open another screen" de la categoría Control.
19 Crea un bloque de texto con el texto: "Screen1".
20 Pégalo al bloque anterior.
De esta manera al pulsar el botón volveremos a la pantalla anterior.
Recuerda también que en ocasiones puede parecer que los cambios que hagas en tus aplicaciones no se reflejan en tu aplicación cuando las instalas en tu dispositivo.
Si es así, prueba a cerrar el navegador que uses con App Inventor para borrar la cache y prueba a instalarla de nuevo.
Vamos a hacer un programa que muestre una pantalla de bienvenida o Splash Screen. Recuerda que las pantallas de inicio de las aplicaciones se llaman SplashScreens y sirven para dar la bienvenida a tus usuarios o cuando la aplicación tarda un tiempo en arrancar y no quieres que tus usuarios se impacienten. Vamos a ver cómo hacerlo con AppInventor.
1 Crea un nuevo proyecto y llámalo: "pantallas".
2 Recuerda que puedes cambiar el nombre de las pantallas pero para nuestro ejemplo las vamos a dejar como están: Screen1 y Screen2.
3 Cambia las siguientes propiedades del componente Screen: AlignHorizontal=center, Scrollable=no, AlignVertical=center.
4 Cambia también el color de fondo por el que quieras.
5 Añade un componente label y cambia el texto por:" Bienvenido a mi aplicación". Añade un botón y cambia el texto por "Continuar".
6 Vamos al Editor de bloques.
7 Coge el evento .Click del botón.
8 Añade dentro un bloque "open another screen" (abrir otra pantalla) que encontrarás en la categoría Control.
Este procedimiento nos permite abrir otra pantalla dando el nombre exacto de la pantalla que queremos abrir. Ten cuidado con las mayúsculas y las minúsculas en el nombre.
9 Crea un bloque de texto con el texto: "Screen2".
10 Pégalo al bloque anterior.
11 Vamos a añadir la segunda pantalla de nuestro programa. Pulsa en "Add Screen" (añadir pantalla) aquí:
12 Como en la pantalla anterior, cambia las siguientes propiedades del componente screen: AlignHorizontal=center, Scrollable=no, AlignVertical=center.
13 Cambia también el color de fondo por otro nuevo.
14 Añade un componente label y cambia el texto por: "Esta es la pantalla principal de mi aplicación".
15 Añade un botón y cambia el texto por "Volver".
16 Vamos al Editor de bloques.
17 Coge el evento .Click del botón
18 Añade dentro otro bloque "open another screen" de la categoría Control.
19 Crea un bloque de texto con el texto: "Screen1".
20 Pégalo al bloque anterior.
De esta manera al pulsar el botón volveremos a la pantalla anterior.
Recuerda también que en ocasiones puede parecer que los cambios que hagas en tus aplicaciones no se reflejan en tu aplicación cuando las instalas en tu dispositivo.
Si es así, prueba a cerrar el navegador que uses con App Inventor para borrar la cache y prueba a instalarla de nuevo.
