时间戳

首页 > 解决方案 > 高度为 100% 和背景图像的 Android webview

android - 高度为 100% 和背景图像的 Android webview

问题描述

我有一个应用程序，它从数据库中获取数据，然后将其显示为文章列表。获取数据并将其放入带有 Web 视图的 recyclerView 中。

一篇特定的文章有这个html：

<div style="position: absolute; height: 100%; background: url('https://www.softray.it/wp-content/uploads/2015/10/home-test-6.2.png') no-repeat;">
    <div style="height: 100%; width: 50%; margin-left: auto; margin-right: auto;display: table-cell; vertical-align: middle; text-align: center;">
        <h1 style="padding: 10px; text-align: center; font-family: 'Open Sans', sans-serif; color: #ffffff;">SOFTRAY TECHNOLOGY</h1>
        <p style="padding-left: 5px; text-align: center; color: #ffffff; font-family: 'Open Sans', sans-serif;">La potenza del mobile re-inventa le applicazioni business e un nuovo stile di IT</p>
    </div>
</div>

*对不起，我只是在数据库上没有一个像样的编辑工具。

这里的问题是我的背景图像没有显示，甚至第二个div也没有按照应有的方式垂直居中。

我尝试在显示数据之前附加html和body标记我的数据，但仍然没有加载背景图像。

holder.webView.loadData("<html style='height:100%;'><body style='height:100%;margin:0;padding:0;'>" + s + "</body></html>", "text/html", "utf-8");

我知道我可能必须给一个元素一个固定的高度，但我想适应任何屏幕。有小费吗？

编辑：我只需要获取 webview 内容的像素高度，以便我可以在html标签中设置它。问题是我需要在加载数据之前知道这个维度。

标签： androidhtmlcssandroid-webview

解决方案

尝试将 html 代码保存为 assets 文件夹中的 example.html 文件，然后使用以下命令加载 Web 视图：

webView.loadUrl("file:///android_asset/example.html");

Web 视图应使用match_parent作为宽度和高度来覆盖其父布局的 100%。

编辑：

从服务器获取数据时，您可以实现此方法：

private void saveHtmlFile(String htmlStr) {

    String path = "/data/data/" + getApplicationContext().getPackageName() + "/files/";
    String fileName = "example";
    fileName = fileName + ".html";
    File file = new File(path, fileName);

    try {
        FileOutputStream out = new FileOutputStream(file);
        byte[] data = htmlStr.getBytes();
        out.write(data);
        out.close();
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("file:///data/data/" + getApplicationContext().getPackageName() + "/files/example.html");
    } catch (FileNotFoundException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

请检查此链接一次：

https://stackoverflow.com/a/15617341/6388699

推荐阅读