WebView 和按钮布局使按钮不可见答案

【问题标题】：WebView and buttons layout makes buttons invisibleWebView 和按钮布局使按钮不可见
【发布时间】：2010-09-25 10:15:32
【问题描述】：

我有以下布局：

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

    <WebView xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@+id/webview"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
    />

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:orientation="horizontal">

        <Button android:id="@+id/back"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="Back" />

        <Button android:id="@+id/page_number"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="1 / 100" />

        <Button android:id="@+id/next"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:text="Next" />
    </LinearLayout>
</LinearLayout>

结果如下

如何使按钮适合屏幕并阻止 WebView 将它们推开？

【问题讨论】：

标签： android layout button webview

【解决方案1】：

使用RelativeLayout。将 RelativeLayout 包裹在按钮周围，如下所示：

   <RelativeLayout 
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true">
    <Button android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="Back"
            android:layout_alignParentLeft="true"  />

    <Button android:id="@+id/page_number"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="1 / 100" />

    <Button android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:text="Next" />
   </RelativeLayout>

android:layout_alignParentBottom="true" 确保按钮始终有足够的空间。

考虑在 WebView 周围使用 RelativeLayout 并使用：

android:layout_alignParentTop="true"`

编辑：

<?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"
          android:orientation="vertical">
<RelativeLayout android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:layout_alignParentTop="true">

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/webview"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
/>
</RelativeLayout>

<RelativeLayout android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical"
              android:layout_alignParentBottom="true">

    <Button android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Back"
            android:layout_alignParentLeft="true" />

    <Button android:id="@+id/page_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1 / 100"
            android:layout_toRightOf="@+id/back" />

    <Button android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Next"
            android:layout_toRightOf="@+id/page_number" />
 </RelativeLayout>
</RelativeLayout>

【讨论】：

现在它们完全消失了：P

【解决方案2】：

除了我在 WebView 下方使用 TextView 和在主 WebView 上方使用第二个 WebView 之外，我遇到了完全相同的问题，这对于我们的聊天程序都是必需的。 TextView 不断被 WebView 推开。

我尝试了建议的切换到 RelativeLayout，也尝试了 TableLayout 和嵌套的 LinearLayouts，都达到了相同的效果。唯一可行的方法是修复 WebView 的像素大小 [这会引发处理 onConfigurationCahnge() 的棘手问题] 或弄乱 layout_weight。 layout_weight 也有类似的问题，因为网页的配置或大小发生变化，周围的控件都被弄脏了。

看起来如果我希望它完全以一种方式工作，顶部的一个小 webview，一个主 webview 和一个 textview，我将不得不修复 webview 的像素大小并在加载时处理它们的大小变化（对于不同的屏幕) 和 onConfigurationChange() 当屏幕转动时。

【讨论】：