diseño de componentes

Los componentes de la interfaz de usuario son los que se muestran y es necesario darles un formato adecuado al dispositivo así como su posición dentro de la pantalla. Disponemos de las propiedades habituales de cualquier editor de texto, como puede ser el tipo de letra, el tamaño de la misma, el color tanto de la letra como del fondo,... Pero por otro lado disponemos de dos propiedades fundamentales para definir el tamaño del componente: ancho y alto.

Estos tamaños no se manejan de la manera habitual a como se haría por ejemplo en una presentación, hay que tener en cuenta que una App se presenta en diferentes dispositivos, por lo que esa visualización afectará de si es un móvil pequeño, grande, una tablet o incluso una pantalla de ordenador.

Por ello la manera de manejar el alto y el ancho de los componentes es diferente para que pueda "adaptarse" a esa variedad de dispositivos o incluso si por ejemplo giramos el móvil o no...

La manera de dimensionar los componentes de la interfaz de usuario es la siguiente:

• Automático: con esta opción el tamaño del componente se adapta al contenido del texto mismo y/o al tamaño de la pantalla donde se esté visualizando puesto que la App intentará mostrar todos los componentes que se haya incluido a la misma altura (si estamos dimensionando el ancho) o en la misma columna (si estamos dimensionando el alto)

• Ajustar al contenedor:  con esta opción el componente se dimensionará al tamaño máximo que le permita la pantalla (o la disposición donde esté contenido). Es decir, si el componente está solo y ponemos el ancho como "Ajustar al contenedor", el componente se verá en el dispositivo ocupando todo el ancho de la pantalla independientemente del tamaño de la pantalla del dispositivo. Es la opción más recomendable si queremos que la aplicación se adapte a cada dispositivo desde el que se vaya a usar la aplicación.

• Pixels: como todos sabemos, las pantallas de los dispositivos están formadas por una cuadrícula de pixels, por lo que podremos indicarle que utilice una serie de pixeles a la hora de definir el tamaño (hay que tener en cuenta que diferentes dispositivos pueden tener diferente número de pixeles tanto de alto como de ancho).

• Percent (porcentaje): con esta opción el componente se dimensionará utilizando el porcentaje indicado sobre el total de la pantalla (alto o ancho según la propiedad en la que esté incluyendo). Esta opción también es bastante buena para hacer que  la aplicación se adapte a cada dispositivo desde el que se vaya a usar la aplicación.