COMO ADAPTAR TU APP A DIFERENTES PANTALLAS CON UNOS SENCILLOS PASOS

Es difícil crear una aplicación que se vea igual en diferentes pantallas de dispositivos. Una forma de intentar solucionar esta problema es saber cuánto espacio de pantalla ocupará cada componente, indistintamente del tamaño de la pantalla. Imagina que tienes una imagen y un botón. Si quieres que la imagen ocupe el 80% de la altura total de la pantalla y el botón que ocupe el 20% restante, tendrás que calcular el alto de la pantalla del móvil y de esta manera ajustar cada componente.

En App Inventor nos ofrece una serie de bloques con los que podemos consultar el ancho y alto de la pantalla, que son el ancho y el alto del de la pantalla del dispositivo real en el que se esté ejecutando la aplicación en ese momento. Y podemos usarlos para calcular el espacio que nuestros componentes deben ocupar en la pantalla del dispositivo indistintamente del tamaño que tenga.

En el diseño del layout, tenemos cuatro componentes principales: una etiqueta en la parte superior, una disposición horizontal, una disposición vertical y un botón en la parte inferior. Cada disposición  tiene un componente de etiqueta.

xp4T7orIyH2NcOmA 9jD6zFtYIiRpLQp vrXSFdfRW7smEre29s7yCZP7gPm24ZJMXosLLQryNknHnO7aVMFNVu7vt5JsAtqsCRnbdE0ei6H9FrMavKVK1IG VrB23LISIiUfvq4 - COMO ADAPTAR TU APP A DIFERENTES PANTALLAS CON UNOS SENCILLOS PASOS

Queremos que la etiqueta superior tenga el 10% de la altura, que cada disposición ocupe el 40%, y el 10% en el botón inferior. Eso es un total del 100%. Por supuesto que todos los componentes tengan el ancho total de la pantalla.

F4O4SKYm1L2 Cir88ZqWg2GIe9ROiincmvjHonLNEKMgYtsFL Bam2A I9RQciYAonNHIXk37WIcMjJqnfWEUgRBGOux4CAUn36Am1AonoVnIWuv7Oxhkwq Qcd7m PcE1xNSxGN - COMO ADAPTAR TU APP A DIFERENTES PANTALLAS CON UNOS SENCILLOS PASOS

Como puedes ver, utilizamos el ancho de la pantalla para todos los componentes. Luego le damos la altura a cada componente utilizando la altura de la pantalla multiplicado por el porcentaje de pantalla que queremos que tenga, a si por ejemplo para las etiquetas superiores y el botón tenemos 0.10, qué es el resultado de dividir 10/100. Ten en cuenta que hay una etiqueta dentro de cada disposición. En el diseño, configuramos el ancho y el alto para Ajustarlo al padre para tomar todo el ancho y alto de su disposición.


Me gustaría tu participación en este blog, si tienes alguna pregunta o comentario que hacer, por favor quiero que lo hagas. Además que compartas esta publicación en tus redes sociales y no dejes de comentar.




2 comentarios en «COMO ADAPTAR TU APP A DIFERENTES PANTALLAS CON UNOS SENCILLOS PASOS»

  1. Hola, mi nombre es Alejandro, estoy descubriendo appinventor y tratando de aprender por mi cuenta, esta maravillosa herramienta que nos permite crear sin saber programar ya que, por mi parte, lo que se de programación no se podría considerar ni como muy básico. Me gustó mucho la explicación de como adaptar la app a los distintos tipos de pantalla, lo haces parecer todo muy sencillo y para mi que voy comenzando me alienta a pensar que es posible seguir por este camino. En este momento, para practicar, estoy tratando de hacer una muy simple app para el teléfono y no se como hacer para que la pantalla no gire al voltear el teléfono, es decir, quiero que por mas que el usuario cambie de posición su teléfono, mi app se vea siempre verticalmente, aunque en su teléfono no tenga bloqueada la opción de giro automático. Desde ya muchas gracias por cualquier ayuda que puedas darme. Saludos Alejandro.

    Responder
    • Hola Alejandro

      Para empezar, gracias por tus palabras. Para que la pantalla no gire cuando se rota el teléfono, simplemente tienes que ir a la pantalla del diseñador de tu aplicación y pulsar en el componente Screen, en las propiedades ´donde dice Orientación de la pantalla seleccionar el modo en el que quieres que quede fija la misma.

      Un saludo

      Responder

Deja un comentario

error: Content is protected !!