Grid Layout

Explicación del concepto de Grid Layout

DEFINICIÓN

Hereda de ViewGroup.

Un Layout que coloca sus hijos en un enrejillado rectangular (como unas coordenadas).

Estructura

El enrejillado está compuesto por un conjunto de lineas de una anchura infinitesimal que separa la zona que ocupa el Layout en diferentes celdas.

Las líneas del enrejillado se llaman índices y en un enrejillado con N columnas, tendremos N + 1 índices, desde 0 hasta N.

Especificación de filas y columnas

Un hijo ocupa una o más celdas contiguas, esto se define con los atributos rowSpec y columnSpec.

Cada uno de estos atributos define cuantas filas y columnas va a ocupar un hijo.

IMPORTANTE

Aunque en un Grid Layout no se espera que las celdas que ocupa una View las pueda ocupar otra, Android Studio no impide que esto ocurra. Esto es un error de diseño y puede afectar de manera indeterminada al resultado final.

Asignación de celda por defecto

Si a un hijo no se le asignan los índices de fila y una columna, GridLayout asignará una localización por defecto teniendo en cuenta sus atributos orientation, rowCount and columnCount

Espacio

El espacio entre hijos tendrá que ser especificado utilizando márgenes con los parámetros: leftMargin, topMargin, rightMargin and bottomMargin.

Cuando la propiedad useDefaultMargins está definida, se colocarán los márgenes por defecto alrededor de los hijos, basado en la guía de estilo de UI que se esté utilizando.

Distribución del espacio sobrante

Desde API 21, el exceso de espacio se gestiona con el principio del peso.

En caso de que no se hayan especificado pesos, se respetarán las convenciones anteriores.

Interpretación de GONE

Para el propósito del Layout, se tratan las Views cuya visibilidad es GONE como si tuvieran cero anchura y altura.

Esto difiere de la política de ignorar las Views marcadas como GONE pero es necesario para el buen funcionamiento de este Layout.

USO DESDE XML

IMPORTANTE

Google recomienda el uso de Constraint Layout en exclusiva, sin embargo, se puede dar el caso de que un Relative Layout sea más sencillo de implementar y más útil.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GridLayoutActivity"
    android:layout_rowWeight="5"
    android:layout_columnWeight="4">
</GridLayout>

ATRIBUTOS

android:alignmentMode

Define el modo de alineamiento entre, alienar limites de los hijos o alienar márgenes.

android:columnCount

El número máximo de columnas que se pueden crear automáticamente al crear hijos.

android:columnOrderPreserved

Cuando está marcado como true, fuerza los límites de las columnas en el mismo orden que los índices.

android:orientation

No se utiliza durante el Layout, solo para definir los parámetros de filas y columnas cuando estas no se definen en los atributos.

android:rowCount

El número máximo de filas que se pueden crear automáticamente al crear hijos.

android:rowOrderPreserved

Cuando está marcado como true, fuerza los límites de las filas en el mismo orden que los índices.

android:useDefaultMargins

Indica que se debe utilizar los márgenes por defecto cuando no se indican en los atributos.

android:layout_column

Indica en que columna se va a empezar a pintar la View.

Las columnas se empiezan a contar desde arriba.

android:layout_columnSpan

Indica el número de celdas que ocupa una View de izquierda a derecha.

android:layout_columnWeight

La proporción relativa de espacio horizontal que se debe dar a una View cuando se reparta el espacio excesivo.

android:layout_gravity

Define como se deben colocar los componentes dentro de su grupo.

android:layout_row

Indica en que fila se va a empezar a pintar la View.

Las filas se empiezan a contar desde arriba.

android:layout_rowSpan

Indica el número de celdas que ocupa una View de arriba a abajo.

android:layout_rowWeight

La proporción relativa de espacio vertical que se debe dar a una View cuando se reparta el espacio excesivo.

EJEMPLO

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".GridLayoutActivity"
    android:layout_rowWeight="5"
    android:layout_columnWeight="4">
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="0"
        android:layout_column="2"
        android:layout_rowWeight="1"
        android:layout_columnWeight="1"
        android:layout_rowSpan="1"
        android:layout_columnSpan="1"
        />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="0"
        android:layout_column="3"
        android:layout_rowWeight="2"
        android:layout_columnWeight="1"
        android:layout_rowSpan="2"
        android:layout_columnSpan="1"
        />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_rowWeight="1"
        android:layout_columnWeight="3"
        android:layout_rowSpan="1"
        android:layout_columnSpan="3"
        />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="2"
        android:layout_column="0"
        android:layout_rowWeight="2"
        android:layout_columnWeight="1"
        android:layout_rowSpan="3"
        android:layout_columnSpan="1"
        />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="2"
        android:layout_column="1"
        android:layout_rowWeight="1"
        android:layout_columnWeight="3"
        android:layout_rowSpan="1"
        android:layout_columnSpan="3"
        />
    <View
    android:background="@color/primary"
    android:layout_margin="1dp"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_row="3"
    android:layout_column="1"
    android:layout_rowWeight="1"
    android:layout_columnWeight="3"
    android:layout_rowSpan="1"
    android:layout_columnSpan="3"
    />
    <View
        android:background="@color/primary"
        android:layout_margin="1dp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_row="4"
        android:layout_column="1"
        android:layout_rowWeight="1"
        android:layout_columnWeight="3"
        android:layout_rowSpan="1"
        android:layout_columnSpan="3"
        />
</GridLayout>

PreviousTable Layout NextContainers

Last updated 2 years ago