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.

 

  

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:

• Botones adaptables

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