TableLayout de 2 columnas con 50% exactamente para cada columna

Question

Esta me desconcierta desde mis primeros pasos con Android. No puedo hacer que ambas columnas en un TableLayout de 2 columnas sean exactamente el 50% cada una.

He aquí un ejemplo:

<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" > 

    <TableLayout 
     android:id="@+id/tablelayout" 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:paddingRight="2dip" > 

     <TableRow> 
      <TextView 
       style="@style/TextViewStandard" 
       android_layout_span="2" 
       android:layout_weight="1" 
       android:text="Bla" /> 
     </TableRow> 

     <TableRow> 
      <TextView 
       style="@style/TextViewStandard" 
       android:layout_weight="1" 
       android:text="Name:" /> 

      <EditText 
       style="@style/EditTextStandard" 
       android:id="@+id/et_name" 
       android:layout_weight="1" /> 
     </TableRow> 

     <TableRow> 
      <TextView 
       style="@style/TextViewStandard" 
       android:layout_weight="1" 
       android:text="URL:" /> 

      <EditText 
       style="@style/EditTextStandard" 
       android:id="@+id/et_url" 
       android:layout_weight="1" /> 
     </TableRow> 

     <TableRow> 
      <Button 
       style="@style/ButtonStandard" 
       android:layout_column="0" 
       android:layout_marginTop="6dip" 
       android:onClick="onClickOk" 
       android:text="@android:string/ok" /> 
     </TableRow> 
    </TableLayout> 
</ScrollView> 

y aquí está la definición de estilo correspondiente:

<resources> 
    <style name="ButtonStandard" parent="@android:style/Widget.Button"> 
     <item name="android:layout_height">wrap_content</item> 
     <item name="android:layout_width">fill_parent</item> 
    </style> 

    <style name="EditTextStandard" parent="@android:style/Widget.EditText"> 
     <item name="android:layout_height">wrap_content</item> 
     <item name="android:layout_marginLeft">2dip</item> 
     <item name="android:layout_marginRight">2dip</item> 
     <item name="android:layout_marginTop">2dip</item> 
     <item name="android:layout_width">fill_parent</item> 
    </style> 

    <style name="TextViewStandard" parent="@android:style/Widget.TextView"> 
     <item name="android:layout_height">wrap_content</item> 
     <item name="android:layout_marginLeft">2dip</item> 
     <item name="android:layout_marginRight">2dip</item> 
     <item name="android:layout_marginTop">2dip</item> 
     <item name="android:layout_width">fill_parent</item> 
     <item name="android:textColor">@android:color/white</item> 
    </style> 
</resources> 

esto se convierte realmente en mal estado con una casilla en cuestión.

¿Qué pasa con mi definición?

Muchas gracias de antemano. HJW

Answer 1

Ha intentado establecer el atributo de android:layout_width a 0dp (y por supuesto mantener el android:layout_weight como 1) en los puntos de vista del niño?

He estado en situaciones similares cuando también quería distribuir el espacio entre las dos vistas secundarias pero no pude hacerlo ya que el elemento secundario con "contenido más amplio" también se volvió más ancho, dentro de su elemento principal, que su hermano. Esto se debió al hecho de que el niño más ancho tenía un ancho inicial mayor. Asegurarse de que ambos niños comenzaron desde el mismo ancho (android:layout_width="0dp" en ambos) también garantiza distribuir el espacio de manera uniforme entre ellos.

Answer 2

Las columnas en la tabla de Android siempre se ajustan a la vista más amplia que en cualquier fila. No hay controles explícitos aquí de las columnas. La vista de cuadrícula tiene más control del tamaño de columna, como: android: columnWidth = "100dp"

Si las vistas izquierda y derecha de la tabla se configuraran con el mismo tamaño, una tabla centrada podría tener dos columnas espaciadas al 50% .

Answer 3

Crearía un diseño de tabla Dentro de un diseño de marco sosteniendo su control. En este ejemplo, tengo dos columnas de diseño y puse dos ImageView centradas en cada columna.

<TableLayout 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:stretchColumns="1"> 

     <TableRow> 
      <FrameLayout 
       android:layout_height="wrap_content" 
       android:layout_width="0dp" 
       android:layout_weight="1"> 

       <ImageView android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/button_wedding_day_cheat_sheet" 
        android:id="@+id/buttonWeddingDayCheatSheet" 
        android:onClick="onClickWeddingDayCheatSheet" 
        android:layout_gravity="center_horizontal"> 
       </ImageView> 
      </FrameLayout> 

      <FrameLayout 
       android:layout_height="wrap_content" 
       android:layout_width="0dp" 
       android:layout_weight="1"> 
       <ImageView android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:src="@drawable/button_share_favorite_recipe" 
        android:id="@+id/buttonShareFavoriteRecipe" 
        android:onClick="onClickShareFavoriteRecipe" 
        android:layout_gravity="center_horizontal"> 
       </ImageView> 
       </FrameLayout> 
      </TableRow> 

    </TableLayout> 

Answer 4

Así es como formateo mis tablas de manera uniforme. No es parte de su pregunta, sino que abarca todas las columnas de android: layout_span = "2" en otros niños de TableRow que no contienen el atributo android: layout_column. Espero que esto ayude.

<TableLayout 
    android:id="@+id/tableLayout1" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:stretchColumns="0,1"> 

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

     <TextView 
      android:id="@+id/textView1" 
      android:layout_column="0"> 
     </TextView> 

     <TextView 
      android:id="@+id/textView2" 
      android:layout_column="1"> 
     </TextView> 

    </TableRow> 

</TableLayout>