Gabriel Avellaneda
Usuario VIP
Vimos como crear una simple aplicación para Android y luego subirla a Playstore. Sin embargo, el ejemplo dado fue muy básico y sólo se utilizó la parte de diseño en MIT APP INVENTOR.
La idea de este post es explorar un poco el funcionamiento, poder usar botones y otros elementos que disparen acciones. Si no sabés programación no hay problema porque no habrá que escribir ni una sola línea de código.
La aplicación que se va a desarrollar en este post será un lienzo para dibujar, en el que podamos utilizar distintos colores y borrar.
Para no hacer largo el tutorial, vamos a hacer la aplicación con 2 colores: Negro y Rojo.
Para la estructura de la app, vamos a necesitar:
1: Canvas (lienzo) para dibujar.
2: Secciones para colocar nuestros botones (1 sección para los colores y la otra para el borrado).
Entonces, en la pestaña "Palette" desplegamos "Layout" para ubicar el elemento "HorizontalArrangement" y arrastrarlo hasta la Screen
Luego, también dentro de "Palette", desplegramos "Drawing and Animation" y arrastramos Canvas a la Screen
Repetimos el paso 1 (arrastrar el "HorizontalArrangement")
Esta será entonces nuestra estructura principal. Ahora lo que se debe hacer es alinear los elementos y ajustar un poco las medidas.
Lo primero será posicionarse en Screen (pestaña "Components"), y en la propiedad "AlignHorizontal" seleccionar "Center"
Ajustamos las medidas de nuestros "HorizontalArrangement" en porcentaje, siendo 10% para la altura y 100% para el ancho
Para el Canvas, lo hacemos con 70% para la altura y 95% para el ancho
Ahora colocamos los botones: 2 arriba del canvas (colores) y 1 abajo (borrado)
Para centrar los botones, debemos ajustar la alineación de los elementos padres, es decir, los HorizontalArrangement
Antes de comenzar a "programar", cambiaremos el nombre de los botones para no tener complicaciones
Cambiamos el texto del botón de borrado
Con los otros botones modificamos (esto es simplemente a modo decorativo, es opcional):
1: Color de fondo
2: La forma (óvalo)
3: Color de texto
Listo, ya tenemos todo para comenzar a "programar" la aplicación. Lo primero será ir a "Blocks"
Dentro de Blocks, desplegamos "Screen" y seleccionamos "Canvas1" (o el nombre que tenga si es que se lo cambiaron).
Nos van a aparecer una serie de bloques; el que tenemos que arrastrar es "When Canvas1. Dragged".
Este bloque me sirve para tomar determinada acción (do) cuando el usuario arrastre los dedos sobre el lienzo.
Unimos ambos bloques para indicar que cuando el usuario arrastre los dedos sobre el lienzo, el objeto Canvas1 llame a la función dibujar línea. Ahora falta indicarle como hacerlo
La información que necesita la función DrawLine son las coordenadas "x" e "y" de los dedos antes de arrastrarlos y después de hacerlo para dibujar ese trayecto. Para eso, desplegaremos Built-in y concatenaremos 4 variables al bloque: las posiciones "x" e "y" de los dedos antes y después.
Rojo: Posterior
Verde: Actual
Ahora vamos a indicarle a los botones qué hacer cuando el usuario los presiona. Para ello, en cada uno de los botones arrastramos el bloque:
When "NombreBotón".Click
Do
Ya sabemos entonces que algo ocurrirá cuando el usuario presione el botón; ahora hay que especificar qué es lo que pasará.
Para el botón de borrado, simplemente llamamos a la función "Clear" de Canvas1
Para los otros botones, le indicamos que queremos cambiar el color de la línea
Para indicar el color que queremos según el botón, desplegamos "built-in", seleccionamos "Colors" y concatenamos donde corresponde.
Nuestra aplicación está lista. Testeamos con el teléfono (AI Companion)
Saludos
La idea de este post es explorar un poco el funcionamiento, poder usar botones y otros elementos que disparen acciones. Si no sabés programación no hay problema porque no habrá que escribir ni una sola línea de código.
La aplicación que se va a desarrollar en este post será un lienzo para dibujar, en el que podamos utilizar distintos colores y borrar.
Para no hacer largo el tutorial, vamos a hacer la aplicación con 2 colores: Negro y Rojo.
Para la estructura de la app, vamos a necesitar:
1: Canvas (lienzo) para dibujar.
2: Secciones para colocar nuestros botones (1 sección para los colores y la otra para el borrado).
Entonces, en la pestaña "Palette" desplegamos "Layout" para ubicar el elemento "HorizontalArrangement" y arrastrarlo hasta la Screen
Lo primero será posicionarse en Screen (pestaña "Components"), y en la propiedad "AlignHorizontal" seleccionar "Center"
Ajustamos las medidas de nuestros "HorizontalArrangement" en porcentaje, siendo 10% para la altura y 100% para el ancho
Para el Canvas, lo hacemos con 70% para la altura y 95% para el ancho
Ahora colocamos los botones: 2 arriba del canvas (colores) y 1 abajo (borrado)
Para centrar los botones, debemos ajustar la alineación de los elementos padres, es decir, los HorizontalArrangement
1: Color de fondo
2: La forma (óvalo)
3: Color de texto
Nos van a aparecer una serie de bloques; el que tenemos que arrastrar es "When Canvas1. Dragged".
Este bloque me sirve para tomar determinada acción (do) cuando el usuario arrastre los dedos sobre el lienzo.
Nuevamente hacemos click en Canvas1 y esta vez seleccionamos el bloque violeta que muestra la figura a continuación. Esto nos sirve para llamar a la función "DrawLine", que traducido literalmente al español, es dibujar una línea.Unimos ambos bloques para indicar que cuando el usuario arrastre los dedos sobre el lienzo, el objeto Canvas1 llame a la función dibujar línea. Ahora falta indicarle como hacerlo
Verde: Actual
Ahora vamos a indicarle a los botones qué hacer cuando el usuario los presiona. Para ello, en cada uno de los botones arrastramos el bloque:
When "NombreBotón".Click
Do
Ya sabemos entonces que algo ocurrirá cuando el usuario presione el botón; ahora hay que especificar qué es lo que pasará.
Para el botón de borrado, simplemente llamamos a la función "Clear" de Canvas1
Para los otros botones, le indicamos que queremos cambiar el color de la línea
Para indicar el color que queremos según el botón, desplegamos "built-in", seleccionamos "Colors" y concatenamos donde corresponde.
Nuestra aplicación está lista. Testeamos con el teléfono (AI Companion)
Adjuntos
-
1543095661647.png -
1543096305605.png
Última edición:
