Android中Webview显示全屏拉伸图片

最新推荐文章于 2024-02-05 13:44:38 发布

原创最新推荐文章于 2024-02-05 13:44:38 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#android

本文介绍如何使图片在WebView中自适应显示，通过调整HTML内容及样式实现无边框和滚动条的效果。

需要在一个视频view上叠加一个webview显示一些第三方的内容，例如视频、图片、h5页面等。显示图片时出现了边框和滚动条等不在预期的内容。由于对web相关的技术不甚了解，查询一番后完美解决。图片自适应webview大小显示。

xml布局文件如下：

        <WebView
            android:id="@+id/ad_webview"
            android:layout_width="127dp"
            android:layout_height="191dp"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="0dp" />

代码如下,需要自己实现一些html内容：

        String url = "https://i1.mifile.cn/a2/1623746729_9798645_s1080_1188wh.jpg";
        ViewGroup.LayoutParams para = mADwebview.getLayoutParams();
        String data = "<html><head><title>AD</title><meta name=\"viewport\"\"content=\"width="+dpwidth+", initial-scale=0.65 \" /></head>";
        //data = data + "<body><center><img width=\""+dpwidth+"\" src=\""+"https://i1.mifile.cn/a2/1623746729_9798645_s1080_1188wh.jpg"+"\" width=\"100%\" height=\"100%\"/></center></body></html>";
        data = data + "<body style=\"margin: 0px;padding: 0; height: 100%\"><img style=\"-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;\" src=\""
                +url+
                "\" width=\"100%\" height=\"100%\"/></body></html>";

        mADwebview.loadData(data, "text/html", null);

mADwebview是webview的实例。

最终效果如下，加入了显示手机图片的广告：