Android中的TableLayout如何在同一行中设置不同列宽

10

我正尝试做出我的第一个复杂GUI,但现在我无法解决这个问题。

enter image description here

前两行的第一列只需要包含标签,而前两行的第二列必须占据剩余的空间。

在这张屏幕截图中,我注意到的问题是第一列比我想要的要大。

以下是实现该布局的代码片段。

...
...

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

此外,由于它们实际上很不实用,我想请您就比这更好的方法给予一些建议。


我认为TableLayout不适合你正在做的事情。只需使用RelativeLayout和LinearLayout即可。 - ashishduh
如果您的需求允许,并且您不一定需要标签位于输入字段左侧 - 使用TextInputLayout似乎是解决这种统一输入布局的另一种方式,遵循最佳实践design/widget/TextInputLayout - Gene Bo
3个回答

20

您可以尝试像这样使用layout_weight:

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

4
在我的情况下,主要收获是在所有列视图条目中使用 android:layout_width="0dp"。我的表格布局具有 android:stretchColumns="*"。否则,我不需要设置任何其他属性...即布局权重在我的情况下是不必要的。很棒 - 这让我走上了正确的轨道,谢谢! - Gene Bo
如何在TextView中放置大段文本?为什么它不会根据父元素分配的宽度自动换行? - Fernando Torres

1
我如果是你,不会使用TableLayout,而是使用LinearLayout或RelativeLayout。一些XML属性可以达到相同的效果。这类似于使用HTML的“table”属性与使用“div”模拟表格。
因此,您可以在LinearLayout内部使用LinearLayout来模拟表格,而不是使用表格。

1
我理解了,谢谢你的建议。你能向我展示如何使用RelativeLayout尝试实现吗? - paolo2988

0

尽管canDroid可能对我们中的一些人来说足够了,但它对我没有用,我尝试了各种技巧来使TableLayout正常工作。我发现LinearLayout更容易使用,这里有一个使用LinearLayout的类似TableLayout布局的示例,其中包含几个带缩略图的单元格和几个不带缩略图的单元格。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接