Efecto Swipe(deslizar el dedo) en App Inventor

El efecto Swipe o "deslizar el dedo" es un efecto bastante común en numerosas aplicaciones móviles.

 

Recientemente, una alumna del curso de aplicaciones móviles con App Inventor me pregunto cómo podía realizarse y me pareció una consulta muy interesante para realizar una pequeña app de ejemplo.

 

Lo más sencillo si tenemos una lista de imágenes que queremos mostrar es colocarlas todas con nombres correlativos, esto es: 1, 2, 3 , ...etc. sin olvidarnos por supuesto de su extensión correspondiente ya sea ".png" o ",jpg". En esta prueba de concepto las imágenes son simples números pero vosotros podéis cambiarlas por las que deseéis teniendo en cuenta simplemente el nombre para adecuarla a vuestra app.

 

Las imágenes las cargaremos sobre un componente de tipo Canvas(Lienzo) y serán desplazadas conforme al movimiento del dedo del usuario. Utilizando dicho lienzo controlaremos el evento Lanzado así como la dirección del dedo del usuario.

 

Teniendo en cuenta que el dedo lo puede desplazar ligeramente hacia arriba o hacia abajo por eso utilizamos la función valor absoluto y en función de ella incrementaremos o decrementaremos la posición actual del índice sobre la lista que muestra las imágenes. Simplemente como consideración a lo anterior es que tenemos que tener en cuenta que llegados al índice 0 o al índice que tiene el número de imágenes + 1 tendremos literalmente que "dar la vuelta".

 

Y como dice un amigo al que tengo mucho aprecio, "compartir es vivir", así que os dejo el enlace a la app original para que la descarguéis, probéis y personalicéis como queráis:

  

Happy inventing!

 

Jose Luis Núñez

@twajoseluis

 

 

 

 

 

PD: Para hacer funcionar la app en vuestro entorno de App Inventor aseguraos que este está configurado en idioma español ;-)

Escribir comentario

Comentarios: 14
  • #1

    Jose Guerra (lunes, 04 julio 2016 18:11)

    Da error al tratar de deslizar la imagen con el dedo (runtime error) De igual forma me gustaría saber como haría si yo subiese unas imágenes como hace la persona para descargarla. Gracias.

  • #2

    Amilcar (lunes, 04 julio 2016 18:54)

    Si funciona pero solo veo números 1,2,3,4 al deslizar el dedo en la pantalla de mi smartphone yo lo probé con AI Companion

  • #3

    Juan Carlos (lunes, 04 julio 2016 22:19)

    Amilcar es una app que enseña a hacer el efecto swipe, los números como tú dices representan las imágenes que van cambiando para que entiendas como van de un lado hacia otro... En tu app las cambias con las que tú quieras.

  • #4

    Jose Luis (martes, 05 julio 2016 08:13)

    Jose Guerra(#1) el error que te sale puede ser porque tengas App Inventor en inglés. Mi código siempre lo doy en español y si no cambias el idioma te dará ese tipo de problemas.

    Amilcar(#2) los números son las imágenes que se desplazan con el dedo, como bien te dijo Juan Carlos, tienes que sustituir esas imágenes por las tuyas propias ;-)

  • #5

    Jonatan (jueves, 07 julio 2016 21:34)

    Hola Jose Luis, siento comentar en este tutorial, pero... cuando estara disponible la tercera parte de la App de preguntas? Somos varias las personas que estamos interesadas :) Te dejo el link ( http://www.tuappinvetorandroid.com/2014/06/05/aplicaci%C3%B3n-de-preguntas-tipo-test-con-app-inventor-2-segunda-parte/ )
    Muchas gracias.
    Un saludo.

  • #6

    Jose Luis (viernes, 08 julio 2016 01:57)

    Jonathan, el tutorial de las preguntas tipo test lo hizo Sebas...ya le he comentado la "petición popular"....a ver si se anima y nos lo termina ;-)

  • #7

    Anna (domingo, 28 agosto 2016 14:48)

    Gracias Jose Luis. Lo acabo de utilizar en una app. Genial.
    Una vez la imagen en pantalla, ¿cómo se puede agrandar con los dedos?

  • #8

    Marcelo (viernes, 07 octubre 2016 22:05)

    Una pregunta. Se puede hacer un submenu que aparezca arriba de las cosas? No se como se dice. Tipo pop up. O al apretar un botón que salga el menú al costado. ¿Y se puede hacer que el botón cambie de diseño al presionarlo? Y que desaparezca el menú automáticamente luego de unos segundos. Gracias. Adjunto Mi correo: marcelo___mendez@hotmail.com.ar

  • #9

    Fredy (jueves, 10 noviembre 2016 21:05)

    Funciona bien, le agregue imágenes y excelente.

    Gracias

  • #10

    manuel (lunes, 29 mayo 2017)

    buenas, como se hace para que una vez que estamos viendo las imagenes al pulsar puedas descargarla al móvil? gracias

  • #11

    karen adela (sábado, 14 octubre 2017 22:04)

    hola quiere que me ayuden con 2 preguntas
    1_ ¿donde estan los recursos medios que vamos agregando en la pantalla de app inventor ?
    2_ comprobar como se elimina los objetos ,de editor de bloques arrastrándolos a la papelera ?

  • #12

    alucard (miércoles, 02 mayo 2018)

    como puedo descargar el codigo?????

  • #13

    Hector Sierra (domingo, 29 marzo 2020 06:34)

    Excelente trabajo,
    Puedo hacer lo Mismo en Thunkable?.
    En vez de solo Imágenes, puedo agregar Texto y Botones?...

  • #14

    Antonio (jueves, 16 abril 2020 18:20)

    ¿Se puede agrandar las imágenes con los dedos?¿Qué bloque he de usar?