Android XML 表布局？两个等宽的行填充了等宽的按钮？

XML Table layout? Two EQUAL-width rows filled with equally width buttons?

提问by Oliver Goossens

Here's a part from my XML for LAND format:

这是我的 LAND 格式的 XML 的一部分：

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

And now what I dont get - the WIDTH of one row and also of the button depends on the TEXT inside the button. If the both texts are equaly long lets say : TEXT its ok - the table half is in the middle of the screen. But if they have different size - lets say "A" and "THIS IS THE LONG BUTTON" the CENTER of the table isnt in the middle of the screen anymore and so the buttons are not equally width...

现在我没有得到 - 一行和按钮的宽度取决于按钮内的文本。如果两个文本都一样长，让我们说：TEXT 没问题 - 桌子的一半在屏幕中间。但是如果它们有不同的尺寸——比如“A”和“这是长按钮”，桌子的中心不再位于屏幕中间，所以按钮的宽度不一样......

回答by Robby Pond

To have buttons in rows where buttons are the same size you need to do.

要在按钮大小相同的行中放置按钮，您需要这样做。

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

And fill in the other xml properties for your buttons.

并为您的按钮填写其他 xml 属性。

The magic is in the layout_weight and width properties. You don't need the Table layout. These properties tell the layout that your views should take up equal space in the parent layout.

神奇之处在于 layout_weight 和 width 属性。您不需要表格布局。这些属性告诉布局你的视图应该在父布局中占据相等的空间。

回答by may5694

In addition to the accepted answer:

除了接受的答案：

I had a similar problem where I needed several images in a grid with equal column widths, so I used a table layout. It worked, but as the images loaded asynchronously, the corresponding columns would take up the entire width until all columns had at least one image in them.

我有一个类似的问题，我需要在具有相等列宽的网格中放置多个图像，因此我使用了表格布局。它起作用了，但是当图像异步加载时，相应的列将占据整个宽度，直到所有列中都至少包含一张图像。

I solved this using Robby Pond's solution, but it didn't work for the last row, which didn't necessarily have as many images as the other rows, stretching those images to take up all available space when I wanted them to fit in the same columns as above. To combat this, I filled the remaining empty columns of that row with regular View objects,

我使用 Robby Pond 的解决方案解决了这个问题，但它不适用于最后一行，它不一定有与其他行一样多的图像，当我希望它们适合时拉伸这些图像以占用所有可用空间与上面相同的列。为了解决这个问题，我用常规的 View 对象填充了该行剩余的空列，

using the same layout parameters as all the other images:

使用与所有其他图像相同的布局参数：

width = 0, weight = 1.And that solved it!

width = 0, weight = 1.这解决了它！

回答by Uros Majeric

Nice example (originally from http://androidadvice.blogspot.com/2010/10/tablelayout-columns-equal-width.html)

很好的例子（最初来自http://androidadvice.blogspot.com/2010/10/tablelayout-columns-equal-width.html）

Tested and working:

测试和工作：

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

回答by Ram Chhabra

Try This: Tested and working:

试试这个： 测试和工作：

1)For tablelayoutset android:stretchColumns="1"

1)对于 tablelayout设置android:stretchColumns="1"

2)Also set each item(column) layout_width="0dip" and layout_weight="1"

2）同时设置每个项目（列）layout_width="0dip" 和 layout_weight="1"

3)And do not set layout_width of tablerow

3）并且不要设置tablerow的layout_width

        <RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"
            android:paddingBottom="@dimen/activity_vertical_margin"
            tools:context="inext.smartshop.CustomerProfile.CustomerProfileView">


        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">


            <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tablelayout"
            android:stretchColumns="1"
            android:layout_above="@+id/userProfilebtnsignout"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_below="@+id/relativeLayout">

            <TableRow

                android:layout_height="fill_parent"
                android:padding="5dp"
                android:id="@+id/detailsTableRow"
                android:gravity="center_horizontal">

                <TextView

                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Full Name :  "
                android:layout_width="0dip"
                android:layout_weight="1"
                android:id="@+id/textView8"
                android:gravity="right" />

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Ram Chhabra"

                android:id="@+id/userProfilename"

                android:gravity="left" />

            </TableRow>

            <TableRow android:padding="5dp"

                android:layout_height="wrap_content">

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Email Address :  "

                android:id="@+id/textView10"
                android:gravity="right" />

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="[email protected]"
                android:id="@+id/userProfileemail"
                android:gravity="left"
                 />
            </TableRow>

            <TableRow android:padding="5dp">

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Contact No 1 :  "
                android:id="@+id/textView12"

                android:gravity="right" />

                <TextView
                android:layout_width="0dip"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="8130032232"
                android:id="@+id/userProfilecontactone"
                 />
            </TableRow>



            </TableLayout>

        </RelativeLayout>

        </RelativeLayout>

回答by trokiize

First you need to add android:stretchColumns="*"to TableLayout.

首先，您需要添加android:stretchColumns="*"到 TableLayout。

Each TableRow needs to have android:layout_weight="1"in order to strech equaly.

每个 TableRow 都需要具有android:layout_weight="1"才能平等地拉伸。

Each button in TableRow needs to have android:layout_width="0dp".

TableRow 中的每个按钮都需要有 android:layout_width="0dp".

Here is some example

这是一些例子

 <TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TableRow
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button2" />
    </TableRow>

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

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button3" />

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:onClick="onButtonClick"
            android:text="@string/button4" />
    </TableRow>
</TableLayout>

回答by npeder

The layout snippet

布局片段

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

The code that programmatically sets layout properties of buttons in the table:

以编程方式设置表格中按钮布局属性的代码：

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