开发者

Full-Screen Android Layout with 2 Rows

I'm a complete beginner with Android Development and I'm trying to do something which I feel should be simple but doesn't seem to be (for me, anyway). The awesome ascii art below demonstrates they layout I'm trying to achieve:

---------------------
|                   |
|                   |
|                   |
|                   |
|                   |
|     Main View     |
|                   |
|                   |
|                   |
|                   |
|                   |
---------------------
||btn a|     |btn b||
---------------------

The whole layout should fill the screen with the bottom row being docked to the bottom of the screen (gravity?) and the top row taking up the rest of the screen and it should be fluid (i.e. if the device orientation is changed it would look like this:

---------------------------
|                         |
|                         |
|        Main View        |
|                         |
|                         |
---------------------------
||btn a|           |btn b||
---------------------------

If I were working in HTML this would be easily done with a TABLE element, two TR elements (the first with a rowspan of 2) and a couple of TD elements in the second row (the second having an align value set to right). (For the web UI guys reading this, I would use DIV elements and CSS for layout in practice).

So, my problem is getting the first row to fill the available height. I could write a simple algorithm that does this in the java code but would prefer to work with the XML for layout. Is there any easy way to do this? My code is as follows:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow>
        <WebView android:id="@+id/site"
            android:layout_span="3" />
    </TableRow>
    <TableRow>
        <Button android:id="@+id/back"
            android:text="btn a" />
        <View android:id="@+id/filler" />
        <Button 
            aroid:id="@+id/forward"
 开发者_C百科           android:text="btn b" />
    </TableRow>
</TableLayout>


Weight is the correct choice, try this out (Tested)

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <LinearLayout android:layout_height="fill_parent" 
                  android:layout_width="fill_parent" 
                  android:id="@+id/linearLayout2" 
                  android:layout_weight="1">
        <WebView android:layout_height="wrap_content" 
                 android:id="@+id/site" 
                 android:layout_width="wrap_content" />
    </LinearLayout>
    <LinearLayout android:id="@+id/linearLayout1" 
                  android:layout_width="wrap_content" 
                  android:layout_height="wrap_content">
        <Button android:layout_weight="2" 
                android:text="Button" 
                android:id="@+id/button1" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"></Button>
        <Button android:layout_weight="2" 
                android:text="Button" 
                android:id="@+id/button2" 
                android:layout_width="fill_parent" 
                android:layout_height="fill_parent"></Button>
    </LinearLayout>
</TableLayout>


I haven't tested it, but this should work in theory. Will look into it as soon as I get back to computer :)

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        >
        <Button
            android:id="@+id/btna"
            android:layout_height="42dp"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Button A""
        />
        <Button
            android:id="@+id/btnb"
            android:layout_height="42dp"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="Button B"
        />
    </LinearLayout>
</RelativeLayout>


You could try ditching the TableLayout and setting a weight on the webview:

<WebView
    android:id="@+id/site"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
     (**Button, filler View, Button go here**)
</LinearLayout>

I haven't tested this, but it should be close.


Using RelativeLayout seems like overkill to me, and layout_alignParentBottom can't always be trusted.

Try:

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView android:id="@+id/site" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout_weight="1"/>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/btna"
            android:layout_height="42dp"
            android:layout_width="wrap_content"
            android:text="Button A">
        <View android:id="@+id/filler"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_weight="1"/>
        <Button
            android:id="@+id/btnb"
            android:layout_height="42dp"
            android:layout_width="wrap_content"
            android:text="Button B"/>
    </LinearLayout>
</LinearLayout>

You can do a lot with LinearLayout and layout_weight.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜