Question

可能我还不了解TableLayout的布局属性。似乎不可能像HTML那样实现这样灵活的表，因为没有单元格。我的目标是实现这样的布局：

enter image description here

我该怎么做？我想过使用GridView，但这似乎在XML中没用。我的努力看起来像这样：

        <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="320sp"
        android:layout_height="fill_parent"
        android:layout_gravity="center_horizontal"
        android:gravity="bottom"
        android:layout_alignParentBottom="true">
        <TableRow
        android:background="#333333"
        android:gravity="bottom"
        android:layout_width="fill_parent">     
        <Button
            android:id="@+id/btnUp"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="left"
            android:text="Lift U"
            />
        <Button
            android:id="@+id/btnScreenUp"
            android:gravity="right"
            android:layout_gravity="right"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Scrn U"
            />
        </TableRow>
        <TableRow
          android:background="#444444"
          android:gravity="bottom"
          android:layout_gravity="right">
          <Button
            android:id="@+id/btnDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Lift D"
            />
           <Button
            android:id="@+id/btnScreenLeft"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="right"
            android:layout_gravity="right"
            android:text="Scrn L"
            />
           <Button
            android:id="@+id/btnScreenDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="right"
            android:layout_gravity="right"
            android:text="Scrn D"
            />
           <Button
            android:id="@+id/btnScreenRight"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:gravity="right"
            android:layout_gravity="right"
            android:text="Scrn R"
            />
        </TableRow>
</TableLayout>

Answer 1

我找到了解决方案。第二行有4个按钮。使用android：stretchColumns =“1”我伸展第二列，所以对齐已经是我想要的了。唯一的问题是按钮“Scrn U”。它也会被拉长。所以你必须添加一个不可见的按钮（它将被拉伸），这个按钮将“Scrn U”按钮“推”到下一个“列”：

      <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="320sp"
        android:layout_height="fill_parent"
        android:stretchColumns="1"
        android:gravity="bottom"
        android:layout_alignParentBottom="true">
        <TableRow
        android:background="#333333"
        android:gravity="bottom">       
        <Button
            android:id="@+id/btnUp"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Lift U"
            />
        <Button
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:visibility="invisible"
        />
        <Button
            android:id="@+id/btnScreenUp"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn U"
            />
        </TableRow>
        <TableRow
          android:background="#444444"
          android:layout_gravity="right">
          <Button
            android:id="@+id/btnDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:text="Lift D"
            />
           <Button
            android:id="@+id/btnScreenLeft"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn L"
            />
           <Button
            android:id="@+id/btnScreenDown"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn D"
            />
           <Button
            android:id="@+id/btnScreenRight"
            android:layout_width="60sp"
            android:layout_height="50sp"
            android:layout_gravity="right"
            android:text="Scrn R"
            />
        </TableRow>
</TableLayout>

Answer 2

未经测试，但这可能有效：

    <TableLayout
    android:id="@+id/tableLayout"
    android:layout_width="320sp"
    android:layout_height="fill_parent"
    android:layout_gravity="center_horizontal"
    android:gravity="bottom"
    android:layout_alignParentBottom="true">
    <TableRow
    android:background="#333333"
    android:gravity="bottom"
    android:layout_width="fill_parent">     
    <Button
        android:id="@+id/btnUp"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:layout_span="3"
        android:text="Lift U"
        />
    <Button
        android:id="@+id/btnScreenUp"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:layout_span="2"
        android:text="Scrn U"
        />
    </TableRow>
    <TableRow
      android:background="#444444"
      android:gravity="bottom"
      android:layout_gravity="right">
      <Button
        android:id="@+id/btnDown"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:layout_span="2"
        android:text="Lift D"
        />
       <Button
        android:id="@+id/btnScreenLeft"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:text="Scrn L"
        />
       <Button
        android:id="@+id/btnScreenDown"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:text="Scrn D"
        />
       <Button
        android:id="@+id/btnScreenRight"
        android:layout_width="60sp"
        android:layout_height="50sp"
        android:text="Scrn R"
        />
    </TableRow>

基本上，我刚刚指定了一些有一个layout_span的单元格，就像HTML表格colspan一样。有了这个，你就不必尝试对齐等等。

如何将TableLayout中的按钮对齐到不同的方向？

2 个答案: