连续不同列宽的Android TableLayout答案

【问题标题】：Android TableLayout With Different Column's Width In A Row连续不同列宽的Android TableLayout
【发布时间】：2014-05-21 14:48:18
【问题描述】：

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

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

在这个快照中，我注意到的问题是第一列比我想要的要大。

这是实现该布局的一段代码。

...
...

<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。
如果您的要求允许，并且您不必必须将标签放在输入字段的左侧 - 看起来使用 TextInputLayout 将是另一种方式解决这种统一的输入布局，遵循最佳实践design/widget/TextInputLayout

标签： android android-layout android-tablelayout

【解决方案1】：

您可以尝试像这样使用 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>

【讨论】：

就我而言，这里的主要收获是在所有列视图条目中使用android:layout_width="0dp"。我的表格布局有这个android:stretchColumns="*"。否则 - 我不需要设置任何其他属性 .. 即 layout_weight .. 在我的情况下不是必需的。酷 - 这让我走上了正轨，谢谢
在 textview 中放一个大文本怎么样？为什么不按父级分配的宽度来分词？

【解决方案2】：

如果我是你，我不会使用 TableLayout。我可能会使用 LinearLayout 或 RelativeLayout。您可以使用某些 XML 属性获得相同的效果。这类似于使用 HTML 的 table 属性与使用 divs 来模拟表格。

因此，您可以在 LinearLayout 中使用 LinearLayout 来模拟表格，而不是表格。

【讨论】：

我明白了，谢谢你的建议。你能告诉我如何尝试使用RelativeLayout来实现吗？

【解决方案3】：

虽然canDroid 对我们中的一些人来说可能已经足够了，但它对我不起作用，我尝试了各种技巧来使TableLayout 起作用。我发现LinearLayout 更容易使用，这是一个使用LinearLayout 的TableLayout“like”布局示例，带有缩略图的单元格很少，没有缩略图的单元格也很少。

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

【讨论】：