Tutorial 4: Galería de Imágenes

  1. Portada
  2. Tutorial 4: Galería de Imágenes

Objetivo:

El objetivo de este tutorial es hacer una galería de imágenes que vaya mostrando las diferentes imágenes por medio de un botón "Next". En este tutorial se explicará como se puede incluir recursos adicionales dentro de la aplicación y mostrará un ejemplo del uso del bloque Si-si no/If-else.

Pasos a Seguir

1. Acceso al Entorno
  • Abrir el entorno de desarrollo App Inventor.
    1. Accede a la siguiente dirección: https://appinventor.mit.edu/
    2. Pulsa el botón create app!
    3. Selecciona una cuenta de Google
    4. Acepta los términos y condiciones (solo la primera vez que se accede a la plataforma)

↧

2. Creación de un proyecto nuevo
  • Pulsa el botón “Start new proyect” y pon de nombre al proyecto "Galería de Imágenes"

↧

3. Descarga de recursos adicionales.
  • Descargue del siguiente fichero y extráiga las imágenes del fichero comprimido.
botón de upload botón de upload botón de upload

↧

4. Importación de recursos adicioanles
  • Importe las imágenes como recursos Media dentro de la aplicación
variable con lista vacia
Creación de una lista vacia

↧

5. Diseño de la Interfaz de Usuario
  • Coloque un componente de imagen y un componente botón en la intarfaz con las siguientes configuraciones:
    1. Imagen.With: Fill Parent // Imagen.Ancho: Ajustar al contenedor
    2. Imagen.Height: Fill Parent // Imagen.Alto: Ajustar al contenedor
    3. Imagen.Picture: img1.jpg // Imagen.Imagen: img1.jpg (Seleccionarlo entre los recursos ya cargados)
    4. Botón.With: Fill Parent // Imagen.Ancho: Ajustar al contenedor
    5. Botón.Text: "Next" // Imagen.Texto: "Siguiente"
variable con lista vacia
Propiedades del componente imagen

↧

6. Crea una variable lista con los nombre de los recursos
  • Ve a la sección de bloques de comportamiento y construye una variable lista de tres elementos.
    1. Crea una variable con el bloque "initialize global .... to ". El nombre de la variable podría ser: imageFiles.
    2. Crea una lista y asignala a la variable creada. Haz que la lista sea de tres elementos usando el engranaje del bloque y añadiendo bloques.
    3. Agrega tres bloques de texto y pon en cada uno de ellos los nombres de los recursos adjuntado al proyecto.
variable con lista vacia
Opción de la lista para definir más elementos.
variable con lista vacia
Resultado final tras realizar los pasos.

↧

7. Crear una variable índice.
  • Crea una variable global con valor 1 que tenga de nombre "index". Esta variable será nuestro puntero para saber qué foto se debe de mostrar en la galería.
variable con lista vacia
Resultado final tras realizar los pasos

↧

8. Implementar la lógica del botón
  • Elabora la siguiente lógica para que el botón muestre la siguiente imagen de la lista. Si el puntero supera el número de elementos de la lista se reiniciará al valor inicial.
    1. Define una lógica cuando cuando se pulse el botón "Next".
    2. Define una bifucación de si el valor actual del índice es estrictamente inferior al número de elementos de la lista.
    3. En caso de ser inferior, incrementa en 1 el valor del índice.
    4. En caso de ser superior o igual, defina el valor de índica a 1.
    5. Después de la bifurcación, utilice el índice para saber qué imagen se debe de mostrar.
  • Nota: Es posible elaborar el mismo comportamiento de lógica con diferentes bloques, por ejemplo, por medio de la operación módulo (Resto de la división).
variable con lista vacia
Origen de los bloques de lógica.
variable con lista vacia
Resultado final tras realizar los pasos

↧

9. Compilación de la aplicación e instalación en el dispositivo
  • Pulse el botón de Construir "Build" y seleccione proporcionar código QR para la aplicación QR
  • Lea el código QR con su dispositivo Android y descargue la aplicación
  • Si es la primera vez que instala una aplicación desde App Inventor es necesario permitir al dispositivo móvil instalar aplicaciones de origen desconocido (es decir, aplicaciones fuera del Google Play Store). Para ello:
    • Si durante el primer intento de instalación le proporcione un acceso directo a Ajustes-> Seguridad seleccione instalar aplicaciones de origen desconocido
    • Si tan solo le deniega la posibilida de instalar. Siga los siguientes pasos:
      1. Vaya a Ajustes de su dispositivo Android (Settings)
      2. Acceda a la opción de Seguridad
      3. Marque el checkbox de permitir instalaciones de origen desconocido
  • Tras tener acceso a instalaciones de origen desconocido, intente instalar la aplicación de nuevo.