Hablemos de Layouts

Definición

Un Layout es un elemento que representa el diseño de la interfaz de usuario de componentes gráficos como una actividad, fragmento o widget.

Ellos se encargan de actuar como contenedores de views para establecer un orden visual, que facilite la comunicación del usuario con la interfaz de la aplicación.

Un Layout es un recurso con el que puedes describir lo que quieres mostrar por pantalla y cómo lo quieres mostrar. La manera más común de crearlo es a través de un archivo XML.

El Layout es la interfaz de usuario que es la principal sección de interacción entre persona y dispositivo. A todas las funcionalidades disponibles se accede a través de la pantalla, que es por donde se muestra los controles. Es muy importante conseguir que el manejo sea intuitivo y sencillo, y que el aspecto visual sea atractivo y eso lo podemos lograr gracias a los tipos de Layouts.

Atributos

Todos los objetos View y ViewGroup admiten su propia variedad de atributos XML. Algunos atributos son específicos para un objeto View (por ejemplo, TextView admite el atributo textSize ), pero a esos atributos también los heredan otros objetos View que podrían extender esta clase. Algunos son comunes para todos los objetos View ya que se heredan desde la clase View raíz (como el atributo id). Otros atributos se consideran "parámetros de diseño" y son atributos que describen ciertas orientaciones de diseño del objeto View, tal como lo define el objeto principal ViewGroup de ese objeto.

ID

Cualquier objeto View puede tener un Id. con número entero asociado a él para identificar de forma exclusiva la vista en un árbol. Cuando se compila la aplicación, este ID se considera un número entero, pero el ID generalmente se asigna en el archivo XML del diseño como una string, en el atributo id. Este es un atributo XML común a todos los objetos View (definidos por la clase View) y lo usarás con mucha frecuencia. La sintaxis para un ID dentro de una etiqueta XML es la siguiente:

El símbolo arroba (@) al comienzo de la string indica que el analizador de XML debe analizar y expandir el resto de la string de ID e identificarla como un recursos de ID. El símbolo más (+) significa que es un nuevo nombre de recurso que se debe crear y agregar a nuestros recursos (en el archivo R.java). El framework de Android ofrece otros recursos de ID. Al hacer referencia a un ID de recurso de Android, no necesitas el símbolo más, pero debes agregar el espacio de nombres de paquete android de la siguiente manera:

Con el espacio de nombres de paquete android establecido, ahora hacemos referencia a un ID de la clase de recursos android.R, en lugar de la clase de recursos local.

Tamaño(width, height):

Para comprender este concepto vamos a guiarnos por un ejemplo. Supongamos que tenemos una serie de botones. Cada uno de estos botones tiene un tamaño natural basado en el largo del texto que contienen. La combinación de cada uno de los tamaños de los botones probablemente no coincidan exactamente con el ancho de la pantalla del dispositivo (tomando en cuenta que si hablamos de Android tenemos una amplia variedad de tamaños). De la misma forma, está el tema de qué hacer con el espacio restante de la pantalla que no está siendo utilizado.

Por esta razón, a todos los elementos contenidos en un LinearLayout debemos definirles un valor para los atributos android:layout_width y android:layout_height. Tenemos tres posibles opciones:

Se puede asignar una dimensión específica, por ejemplo: 150px que se deberá mostrar de esta forma sin importar la resolución de la pantalla que se tenga.

Se puede utilizar el valor wrap_content, por medio del cual le indicamos a la aplicación que el elemento sólo deberá ocupar lo correspondiente a su tamaño natural.

Por último, se puede utilizar el valor fill_parent (hasta la API 8) o match_parent (API 8 y superiores), que indica que el elemento es libre de utilizar todo el espacio disponible del contenedor en el que se encuentra.

Posición del diseño

Es posible recuperar la ubicación de una vista al invocar los métodos getLeft() y getTop(). El primero devuelve la coordenada izquierda, o X, del rectángulo que representa la vista. El segundo devuelve la coordenada superior, o Y, del rectángulo que representa la vista. Ambos métodos devuelven la ubicación de la vista respecto de su elemento primario. Por ejemplo, cuando getLeft() devuelve 20, significa que la vista se encuentra a 20 píxeles a la derecha del borde izquierdo de su elemento primario directo.

Además, se ofrecen varios métodos convenientes para evitar cálculos innecesarios, y se denominan getRight() y getBottom(). Estos métodos devuelven las coordenadas de los bordes derecho y superior del rectángulo que representa la vista. Por ejemplo, llamar a getRight() es similar al siguiente cálculo: getLeft() + getWidth().

Tamaño, relleno y márgenes

El primer par se conoce como ancho medido y altura medida. Estas dimensiones definen cuán grande quiere ser una vista dentro de su elemento primario. Las dimensiones medidas se pueden obtener llamando a getMeasuredWidth() y a getMeasuredHeight().

El segundo par se conoce simplemente como ancho y altura, o algunas veces ancho de dibujo y altura de dibujo. Estas dimensiones definen el tamaño real de la vista en la pantalla, al momento de dibujarlas y después del diseño. Estos valores pueden ser diferentes del ancho y la altura medidos, pero no necesariamente. El ancho y la altura se pueden obtener llamando a getWidth() y getHeight().

Para medir estas dimensiones, una vista considera su relleno. El relleno se expresa en píxeles para las partes izquierda, superior, derecha e inferior de la vista. El relleno se puede usar para desplazar el contenido de la vista una determinada cantidad de píxeles. Por ejemplo, un relleno izquierdo de 2 empuja el contenido de la vista 2 píxeles hacia la derecha del borde izquierdo. El relleno se puede ajustar usando el método setPadding(int, int, int, int) y se puede consultar llamando a getPaddingLeft(), getPaddingTop(), getPaddingRight() y getPaddingBottom().

Gravedad (gravity)

Hay un parámetro que nos permite controlar el alineamiento de las vistas contenidas en el diseño: la gravedad. Este parámetro, definido en LinearLayout.LayoutParams, y que se corresponde con el atributo android:Layout_gravity no es exclusivo de LinearLayout, FrameLayout también lo proporciona y, por herencia también TableLayout, TableRow e incluso RadioGroup. Los valores disponibles para el parámetro y el resultado obtenido con cada uno de ellos son comunes para todos estos diseños, por lo que les será de aplicación en los demás Layout.

Por defecto, los elementos se alinean a partir de la esquina superior izquierda. Por lo tanto, si creamos una fila de widgets de forma horizontal dentro de un contenedor de tipo LinearLayout, todos ellos se empezarán a alinear a partir de este punto y seguirá ese flujo hasta que todos los widgets aparezcan en la interfaz.

Para cambiar este flujo natural utilizamos el atributo android:layout_gravity en el archivo XML o desde el código Java con el método setGravity(). Al atributo android:layout_gravity se le asigna una cadena de texto que contiene uno o más de estos valores. Si hay más de uno se deparan mediante |. Para cada uno de estos valores existe una constante de igual nombre que se puede utilizar para asignar la gravedad mediante código Java. De forma similar, si en Java se usa más de una constante, se agregan mediante el operador lógico:

top y bottom: alinean el borde superior/inferior de la vista con el del área útil del diseño, sin alterar el tamaño de la vista.

left y right: alinean el borde izquierdo/derecho de la vista con el del área útil del diseño, sin alterar el tamaño de la vista.

center_horizontal y center_vertical: centran la vista horizontal o verticalmente en el área útil del diseño sin alterar su tamaño.

center: centra la vista vertical y horizontalmente, de forma simultánea, en el área útil del diseño sin alterar su tamaño