Vamos a utilizar los componentes de cámara y listPicker para crear un editor de fotos en App Inventor. Aprovechando las fiestas navideñas vamos a crear un app en la que podamos tomar una foto y posteriormente editarla y visualizarla. Y más tarde podrás compartirla con tus amigos o familiares.
El diseño del editor de fotos en App Inventor
Nuestra aplicación consta de tres pantallas. La primera contendrá dos botones. el primero abrira la camara y una vez tomada la foto nos dirigirá a la segunda pantalla. El segundo botón nos dirigirá a la tercera pantalla donde podremos ver todas nuestras fotos.
La segunda pantalla consta de una disposición horizontal que quedará situada arriba de la pantalla, y contendrá dos botones. El primer botón, servirá para retroceder, y el segundo para guardar la imagen. Tendremos también una disposición horizontal donde aparecerá nuestra imagen tomada con la cámara del dispositivo, y dentro de este meteremos un sprite. Por último una disposición horizontal con scroll, donde meteremos seis botones, a estos le asociaremos una imagen con transparencia.
La tercera pantalla solo tendrá un componente imagen que mostrara la imagen seleccionada del listpicker.
Programando la aplicación.
Comenzaremos por programar el boton de tomar foto de nuestra primera pantalla. Necesitamos que al pulsar en el, se abra la cámara para poder tomar la foto. después esta instantánea tenemos que utilizarla en la segunda pantalla, es decir, una vez tomada la foto abriremos la segunda pantalla y mandaremos la foto a dicha pantalla.
Seguido vamos a programar el botón para abrir la galería y buscar la foto tomada o las fotos que guardamos después de editar. Para ello al pulsar al botón abriremos el selector de galería, y después de seleccionar una imagen abriremos la tercera pantalla y mandaremos la foto a dicha pantalla.
Programando la Screen2
Ahora no vamos a dirigir a la pantalla de bloques de nuestra screen 2 y vamos a programarla. Lo primero que vamos hacer es crear dos variables. La primera la llamaremos «NumeroImagen» y la inicializamos a 0. La segunda la llamaremos «Imagen» y la inicializamos con el valor devuelto por la pantalla anterior, en nuestro caso la Screen1. Esto lo haremos utilizando el bloque «Tomar el valor inicial» que se encuentra en bloques –> Integrados –> control.
Una vez que ya tenemos nuestras variables inicializadas, queremos que ponga de imagen en el fondo del lienzo, la imagen devuelta por la Screen1 y que se encuentra en nuestra variable «Imagen».
Ahora que tenemos nuestra imagen cargada vamos a proceder a editarla. La manera de hacerlo sigue un proceso bien sencillo. Cada vez que se pulsa unos de los botones de la disposición horizontal con scroll de la parte inferior de la pantalla, se carga la imagen del mismo botón al sprite que ya introdujimos, y a este mismo se le escala a las dimensiones de la imagen del lienzo. De esta manera como la imagen cargada en el sprite es una imagen con transparencia y redimensionada queda bien integrada. Tendrás que hacerlo con cada uno de los botones.
Guardando la imagen en el editor de fotos en App Inventor
Ya tenemos una foto y la hemos editado. Ahora solo nos falta guardar y poder volver atrás. ahora si pulsamos en el botón que contiene un icono de guardar, la aplicación nos mostrará una notificación. Esta notificación mostrará al usuario un aviso de que la imagen será guardada. Además utilizaremos la variable anteriormente creada «NumeroImagen» para dar nombre al archivo, y que incrementaremos en uno cada vez que pulsemos en el botón de guardar. De esta manera impedimos que el archivo se sobrescriba con el mismo nombre.
Si el usuario en la notificación pulsa la opción de «Guardar», guardaremos el archivo y mostraremos una notificación de que este se ha guardado.
Si el usuario pulsa el botón de retroceso que colocamos en la parte superior de la pantalla volverá a la Screen1.
Programando la Screen3.
Ya casi hemos terminado solo falta programar la Screen3. Esta pantalla solo mostraba la imagen seleccionada en la Screen1, y lo haremos recogiendo el valor devuelto al abrir la pantalla. Una vez que pulses el botón de retroceso del teléfono, este volvera atras.
Bueno ahora si podremos probar nuestra aplicación y crear bonitas imagenes de navidad para compartir con nuestras familias o amigos.
¿Te ha gustado el post? Entonces, suscríbete para recibir post como este. Y si quieres comentar algo acerca del articulo o quieres que toquemos algo de tu interés en futuros artículos, no dudes en dejar un comentario. También puedes dejar un comentario en las redes sociales y compartirlo.
No hay comentarios:
Publicar un comentario