Editor de fotos en App Inventor

image 9 - Editor de fotos en App Inventor

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.

image 1024x166 - Editor de fotos en App Inventor

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.

image 1 1024x100 - Editor de fotos en App Inventor

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.

image 2 - Editor de fotos en App Inventor

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».

image 3 - Editor de fotos en App Inventor

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.

image 4 1024x379 - Editor de fotos en App Inventor

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.

image 5 1024x390 - Editor de fotos en App Inventor

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.

image 6 1024x297 - Editor de fotos en App Inventor

Si el usuario pulsa el botón de retroceso que colocamos en la parte superior de la pantalla volverá a la Screen1.

image 7 - Editor de fotos en App Inventor

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.

image 8 - Editor de fotos en App Inventor

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.

Descarga el proyecto en formato AIA

Si te ha gustado compartelo
facebook - Editor de fotos en App Inventor
Facebook
twitter - Editor de fotos en App Inventor
Twitter
linkedin - Editor de fotos en App Inventor
Linkedin
pinterest - Editor de fotos en App Inventor
Pinterest

6 comentarios en “Editor de fotos en App Inventor”

  1. Muy bueno tu ejemplo y aplicacion, me mostro algunas cosas que no sabia como realizar y como estoy empezando con App Inventor, tu ayuda me fue de maravilla

    Responder
  2. Hola! primero de todo agradecerte todos tus tutoriales, la verdad es que son de gran ayuda! Si me permites una pregunta técnica… Estamos haciendo una app de prueba similar a esta con unos chicos jóvenes que quieren aprender, y mi duda es la siguiente: queremos hacer una app en la cual por ejemplo haga random unos sombreros (los cuales hemos subido nosotros mismos) elija uno concreto y aparezca a la hora de tomarse un selfie. Es decir, que el dibujo salga antes y se vea en la pantalla para poder hacer mejor la foto. Muchas gracias por tu tiempo y un saludo enorme.

    Responder
  3. Lo primero dar las gracias por donar tu conocimiento a mortales que empezamos en este mundillo.
    Y segundo tengo una preguntilla.
    Tengo una aplicación programada con appinventor la cual al pulsar un botón abre la camara del móvil y realiza la fotografía. La foto la guarda con el nombre appinventor….. y así sucesivamente. Hay manera de que la foto la guarde con el nombre que yo quiera? Por ejemplo, el nombre o numero que yo tenga escrito en un campo determinado de la aplicación. Me refiero a que al realizar la foto, tome como nombre directamente la palabra o números que yo tenga puesto en el campo Texto1 por ejemplo.
    Gracias.

    Responder
    • Hola Javi

      Si claro que puedes. Solo tienes que guardar el texto del campo en una variable. Después guardar la imagen usando la variable como nombre.
      Un saludo

      Responder

Deja un comentario

error: Content is protected !!