Table

TableLayout es un objeto ViewGroup que muestra elementos View secundarios en filas y columnas.

Nota: Para un mejor rendimiento y asistencia con las herramientas, debes crear en cambio tu diseño con ConstraintLayout.

TableLayout posiciona sus elementos secundarios en filas y columnas. Los contenedores de TableLayout no muestran líneas de bordes para las filas, columnas o celdas. La tabla tendrá la misma cantidad de columnas que la fila con la mayor cantidad de celdas. Una tabla puede dejar celdas vacías. Las celdas pueden abarcar varias columnas, al igual que en HTML. Puedes abarcar columnas si usas el campo span de la clase TableRow.LayoutParams.

Nota: Las celdas no pueden abarcar varias filas.

Los objetos TableRow son las vistas secundarias de TableLayout (cada TableRow define una sola fila de la tabla). Cada fila tiene cero o más celdas, cada una de las cuales se define por cualquier clase de otra vista. Por lo tanto, las celdas de una fila pueden estar compuestas por una variedad de objetos View, como objetos ImageView o TextView. Una celda también puede ser un objeto ViewGroup (por ejemplo, puedes anidar otro contenedor TableLayout como celda).

El siguiente ejemplo de diseño tiene dos filas y dos celdas en cada uno. La captura de pantalla complementaria muestra el resultado, y se muestran los bordes de las celdas como líneas de puntos (agregadas para lograr un efecto visual).

    <?xml version="1.0" encoding="utf-8"?>
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="1">
        <TableRow>
            <TextView
                android:text="@string/table_layout_4_open"
                android:padding="3dip" />
            <TextView
                android:text="@string/table_layout_4_open_shortcut"
                android:gravity="right"
                android:padding="3dip" />
        </TableRow>

        <TableRow>
            <TextView
                android:text="@string/table_layout_4_save"
                android:padding="3dip" />
            <TextView
                android:text="@string/table_layout_4_save_shortcut"
                android:gravity="right"
                android:padding="3dip" />
        </TableRow>
    </TableLayout>
    

Las columnas pueden ocultarse, marcarse para extenderse y rellenar el espacio disponible de la pantalla, o pueden marcarse como retráctiles para forzar la reducción de la columna hasta que la tabla se adecue a la pantalla. Consulta la documentación de TableLayout reference para obtener más detalles.

Ejemplo

  1. Comienza un nuevo proyecto con el nombre HelloTableLayout.
  2. Abre el archivo res/layout/main.xml e inserta lo siguiente:
        <?xml version="1.0" encoding="utf-8"?>
        <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:stretchColumns="1">
    
            <TableRow>
                <TextView
                    android:layout_column="1"
                    android:text="Open..."
                    android:padding="3dip" />
                <TextView
                    android:text="Ctrl-O"
                    android:gravity="right"
                    android:padding="3dip" />
            </TableRow>
    
            <TableRow>
                <TextView
                    android:layout_column="1"
                    android:text="Save..."
                    android:padding="3dip" />
                <TextView
                    android:text="Ctrl-S"
                    android:gravity="right"
                    android:padding="3dip" />
            </TableRow>
    
            <TableRow>
                <TextView
                    android:layout_column="1"
                    android:text="Save As..."
                    android:padding="3dip" />
                <TextView
                    android:text="Ctrl-Shift-S"
                    android:gravity="right"
                    android:padding="3dip" />
            </TableRow>
    
            <View
                android:layout_height="2dip"
                android:background="#FF909090" />
    
            <TableRow>
                <TextView
                    android:text="X"
                    android:padding="3dip" />
                <TextView
                    android:text="Import..."
                    android:padding="3dip" />
            </TableRow>
    
            <TableRow>
                <TextView
                    android:text="X"
                    android:padding="3dip" />
                <TextView
                    android:text="Export..."
                    android:padding="3dip" />
                <TextView
                    android:text="Ctrl-E"
                    android:gravity="right"
                    android:padding="3dip" />
            </TableRow>
    
            <View
                android:layout_height="2dip"
                android:background="#FF909090" />
    
            <TableRow>
                <TextView
                    android:layout_column="1"
                    android:text="Quit"
                    android:padding="3dip" />
            </TableRow>
        </TableLayout>
        

    Observa cómo esto se asemeja a la estructura de una tabla HTML. El elemento TableLayout es similar al elemento <table> de HTML; TableRow es similar a un elemento ><tr>>, pero para las celdas, puedes usar cualquier clase de elemento View. En este ejemplo, se usa un objeto TextView para cada celda. En medio de algunas de las filas, también hay un objeto View básico, que se usa para dibujar una línea horizontal.

  3. Procura que el objeto Activity de tu contenedor HelloTableLayout cargue este diseño en el método onCreate():

    Kotlin

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.main)
        }
        

    Java

        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
        }
        

    El método setContentView(int) carga el archivo de diseño para el objeto Activity, especificado por el ID de recurso: R.layout.main hace referencia al archivo de diseño res/layout/main.xml.

  4. Ejecuta la aplicación.

Deberías ver lo siguiente: