Android WebView下面有一排按钮

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> 

UPDATE：

我尝试了一些更多的试验，得到了几乎我想要的东西，除了按钮在屏幕的顶部出于某种原因！ 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

把网页视图相对上述这样的线性布局：

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

1. 地点LinearLayout与按钮在屏幕的底部。
2. 将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 3

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

我理解为这是相对配置的LinearLayout的WebView需求，因为这些按钮有一个预先定义的大小和WebView能猜出空间已经离开。 如果您想做相反的操作（相对于WebView的按钮），则WebView首先进入整个屏幕，然后按钮不能再进入任何位置。

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

<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 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。 这里是我的GitHub帐户，其中u可以下载源代码： 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清单（只是柜面有人忘记Internet权限）：

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