¿Cuál es el equivalente de “colspan” en un TableLayout de Android?

5 minutos de lectura

avatar de usuario
pico williams

Estoy usando un TableLayout en Android. En este momento tengo un TableRow con dos elementos y, debajo de eso, un TableRow con un elemento. Se representa así:

-----------------------------
|   Cell 1    |  Cell 2     |
-----------------------------
|   Cell 3    |
---------------

Lo que quiero hacer es hacer que la Celda 3 se extienda a lo largo de ambas celdas superiores, para que se vea así:

-----------------------------
|   Cell 1    |  Cell 2     |
-----------------------------
|           Cell 3          |
-----------------------------

En HTML, usaría COLSPAN… ¿cómo hago que esto funcione en Android?

  • En mi humilde opinión, encontré una mejor manera de hacer esto. Aquí la respuesta: stackoverflow.com/a/18682293/1979882

    – Viacheslav

    8 de septiembre de 2013 a las 9:39

  • Para que conste, observe que un TableLayout es esencialmente un LinearLayout. Eso significa que puede agregar cualquier niño directamente. Entonces, para una vista única de todas las columnas, puede omitir TableRow.

    – ralfoide

    2 de febrero de 2015 a las 22:47

avatar de usuario
Sephy

Parece que hay un atributo que hace eso:
layout_span

ACTUALIZACIÓN: este atributo debe aplicarse a los elementos secundarios de TableRow. NO a TableRow en sí.

  • Sí, este es el indicado. Sin embargo, el widget de diseño de Eclipse no parece saberlo, ya que no figuraba entre las propiedades disponibles. Pero funciona.

    – SpikeWilliams

    26 de abril de 2010 a las 13:30

  • Ya sabes, +1 por tu actualización en la respuesta. ¡Estaba tratando de averiguar por qué Eclipse no da esa opción en Ctrl + Espacio! 😀 😉

    – Nirav Zaveri

    28 de noviembre de 2014 a las 13:20

  • Yo uso layout_span en mi vista. Entonces no puedo usar el peso en esa vista. Tengo que usar wrap_content. ¿Por qué?

    – EC Droide

    31 de julio de 2017 a las 14:07

avatar de usuario
Maragües

Solo para completar la respuesta, el atributo layout_span debe agregarse al elemento secundario, no a TableRow.

Este fragmento muestra la tercera fila de mi tableLayout, que se extiende por 2 columnas.

<TableLayout>
    <TableRow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:text="@string/create" />
    </TableRow>
</TableLayout>

avatar de usuario
Onimusha

Y así es como lo haces programáticamente

//theChild in this case is the child of TableRow
TableRow.LayoutParams params = (TableRow.LayoutParams) theChild.getLayoutParams();
params.span = 2; //amount of columns you will span
theChild.setLayoutParams(params);

  • Es posible que también deba configurar params.weight = 1 para que el contenido distribuido llene la fila.

    – rmirabelle

    20 de agosto de 2013 a las 20:51

  • no funciona stackoverflow.com/a/18682293/1979882 Aquí escribí la explicación.

    – Viacheslav

    8 de septiembre de 2013 a las 9:38


  • Asegúrese de agregar primero al niño a la fila.

    – Artem Kalinchuk

    21 de abril de 2014 a las 10:35

  • @DacSaunders Respuesta revertida. Su edición fue específica para su necesidad. La respuesta original es genérica para el método y 31 pulgares hacia arriba podrían indicarle que tal vez está haciendo algo mal. Vea el comentario de Artem también que destaca que el niño debe agregarse primero. los child en este caso puede ser cualquier cosa, no solo la vista de texto como sugirió su edición. Gracias

    – Onimusha

    25 de noviembre de 2017 a las 15:23

Debe usar layout_weight para llenar toda la fila; de lo contrario, aún llena la columna izquierda o derecha del diseño de la tabla.

<TableRow
  android:id="@+id/tableRow1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_span="2"
            android:layout_weight="1"
            android:text="ClickMe" />

    </TableRow>

Tal vez esto ayude a alguien. Probé la solución con layout_span pero esto no funciona para mí. Así que resolví el problema con este truco. Solo usa LinearLayout en lugar de TableRow donde necesitas colspan, eso es todo.

  • Y no necesita ser un LinearLayout. Puse solo una vista, como quería.

    – JP Magalhaes

    23 de junio de 2013 a las 6:28

avatar de usuario
Mosiur

use android:layout_span en el elemento secundario del elemento TableRow

  • Y no necesita ser un LinearLayout. Puse solo una vista, como quería.

    – JP Magalhaes

    23 de junio de 2013 a las 6:28

avatar de usuario
Pedro

He tenido algún problema con el rango de filas, en el caso de TableRow, Textview, etc., generado con código. Incluso si la respuesta de Onimush parece ser buena, no funciona con la interfaz de usuario generada.

Aquí hay un fragmento de código que … no funciona:

            TableRow the_ligne_unidade = new TableRow(this);
            the_ligne_unidade.setBackgroundColor(the_grey);

            TextView my_unidade = new TextView(this);
            my_unidade.setText(tsap_unidade_nom);
            my_unidade.setTextSize(20);
            my_unidade.setTypeface(null, Typeface.BOLD);
            my_unidade.setVisibility(View.VISIBLE);

            TableRow.LayoutParams the_param;
            the_param = (TableRow.LayoutParams)my_unidade.getLayoutParams();
            the_param.span = 3;
            my_unidade.setLayoutParams(the_param);

            // Put the TextView in the TableRow
            the_ligne_unidade.addView(my_unidade);

El código parece estar bien pero, cuando llega al inicio de “the_params”, devuelve NULL.

Por otro lado, este código funciona de maravilla:

            TableRow the_ligne_unidade = new TableRow(this);
            the_ligne_unidade.setBackgroundColor(the_grey);

            TextView my_unidade = new TextView(this);
            my_unidade.setText(tsap_unidade_nom);
            my_unidade.setTextSize(20);
            my_unidade.setTypeface(null, Typeface.BOLD);
            my_unidade.setVisibility(View.VISIBLE);

            // Put the TextView in the TableRow
            the_ligne_unidade.addView(my_unidade);

            // And now, we change the SPAN
            TableRow.LayoutParams the_param;
            the_param = (TableRow.LayoutParams)my_unidade.getLayoutParams();
            the_param.span = 3;
            my_unidade.setLayoutParams(the_param);

La única diferencia es que empujo Textview dentro de TableRow antes de establecer el intervalo. Y en este caso, funciona. ¡Espero que esto ayude a alguien!

¿Ha sido útil esta solución?