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 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.
精彩评论