开发者

How to align Buttons in a TableLayout to different directions?

probably I don't understand the layout properties of TableLayout yet. It doesn't seem to be possible to achieve such a flexible table like in HTML, because there are no cells. My target is it to achieve such a layout:

How to align Buttons in a TableLayout to different directions?

How can I do that? I thought about using a Grid开发者_如何学运维View but this doesn't seem to be useful in XML. My efforts look like this:

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


I found the solution. There are 4 buttons in the 2nd row. With android:stretchColumns="1" I stretch the 2nd column, so the alignment is already what I want. The only problem is the button "Scrn U". It would have been stretched too. So you have to add an invisible button (which will be stretched) and this button "pushes" the button "Scrn U" to the next "column":

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


Untested, but this will probably work:

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

Basically, I've just specified some cells to have a layout_span, which is kind of like the HTML table colspan. With that, you don't have to try and dink around with alignment and such.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜