如何在 WebView 周围添加填充

Posted

技术标签:

【中文标题】如何在 WebView 周围添加填充【英文标题】：How to add padding around a WebView 【发布时间】：2012-02-28 12:20:22 【问题描述】：

我的布局文件定义了一个WebView，下面有一些固定高度的按钮。 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_
  android:layout_
  android:fadingEdge="none">

  <WebView
    android:id="@+id/webview"
    android:layout_
    android:layout_
    android:layout_weight="1.0"/>

  <LinearLayout
    android:layout_
    android:layout_
    android:padding="8dp">

    <Button
      android:text="Decline"
      android:layout_
      android:layout_
      android:layout_weight="1.0">
    </Button>

    <Button
      android:text="Accept"
      android:layout_
      android:layout_
      android:layout_weight="1.0">
    </Button>

  </LinearLayout>
</LinearLayout>

我正在尝试在 WebView 周围添加填充，因为目前文本一直延伸到 UI 的边缘。

我尝试将android:padding="8dp" 添加到 WebView，但没有添加填充。我也尝试了 paddingLeft 和 paddingRight，但它们也不起作用。

WebView API 文档确认它继承自 View，后者支持 android:padding 属性，所以我很惊讶这不起作用。

有人知道这是一个已知问题，还是我不理解的布局 XML 的某些交互？

仅供参考，我的解决方法是在 WebView 周围放置一个额外的 LinearLayout，然后添加填充：

  <LinearLayout
    android:layout_
    android:layout_
    android:layout_weight="1.0"
    android:padding="8dp">

    <WebView
      android:id="@+id/webview"
      android:layout_
      android:layout_/>

  </LinearLayout>

【问题讨论】：

尝试使用边距而不是填充 - 我认为这就是您想要的。填充对于 WebView imo 来说真的没有意义 好主意，但是我只是尝试在我的原始 XML 中的 WebView 上设置 layout_marginRight 和 layout_marginLeft，结果导致下面的按钮不显示。我想知道为什么我的布局有什么根本错误？ 看起来您的 layout_weight 设置不正确。如果按钮是 wrap_content，为什么要给按钮 layout_weight？ @DanJ 我告诉你，android 设计师有一些根本性的问题 【参考方案1】：

WebView 在填充实现中存在错误。在 webview 上设置填充不会填充实际的网页，但会填充滚动条。它只是部分按预期工作。 您的解决方案是为 WebView 实现“填充”的最佳方式。

【讨论】：

你知道为 WebView 设置 layout_marginRight 和 layout_marginLeft 是否应该有效吗？ 6 年仍然是一个错误 7 年仍然是一个错误 7 1/3 年，仍然是一个错误 4 天后 9 年仍然是一个错误【参考方案2】：

此问题的另一种解决方法可能是使用 javascript。因此，当您的网页加载时，您可以执行这样的 js 调用来设置填充：

webView.setWebViewClient(new WebViewClient() 
    @Override
    public void onPageFinished(WebView view, String url) 
        webView.loadUrl("javascript:document.body.style.margin=\"8%\"; void 0");
    
);

【讨论】：

加一表示“void 0”。没有那个 javascript 就不会运行。 不起作用，没有任何反应。该行被执行。 如果此行在设置填充时不起作用，请确保您的 WebView 设置已启用 javascript: ``` webview.settings.javaScriptEnabled = true ```【参考方案3】：

另一种方法是在 ScrollView 中设置 WebView

然后你可以给 WebView 添加左/右边距，它会得到填充效果。然而，滚动将由 ScrollView 处理。

<ScrollView style="@style/MatchMatch">

    <WebView
        android:id="@+id/my_web_view"
        android:layout_marginLeft="@dimen/webViewMargin"
        android:layout_marginRight="@dimen/webViewMargin"
        android:layout_
        android:layout_/>
</ScrollView>

这将导致滚动条被放置在 WebView 之外，这是我希望我的应用程序的行为。

【讨论】：

为什么是滚动视图？一个简单的 FrameLayout 就可以工作，您不必关心可能的嵌套滚动问题。 我选择 ScrollView 是因为我希望滚动条靠在 ScrollView 的边缘。如果我要使用 FrameLayout 滚动条将针对内部 webview。 这是创建相同视觉效果的最佳方式。边距方法会导致看起来错误的滚动行为。然而，如今更好的方法可能是改用NestedScrollView。 如果顶部和底部也需要“间隙”，那么我会在 NestedScrollView 的顶部和底部填充。这比WebView 上的顶部和底部边距效果更好。但是对于左右两边，边距比填充效果更好。 这应该是公认的答案，因为它按预期工作。我找到了相同的解决方案，它也适用于内容将被缩放而所有 JavaScript 解决方案都没有！【参考方案4】：

尝试添加这个 CSS：

<body style='margin:X;padding:X;'>

【讨论】：

我认为这个答案与问题无关。虽然我知道它可能确实有效，但问题是关于 Android 布局问题，而不是关于 WebView 中显示的 html 内容。 感谢您的解决方案。这是向 Web 视图添加内边距的更好方法，因为传统的内边距不适用于内容。【参考方案5】：

@Sergii 的代码对我不起作用，但以下代码对我有用

mWebView.setWebViewClient(new mWebViewClient()
        @Override
        public void onPageFinished(WebView web, String url) 
            web.loadUrl("javascript:(function() document.body.style.paddingTop = '55px')();");
        
    );

您也可以将paddingTop 更改为paddingBottom, paddingRight, paddingLeft。将55pxvalue 更改为您想要的任何值。此外，为您的 webview 启用 JavaScript

  webView.settings.javaScriptEnabled = true

【讨论】：

无法按预期工作，因为在缩放时填充将与内容一起缩放。 paddingLef 和 paddingRight 对我不起作用。使用 padding-left 和 padding-right【参考方案6】：

在它周围添加一个带有填充的 LinearLayout。

【讨论】：

【参考方案7】：

在这里使用填充不是解决方法。 布局的填充就是为了这个目的。

所以你的“解决方法”是你应该做的。

【讨论】：

你是说 android:padding 值不能在 WebView 上设置？ 如果你看TextView.java的源码，它在onDraw()中考虑了padding。但是 WebView.java 没有。这将解释原因。【参考方案8】：

我发现的另一个仍然很老套的解决方法是将WebView 包装在FrameLayout 中并在那里添加填充。将父 FrameLayout 的大小设置为 wrap_content 并不好，因为您会收到以下警告：

Placing a <WebView> in a parent element that uses a wrap_content layout_height can lead to subtle bugs; use match_parent instead (wrap_content here may not work well with WebView below)

我的解决方案是将WebView 包装在两个FrameLayout 中。直接父级的宽度和高度大小为match_parent。这个FrameLayout 包裹在另一个FrameLayout 中，它的宽度和高度设置为wrap_content。

然后，您只需将直接父级上的填充更改为 WebView 并将其背景颜色设置为与 WebView 匹配即可。

同样，这不是一个很好的解决方案（因为最好的解决方案就是使用 android:padding 属性，如果它有效的话），但这个解决方案仍然比注入 HTML 标记和修改 DOM 以添加内容填充更好到WebView。

下面是我所说的一个例子：

<FrameLayout
        android:layout_
        android:layout_>
    <FrameLayout
            android:paddingBottom="8dp"
            android:paddingHorizontal="12dp"
            android:background="@color/white"
            android:layout_
            android:layout_>
        <WebView
                android:id="@+id/cool_webview_id"
                android:layout_
                android:layout_ />
    </FrameLayout>
</FrameLayout>

【讨论】：

以上是关于如何在 WebView 周围添加填充的主要内容，如果未能解决你的问题，请参考以下文章

WebView2：如何启用密码自动填充？

如何在颤动的滑块中填充拇指周围的颜色

Android webview周围有白色边框，我该如何摆脱它？

OpenGL / C++ - 如何在鼠标点击时填充一个点周围的区域？

在 2D JavaScript 数组周围添加填充

如何仅向 Angular ngMaterial 中的布局容器添加填充或边距？