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.

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.

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.




Si te ha gustado compartelo
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Pin on Pinterest
Pinterest

Deja un comentario

error: Content is protected !!