La columna 80

El blog técnico-personal de Ángel J. Vico… en español

Diseñando interfaces en Android: padding y margen

Posted by Ángel J. Vico en 25 de septiembre de 2011

Al diseñar una interfaz de usuario, una de las cosas de la que nos damos cuenta en seguida es que las vistas que colocamos tienden a colocarse demasiado cerca unas de otras. Si utilizamos wrap_content para que el tamaño de la vista se ajuste al contenido (algo bastante habitual), nos encontramos con frecuencia con textos excesivamente pegados unos a otros, elementos demasiado cerca de los bordes, etc.

Echamos en falta rápidamente una forma de dejar algo de espacio entre las vistas o de alejar su contenido de los bordes. Y para ello Android nos proporciona dos tipos de propiedades, padding y margen (margin). Las dos tienen una función similar, pero la realizan de diferente forma. La principal diferencia es que el padding forma parte de la vista y el margen del diseño. Este detalle, aparte de influir sobre en qué clase se incluyen las propiedades, determina dónde se sitúa ese espacio adicional que añaden. Mientras que el padding es un espacio situado entre el borde de la vista y su contenido, el margen se sitúa entre el borde de la vista y los bordes de los elementos que la rodean o del diseño que la contiene.

Seguramente quede más claro con la siguiente captura:

Diferencia entre padding y margen

El fondo (background) de todos los TextView de esta interfaz se ha establecido en verde, por lo que cada recuadro verde muestra el área total que está ocupando la vista, sus límites. Se puede observar como, si no utilizamos ni padding ni margen (segunda fila), el tamaño de cada vista se ajusta completamente al contenido y las vistas quedan totalmente pegadas unas a otras. Cuando usamos padding (filas 1 y 3) añadimos un espacio entre el texto y los límites de la vista (espacio que se rellena con el fondo). Por su parte, el margen (filas 1 y 4) agrega ese espacio alrededor de los límites de la vista pero por fuera de ella, provocando que las vistas se separen unas de otras y de los bordes de los LinearLayout que las contienen (y permitiendo que se vea el fondo del diseño, azul o rojo en la interfaz de ejemplo). Finalmente, la captura también demuestra que se pueden utilizar las dos propiedades a la vez (fila 1) y el resultado que proporcionan.

El padding es una propiedad de las vistas, como vimos en un post anterior. El margen, al ser externo a las vistas, se deja en mano de los contenedores de vistas, por lo que se implementa como parámetro de los diseños. Sin embargo ambas se utilizan de forma muy similar. Veamos cómo:

Padding

El padding, como propiedad de la clase View, es compartida por todas las vistas, ya sean widgets o diseños. Está formada, en realidad, por cuatro propiedades, una para cada lateral de la vista. En XML se accede a estas propiedades mediante los atributos android:paddingLeft, android:paddingRight, android:paddingTop y android:paddingBottom de las vistas. Estos atributos permiten establecer un valor distinto para cada uno de los laterales o dejar alguno sin asignar. De forma predeterminada, cada una de estas propiedades tiene el valor cero.

En el diseño XML tenemos disponible también el atributo android:padding, que permite establecer el padding de todos los laterales a la vez. Este atributo nos permite ahorrar código cuando queremos que el padding de los cuatro laterales tenga el mismo tamaño.

Para modificar el padding por código disponemos del método setPadding (definido en la clase View). Este método recibe obligatoriamente cuatro valores, que se corresponden con los laterales izquierdo, superior, derecho e inferior, respectivamente. No disponemos de sobrecargas del método setPadding, por lo que siempre tendremos que especificar los cuatro valores cuando asignemos el padding desde Java.

No es la única diferencia entre el uso del padding desde XML y desde Java. Los atributos XML tienen un valor de tipo dimensión. Las dimensiones son un tipo de recurso que incluyen un valor numérico y una unidad. Esto permite definir el padding en términos de píxeles, de medidas físicas como milímetros o pulgadas o incluso de medidas abstractas relativas a la densidad de píxeles de la pantalla o al tamaño de la fuente que se utiliza en la vista. Para más detalles, consulta este post.

Sin embargo, los parámetros del método setPadding son de tipo int y no admiten unidades. Así, en Java sólo se puede establecer el padding en píxeles. No obstante, también hay una forma de calcular en Java los píxeles a los que equivale cualquier dimensión. Lo veremos en un próximo post.

La clase View dispone también de los métodos getPaddingLeft, getPaddingRight, getPaddingTop y getPaddingBottom, que permiten obtener el padding actual de cada lateral de la vista, en píxeles. Hay que tener en cuenta que algunas vistas pueden dejar un espacio adicional para una barra de desplazamiento (suponiendo que la vista admita el uso de barras de desplazamiento y se esté utilizando un estilo para las mismas que requiera espacio adicional). Si es el caso, el valor devuelto por estos métodos get puede no corresponderse con el establecido mediante los atributos XML o el método setPadding.

Margen

Como ya hemos visto, los márgenes son externos a la vista a la que se le aplican. Por lo tanto, no es de extrañar que no sean propiedades de la clase View como ocurre con el padding. En lugar de eso, son parámetros de los diseños.

En un post anterior vimos que los diseños comparten unos parámetros básicos que se definen en la clase ViewGroup.LayoutParams. También que cada diseño define su propia clase LayoutParams que hereda de la de ViewGroup. Lo que no mencioné es que esa herencia no es directa.

Dentro de la clase ViewGroup se define otra clase con parámetros. Se trata de MarginLayoutParams. Esta clase hereda a su vez de ViewGroup.LayoutParams. Las clases de parámetros que se definen en los diseños heredan (directa o indirectamente) de esta clase MarginLayoutParams. De esta forma se agregan los márgenes a los parámetros básicos que comparten todos los diseños.

Al igual que con el resto de parámetros de diseño, los atributos XML correspondientes se aplican sobre las vistas contenidas en el diseño como si fueran propiedades propias. Y, de igual forma, los atributos de MarginLayoutParams también se distinguen mediante el prefijo layout_.

Para establecer los márgenes de cada vista, la clase MarginLayoutParams proporciona los atributos android:layout_marginLeft, android:layout_marginRight, android:layout_marginTop y android:layout_marginBottom. Al igual que con el padding, estos atributos permiten establecer valores de margen diferentes para cada lateral de la vista. También en este caso tenemos un atributo android:layout_margin que permite establecer el mismo valor para el margen de los cuatro laterales a la vez.

Siguiendo con las similitudes, la clase MarginLayoutParams proporciona un método setMargins que permite asignar valores a los márgenes de los laterales izquierdo, superior, derecho e inferior de la vista. Por supuesto, todo lo explicado sobre dimensiones y valores en píxeles para el padding se aplica exactamente igual para el margen.

Recuerda que en esta página dispones de enlaces a todos los artículos sobre Android que he publicado en La columna 80.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s