android - tablas - Diseño de tabla XML? ¿Dos filas de ancho EQUAL se rellenan con botones igualmente anchos?

tabla dinamica excel android

Question

Aquí hay una parte de mi XML para el formato LAND:

<TableLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:stretchColumns="*">
<TableRow>
<Button
android:id="@+id/countbutton"
android:text="@string/plus1"/>
<Button
android:id="@+id/resetbutton"
android:text="@string/reset"
/>
</TableRow>
</TableLayout>

Y ahora lo que no consigo, el ANCHO de una fila y también el botón depende del TEXTO dentro del botón. Si ambos textos son igual de largos, digamos: TEXTO está bien, la mitad de la tabla está en el medio de la pantalla. Pero si tienen un tamaño diferente, digamos "A" y "ESTE ES EL BOTÓN LARGO", el CENTRO de la mesa ya no está en el centro de la pantalla, por lo que los botones no tienen el mismo ancho ...

Answer 1

Buen ejemplo (originalmente de http://androidadvice.blogspot.com/2010/10/tablelayout-columns-equal-width.html )

Probado y funcionando:

<TableRow>
<!-- Column 1 -->
<TextView
android:id="@+id/tbl_txt1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:background="@color/red"
android:textColor="@color/white"
android:padding="10dip"
android:layout_margin="4dip"
android:layout_weight="1"
android:text="Column 1" />
<!-- Column 2 -->
<TextView
android:id="@+id/tbl_txt2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:background="@color/red"
android:textColor="@color/white"
android:padding="10dip"
android:layout_margin="4dip"
android:layout_weight="1"
android:text="Column 2" />
<!-- Column 3 -->
<TextView
android:id="@+id/tbl_txt3"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:background="@color/red"
android:textColor="@color/white"
android:padding="10dip"
android:layout_margin="4dip"
android:layout_weight="1"
android:text="Column 3" />
</TableRow>

Answer 2

El fragmento de diseño

<TableLayout
android:id="@+id/tablelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />

El código que establece programáticamente las propiedades de diseño de los botones en la tabla:

public void addButtons(View view) {
TableLayout tableLayout = (TableLayout) findViewById(R.id.tablelayout);
Context context = getApplicationContext();
tableLayout.removeAllViews();
for (int rowIndex = 0; rowIndex < ROWS; rowIndex++) {
TableRow row = new TableRow(context);
for (int columnIndex = 0; columnIndex < COLUMNS; columnIndex++) {
Button btn = new Button(context);
LayoutParams buttonParams = new LayoutParams(0,
LayoutParams.WRAP_CONTENT, 1f);
btn.setLayoutParams(buttonParams);
row.addView(btn);
}
tableLayout.addView(row);
}
}

Answer 3

Para tener botones en filas donde los botones son del mismo tamaño que necesita hacer.

 <LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dip"/>
<Button android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dip"/>
</LinearLayout>

Y complete las otras propiedades xml para sus botones.

La magia está en las propiedades layout_weight y width. No necesita el diseño de la tabla. Estas propiedades le dicen al diseño que sus vistas deben ocupar el mismo espacio en el diseño principal.

Answer 4

Además de la respuesta aceptada:

Tuve un problema similar cuando necesitaba varias imágenes en una cuadrícula con anchos de columna iguales, así que usé un diseño de tabla. Funcionó, pero como las imágenes se cargaban de forma asíncrona, las columnas correspondientes ocupaban todo el ancho hasta que todas las columnas tenían al menos una imagen en ellas.

Lo resolví usando la solución de Robby Pond, pero no funcionó para la última fila, que no necesariamente tenía tantas imágenes como las otras filas, estirando esas imágenes para ocupar todo el espacio disponible cuando quería que encajaran en el mismas columnas que arriba. Para combatir esto, llené las columnas vacías restantes de esa fila con objetos de vista normales,

usando los mismos parámetros de diseño que todas las otras imágenes:

width = 0, weight = 1. Y eso lo resolvió!