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


132

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

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

Lo que quiero hacer es hacer que la celda 3 se extienda a través de las dos celdas superiores, de modo que se vea así:

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

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


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

1
Para el registro, observe que un TableLayout es esencialmente un LinearLayout. Eso significa que puede agregar cualquier hijo directamente. Por lo tanto, para una vista única de todas las columnas, puede omitir TableRow.
ralfoide

Respuestas:


196

Parece que hay un atributo que hace eso: layout_span

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


8
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.
Spike Williams el

2
Ya sabes, +1 para tu actualización en la respuesta. ¡Estaba tratando de descubrir por qué Eclipse no da esa opción en Ctrl + Espacio! : D;)
Nirav Zaveri

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

93

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 abarca 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>

36

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);

77
También es posible que deba establecer params.weight = 1 para que el contenido distribuido llene la fila.
rmirabelle

1
No funciona stackoverflow.com/a/18682293/1979882 Aquí escribí la explicación.
Vyacheslav

77
Asegúrese de agregar el niño a la fila primero.
Artem Kalinchuk

1
@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 arriba podrían decirle que tal vez está haciendo algo mal. Vea también el comentario de Artem que destaca que el niño debe agregarse primero. En childeste caso, puede ser cualquier cosa, no solo la vista de texto como sugiere su edición. Gracias
Onimusha

27

Debe usar layout_weight para completar toda la fila; de lo contrario, aún ocupa 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>

3
Gracias. Esta era la información que faltaba para elementos pequeños o flexibles, en mi caso un Spinner.
chksr

5

Quizás esto ayude a alguien. Intenté la solución layout_spanpero esto no funciona para mí. Así que resolví el problema con este truco. Simplemente use LinearLayouten lugar de TableRowdonde necesita colspan, eso es todo.


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

3

use android: layout_span en el elemento hijo del elemento TableRow


1

He tenido algún problema con la fila 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 IU generada.

Aquí hay un 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 alcanza el inicio de "the_params", devuelve NULL.

En el otro extremo, este código funciona a las mil maravillas:

            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 presiono la vista de texto dentro de TableRow antes de establecer el intervalo. Y en este caso, funciona. ¡Espero que esto ayude a alguien!


0

Creo que necesitas envolver un diseño alrededor de otro. Tenga una lista de Diseño verticalmente, dentro tenga otra (o en este caso, dos) lista horizontalmente.

Todavía me resulta difícil dividir bien la interfaz en una porción de 50-50 en Android.


Terminé haciendo esto para evitar un error relacionado con la tabla que causaba que 1/3 de mi diseño se ocultara en modo horizontal, por razones desconocidas.
Spike Williams
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.