Question

我正在努力弄清楚如何使这个简单的布局工作。我想在一排居中的按钮上面放一个webview。如果我指定一个特定的dp，如400dp，我可以看到顶部的webview和屏幕底部的按钮。但是，对于多种屏幕尺寸，这不能很好地扩展。如果我使用“fill_parent”，那么我从未在webview下面看到按钮。

我只想要一个总是将按钮放在屏幕底部的布局（不是滚动离开屏幕），并让webview占据其上方的其余空间。我整体上使用相对布局，因为我想在加载webview时在屏幕中居中显示进度指示器。

这是我的代码：

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

<ProgressBar android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="@android:style/Widget.ProgressBar.Inverse"
/>

<WebView android:layout_width="fill_parent" 
        android:id="@+id/webview"
        android:layout_alignParentTop="true"
         android:layout_height="400dp"
         android:layout_weight="1"> 
</WebView>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="@+id/webview"
>

<Button android:text="Browse"
        android:id="@+id/btnBrowse"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/brouse"
        android:textSize="9dp"
        />

<Button android:text="Account"
        android:id="@+id/btnAccount"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/account"
        android:layout_toRightOf="@+id/btnBrowse"
        android:textSize="9dp"
        />

<Button android:text="Contact"
        android:id="@+id/btnContact"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_weight="1.0"
        android:drawableTop="@drawable/contact"
        android:layout_toRightOf="@+id/btnAccount"
        android:textSize="9dp"
        />

<Button android:text="Quote"
        android:id="@+id/btnQuote"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:drawableTop="@drawable/custom"
        android:layout_toRightOf="@+id/btnContact"
        android:textSize="9dp"
        />
        </LinearLayout>     
</RelativeLayout>

更新：

我尝试了一些更多的实验，几乎得到了我想要的东西，除了因某些原因按钮位于屏幕顶部！ WTF？无论如何，我会尽快尝试你们的一些建议！谢谢！

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ProgressBar android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="@android:style/Widget.ProgressBar.Inverse"
/> 

<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">


<WebView  
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="9.0" 
    android:layout_alignParentTop="true"> 
</WebView>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1"
android:layout_alignParentBottom="true"
>

<Button android:text="Browse"
    android:id="@+id/btnBrowse"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/brouse"
    android:textSize="9dp"
    />

<Button android:text="Account"
    android:id="@+id/btnAccount"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/account"
    android:textSize="9dp"
    />

<Button android:text="Contact"
    android:id="@+id/btnContact"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_weight="1.0"
    android:drawableTop="@drawable/contact"
    android:textSize="9dp"
    />

<Button android:text="Quote"
    android:id="@+id/btnQuote"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_weight="1.0"
    android:layout_alignParentBottom="true"
    android:drawableTop="@drawable/custom"
    android:textSize="9dp"
    />

    </LinearLayout>     

</LinearLayout>

Answer 1

将LinearLayout的按钮放在屏幕底部。
将WebView放在LinearLayout。

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

    <ProgressBar android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@android:style/Widget.ProgressBar.Inverse" />

    <LinearLayout
        android:id="@+id/button_panel"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button ... />
        <Button ... />
        <Button ... />
        <Button ... />
    </LinearLayout>

    <WebView
        android:layout_width="fill_parent"
        android:id="@+id/webview"
        android:layout_above="@id/button_panel"
        android:layout_alignParentTop="true"
        android:layout_height="fill_parent" />
</RelativeLayout>

Answer 2

只需要调整Android layout issue with buttons below WebView的答案。

我理解这一点，因为WebView需要相对于LinearLayout进行配置，因为按钮具有预定义的大小，WebView可以猜出它剩下的空间。如果你想做相反的事情（相对于WebView的按钮），WebView从整个屏幕开始，然后按钮就不能再去任何地方了。

为清楚起见，我只包括布局的相关位。关键是在android:layout_above上使用WebView代替android:layout_below代替LinearLayout：

<WebView android:layout_width="fill_parent" 
    android:id="@+id/webview"
    android:layout_above="@id/buttons"
    android:layout_height="fill_parent"> 
</WebView>

<LinearLayout
    android:orientation="horizontal"
    android:id="@+id/buttons"
    android:layout_alignParentBottom="true"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button android:text="Browse"
        android:id="@+id/btnBrowse"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="1.0"
        android:layout_alignParentBottom="true"
        android:textSize="9dp"/>

    <!-- more buttons ... -->

</LinearLayout>

Answer 3

将webview放在线性布局上方，如下所示：

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

    <ProgressBar android:id="@+id/progressbar"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        style="@android:style/Widget.ProgressBar.Inverse" />


    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_alignParentBottom="true"
        android:layout_below="@id/webview" android:id="@+id/buttonLayout">

        <Button android:text="Browse" android:id="@+id/btnBrowse"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/brouse" android:textSize="9dp" />

        <Button android:text="Account" android:id="@+id/btnAccount"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/account" android:layout_toRightOf="@+id/btnBrowse"
            android:textSize="9dp" />

        <Button android:text="Contact" android:id="@+id/btnContact"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_alignParentBottom="true" android:layout_weight="1.0"
            android:drawableTop="@drawable/contact" android:layout_toRightOf="@+id/btnAccount"
            android:textSize="9dp" />

        <Button android:text="Quote" android:id="@+id/btnQuote"
            android:layout_height="wrap_content" android:layout_width="wrap_content"
            android:layout_weight="1.0" android:layout_alignParentBottom="true"
            android:drawableTop="@drawable/custom" android:layout_toRightOf="@+id/btnContact"
            android:textSize="9dp" />
    </LinearLayout>


    <WebView android:layout_width="fill_parent" android:id="@+id/webview"
        android:layout_above="@id/buttonLayout" android:layout_height="fill_parent" />

</RelativeLayout>

Answer 4

TQvm到jkhouw1，从您的代码获得帮助，我想与我所做的所有布局分享; 完整的代码在这里 - http://blog.kerul.net/2012/01/layout-webview-on-top-of-buttons-in.html

<?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:background="@drawable/islamicbg"
android:layout_height="fill_parent">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:layout_alignParentBottom="true"
    android:id="@+id/buttonlayout">

    <ImageButton android:id="@+id/btnprev"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/prevpage"/>

    <ImageButton  android:id="@+id/btnplay"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/play" android:layout_toRightOf="@+id/btnprev"
        />

    <ImageButton  android:id="@+id/btnpause"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_alignParentBottom="true" android:layout_weight="1.0"
        android:src="@drawable/pause" android:layout_toRightOf="@+id/btnplay"
        />

    <ImageButton  android:id="@+id/btnstop"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/stop" android:layout_toRightOf="@+id/btnpause"
        />
    <ImageButton android:id="@+id/btnnext"
        android:layout_height="wrap_content" android:layout_width="wrap_content"
        android:layout_weight="1.0" android:layout_alignParentBottom="true"
        android:src="@drawable/nextpage" android:layout_toRightOf="@+id/btnstop"
        />
</LinearLayout>

<WebView android:layout_width="fill_parent" android:id="@+id/webview"
    android:layout_above="@id/buttonlayout" 
    android:layout_height="fill_parent" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/title"
    android:background="#ffffff">
        <TextView android:text="m-Mathurat" android:id="@+id/lbltitle" 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0" 
            />
    </LinearLayout>
</RelativeLayout>

Answer 5

好的，这是代码：

WebView with Top and Bottom Menu

上图有两排按钮：一排在顶部，一根在底部。中间是WebView。这是我的GitHub帐户，你可以在这里下载源代码： https://github.com/GeneChuang1/Android/tree/Android

否则，这是应用程序细分：

Java代码（AndroidMobileAppSampleActivity.java）：

package com.gene;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.gene.R;

public class AndroidMobileAppSampleActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.app_page);

        WebView mainWebView = (WebView) findViewById(R.id.webcontent);

        WebSettings webSettings = mainWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        mainWebView.setWebViewClient(new MyCustomWebViewClient());
        mainWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

        mainWebView.loadUrl("http://www.google.com");
    }

    private class MyCustomWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

我有2个XML布局。一个用于主网页，另一个是我在主网页中的预制菜单。 XML布局“app_page.xml”：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/page_weekly_items_options_menu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#d4dbe1"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/share"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedShare"></ImageView>

        <ImageView
            android:id="@+id/left_arrow"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedLeftArrow"></ImageView>

        <ImageView
            android:id="@+id/right_arrow"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedRightArrow"></ImageView>

        <ImageView
            android:id="@+id/notifications_pageweeklyitem"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedNotificationsPageWeeklyItem"></ImageView>

        <ImageView
            android:id="@+id/favorites_pageweeklyitem"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedFavoritesPageWeeklyItem"></ImageView>

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/webcontent_container"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_below="@id/page_weekly_items_options_menu">

        <WebView
            android:id="@+id/webcontent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/menu"
            ></WebView>
        <include
            android:id="@+id/menu"
            layout="@layout/bottom_menu"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:gravity="bottom"
            android:layout_weight="1"
            />


    </RelativeLayout>

</RelativeLayout>

另一个XML布局是“bottom_menu.xml”：

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bottom_scroll_menu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom" >
    <!-- This layout is used by activity_main.xml.
    It is part of the main home page -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#17528c"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/Weekly"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedWeekly" >
        </ImageView>

        <ImageView
            android:id="@+id/Search"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedSearch" >
        </ImageView>

        <ImageView
            android:id="@+id/Favorites"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedFavorites" >
        </ImageView>

        <ImageView
            android:id="@+id/Notifications"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedNotifications" >
        </ImageView>

        <ImageView
            android:id="@+id/Profile"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedProfile" >
        </ImageView>

        <ImageView
            android:id="@+id/About"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:background="@drawable/icon"
            android:clickable="true"
            android:onClick="userClickedAbout" >
        </ImageView>
    </LinearLayout>

</HorizontalScrollView>

Android Manifest（只是因为某人忘记了互联网许可）：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="tscolari.mobile_sample"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="10" />

    <uses-permission android:name="android.permission.INTERNET"/>

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".AndroidMobileAppSampleActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

再次，这是我可以下载源代码的GitHub帐户： https://github.com/GeneChuang1/Android/tree/Android

Android WebView下面有一排按钮

5 个答案: