2-column TableLayout with 50% exactly for each col

问题:

This one puzzles me since my first steps with Android. I can't make both columns in a 2-column TableLayout exact 50% each.

Here's an example:

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

And here's the corresponding style definition:

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

This becomes really messed up with a CheckBox involved.

What's wrong with my definition?

Many thanks in advance. HJW

回答1:

Have you tried to set the android:layout_width attribute to 0dp (and of course keep the android:layout_weight as 1) on the child views?

I have been in similar scenarios when I also wanted to distribute the given space equally between two child views but failed to do so since the child with "wider content" also became wider, within its parent, than its sibling. This was due to the fact that the wider child had a greater initial width. Making sure both children started of from the same width (android:layout_width="0dp" on both of them) also guaranteed to distribute the space evenly among them.

回答2:

This is how I format my tables evenly. Not part of your question but to span all columns android:layout_span="2" on other TableRow children that do not contain the android:layout_column attribute. Hope this helps.

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

回答3:

I would create a table layout Inside a frame layout holding your control. In this example I have two columns layout and I put two ImageView's centered in each column.

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

回答4:

The columns in the android table always adjust to the widest view which in any row. There are no explicit controls here of the columns. Grid view has more control of the column size such as: android:columnWidth="100dp"

If the left and righ view in the table would be set to the same size then a centered table could have two 50% spaced columns.