0

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

在此处输入图像描述

我怎样才能做到这一点？我考虑过使用 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>
4

2 回答 2

7

我找到了解决方案。第 2 行有 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>
于 2010-04-22T21:06:19.120 回答
1

未经测试，但这可能会起作用：

    <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。这样，您就不必尝试对齐等。

于 2010-04-21T22:21:35.853 回答