WebView 和按钮的线性布局

Question

我最近在一个看似简单的 Android 布局上苦苦挣扎：我想要一个 WebView 高于 Button。使用以下参数可以正常工作：

WebView:
  Height: wrap-content
  Weight: unset (by the way, what is the default?)

Button:
  Height: wrap-content
  Weight: unset

但是，如果网页变得太大，它会溢出按钮。我尝试了各种重量和高度的组合，除了一个之外，所有的组合要么完全隐藏按钮，要么部分覆盖它。这是有效的（复制自http://code.google.com/p/apps-for-android/source/browse/trunk/Samples/WebViewDemo/res/layout/main.xml）：

WebView:
  Height: 0
  Weight: 1

Button:
  Height: wrap-content
  Weight: unset

如果您更改其中任何一个，例如给按钮一个权重或将WebView 高度更改为 wrap-content 然后它不起作用。我的问题是：为什么？有人可以解释一下android布局系统到底在想什么吗？

Answer 1

类似下面的内容应该可以满足您的需求。关键是 WebView 的 layout_height="fill_parent" 和 layout_weight="1"。

<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
        <WebView android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" />

        <Button android:layout_width="fill_parent"
                android:layout_height="wrap_content" />
</LinearLayout>  

编辑：哎呀，我误解了你的问题。正是 layout_weight 使它不会溢出按钮（或您的示例中的 textview）。我不知道为什么会这样，但是如果您的 LinearLayout 中有一个“fill_parent”项，除了一个或多个“wrap_content”项之外，您还需要为“fill_parent”项指定一个 layout_weight，否则需要其余小部件的空间。

Answer 2

好吧，我已经明白这一点了。 android布局系统的工作方式是：

1. 所有的东西都根据它们指定的高度/宽度进行布局。
2. 任何剩余权重都会根据权重分布在视图之间。

（显然这从未解释过。）

因此，要让它工作，你希望按钮是 wrap-content，这使它尽可能大，并且 webview 的高度为零（因为它可以缩小到零）。在第 1 步之后，您将拥有正确的按钮，然后是 webview 零高度。

然后将按钮权重设置为 0，将 webview 权重设置为 1，以便将任何剩余空间分配给 webview - 即它会扩展以填满屏幕。

当你知道算法时就很有意义。

Answer 3

您可以指定 webView 的高度（以像素为单位）

android:layout_heigth = " 70px"

例如

希望对你有帮助

Answer 4

你可以试试这样的：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
    android:layout_height="match_parent" >

        <WebView
                android:id="@+id/wv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_above="@+id/btn" />

        <Button
            android:id="@+id/btn"
            android:layout_alignParentBottom="true" />
</RelativeLayout>

Answer 5

好的，这是制作这个的代码：

上图有两排按钮：一排在上，一排在下。中间是 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 清单（以防有人忘记了互联网权限）：

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

-基因创