Responsive Design en App Inventor (I). Botones que se adaptan

Uno de los principales inconvenientes con los que nos enfrentamos cuando realizamos una aplicación es que esta se vea bien en distintos dispositivos con distintas dimensiones de pantallas, densidades de píxeles, etc.

 

El diseño adaptable o responsive design es un concepto que en el mundo web lleva ya triunfando varios años y es algo también deseable en cuanto hablamos de aplicaciones móviles.


En el Curso de Desarrollo de aplicaciones con App Inventor surgió una consulta de un estudiante que deseaba conseguir este efecto. Me pareció muy interesante y necesaria por lo que me gustaría compartir una posible solución con todos vosotros.


Independientemente de que estéis desarrollando una app de productividad o un videojuego es muy probable que queráis distribuirla y enfrentaros por tanto a la cuestión de qué dimensiones poner en cada elemento y cómo mostrarlos...


En la siguiente aplicación, que NO hace nada más que mostrar unos botones, pretendo ilustrar lo que sería la adaptación a la pantalla de estos componentes que deseo que mantengan sus proporciones.

 

La idea reside en mantener la relación de aspecto (ancho x alto) utilizando para ello unas simples cuentas matemáticas.

 

Calculos matemáticos

  

Comentando que mi prioridad era adaptar la proporción de los botones y sabiendo que estos tenían una dimensión real de 300x75 (anchoXalto en píxeles) obtuve mediante una simple división que el "no deformarlos" consistía simplemente en conseguir que el ancho de los mismos siempre fuera 4 veces más que el alto. Por otro lado, considerando que independientemente del tamaño de la pantalla u orientación que tuviera, yo deseaba que su alto ocupase un 12% de la altura creé un procedimiento de nombre ajustaDimensionesBotones y otro denominado ajustaDimensiones que hiciera el trabajo de realizar esos cálculos y establecer las dimensiones acorde a los píxeles de la pantalla del usuario.

 

Comparto con vosotros el enlace a la aplicación en Gallery para que aprovechéis la idea en vuestras propias apps:

Esta es una forma de hacerlo pero no es la única. Podíamos haber conseguido algo similar basándonos en la posibilidad que tenemos en la nueva versión de App Inventor de establecer el tamaño de los botones en base a porcentajes... pero esto será motivo de otro artículo ;-)

 

Todas las opciones y más información en la referencia oficial

 

Happy inventing!

 

Jose Luis Núñez

@twajoseluis

Escribir comentario

Comentarios: 7
  • #1

    Marc (miércoles, 22 junio 2016 03:10)

    Es una petición que no sabía donde ponerla:
    Hay alguna forma de poder actualizar online (sin sacar una nueva actualización en Google Play)? Como actualizar fotografías o "labels". De momento las etiquetas las cambio vía tinyWebDB pero es un poco liado e incomodo.
    Gracias de antemano!

  • #2

    Sebas (miércoles, 22 junio 2016 18:15)

    Puedes hacerlo con Firebase que es más rápido.

  • #3

    Jose Luis Núñez (viernes, 24 junio 2016 11:10)

    Hola Marc,
    haz que las imágenes y etiquetas sean recursos externos.
    Por ejemplo, en el sitio que las necesites haz que apunten a http://URL y esa URL es la que actualizas. Si lo que quieres es mezclar ambas cosas lo suyo es un visor web que apunte a una página sea la que actualizas cada vez que quieras que la app muestre imágenes/etiquetas diferentes.

  • #4

    Thayra Mondragon (lunes, 03 octubre 2016 04:19)

    Quisiera saber si hay alguna manera de contar con más espacio para poder agregar muchos más botones

  • #5

    Roque (lunes, 30 enero 2017 16:30)

    Hola alguien me ayuda con un codigo porfavor , una rueda o bolante al hacer lanzar gire y que con cuerde con la dimension donde se lanzo por favor

  • #6

    GEORGE (viernes, 11 agosto 2017 05:27)

    HOLA MUY BUENO SUS VIDEO ME GUNTAN MUCHO QUIERO SABE COMO PODER PRECIONAR DOS BOTONE EN APP INVENTOR Y QUE SE ACTIVEN LOS DOS
    SALUDO DESDE RD

  • #7

    apps (jueves, 24 agosto 2017 14:11)

    Muchas gracias por el aporte, aunque lo sigo viendo un poco complicado..., lo comparto.