Android TableLayout con el ancho de la columna diferente en una fila

Estoy tratando de hacer mi primera interfaz gráfica de usuario compleja, pero ahora no puedo resolver este problema.

introduzca la descripción de la imagen aquí

La primera columna de las dos primeras filas sólo tiene que contener la etiqueta, mientras que la segunda columna de las dos primeras filas debe ocupar el espacio restante.

En esta instantánea el problema que he notado es que la primera columna es más grande de lo que me gustaría.

Este es el pedazo de código que implementa esa pieza de diseño.

... ... <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="@drawable/linear_layout_background" android:stretchColumns="*" android:shrinkColumns="*"> <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" > <TextView android:id="@+id/textViewPlateValueLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/plateValue" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/productID" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/back" android:ems="5" android:text="@string/blank" android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" > <TextView android:id="@+id/ztlLabel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/ztl" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/ztlShow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/back" android:text="@string/blank" android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:gravity="center" > <TextView android:id="@+id/isAllowed" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/blank" android:background="@drawable/back" android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> </TableLayout> ... ... 

Además, puesto que son realmente impráctico, quisiera pedirle un cierto consejo sobre los mejores acercamientos a utilizar que esto.

Puedes intentar usar layout_weight como este:

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="horizontal" tools:context=".MainActivity" > <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="5dp" android:background="#ff00ff" android:stretchColumns="*" android:shrinkColumns="*"> <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" > <TextView android:id="@+id/textViewPlateValueLabel" android:layout_weight="3" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Label1:" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/productID" android:layout_weight="7" android:layout_width="0dp" android:layout_height="wrap_content" android:background="#00ff00" android:ems="5" android:text="Some Text" android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" > <TextView android:layout_weight="3" android:id="@+id/ztlLabel" android:layout_width="0dp" android:layout_height="wrap_content" android:text="Label2:" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:layout_weight="7" android:id="@+id/ztlShow" android:layout_width="0dp" android:layout_height="wrap_content" android:background="#00ff00" android:text="Some Text" android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:gravity="center" > <TextView android:id="@+id/isAllowed" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Some Text" android:background="#0088ff" android:textAppearance="?android:attr/textAppearanceLarge" /> </TableRow> </TableLayout> </LinearLayout> 

No usaría TableLayout, si fuera usted. Probablemente usaría LinearLayout o RelativeLayout. Puede obtener el mismo efecto con algunos de los atributos XML. Esto es similar a usar el atributo de table de HTML vs. usar div s para simular tablas.

Así, en lugar de una tabla, puede tener LinearLayout dentro de LinearLayout para simular una tabla.

Aunque canDroid , podría ser suficiente para algunos de nosotros, no funcionó para mí, he intentado todo tipo de trucos para hacer que el TableLayout funcione. He encontrado LinearLayout mucho más fácil de usar, aquí es un ejemplo de TableLayout "como" el diseño utilizando LinearLayout , pocas células con una miniatura, y pocos sin.

 <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="0dp"> <TextView android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="94dp" android:layout_margin="5dp" android:text="@string/nut1" /> </LinearLayout> <View android:layout_width="395dp" android:layout_height="2dp" android:background="@color/colorPrimary" tools:layout_editor_absoluteX="8dp" tools:layout_editor_absoluteY="0dp" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" tools:layout_editor_absoluteX="0dp" tools:layout_editor_absoluteY="0dp"> <ImageView android:layout_width="94dp" android:layout_height="94dp" android:adjustViewBounds="false" android:background="@drawable/one" android:contentDescription="@string/nut3" android:cropToPadding="false" android:saveEnabled="false" android:scaleType="center" /> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="94dp" android:layout_margin="10dp" android:text="@string/nut3" /> </LinearLayout> </LinearLayout> 
  • ¿Cómo funciona android: shrinkColumns y android: stretchColumns?
  • Agregar espacio entre columnas de un TableLayout
  • Cómo agregar editText.addTextChangedListener en TableLayout
  • Hacer células de igual anchura y altura para llenar la tabla
  • Disposición de respuesta de Android
  • TableRow no envuelve TextView
  • Las vistas agregadas a TableLayout no se muestran mediante programación
  • ListView o TableLayout?
  • Cómo crear una tabla en Android con varias columnas?
  • Diseño de tabla XML? ¿Dos filas de la misma anchura con botones de igual anchura?
  • Cursor no es visible en EditText cuando se agrega dinámicamente la vista
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.