Android, how to remove extra white space when loading .gif into Webview
I have read numerous topics here but apparently none of the solutions provided is working 100% as intended in my case. I just want to load animated images (.gif files). Here is what I have:
template.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml";
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
[CONTENT]
</body>
</html>
style.css
html, div, body, img {
margin: 0;
padding: 0;
}
main.xml (just how webview is defined)
<WebView
android:id="@+id/webView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"/>
During view creation - java code
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
I have two solutions which are almost perfect for me, so first is using just the WebView.LoadUrl(filePath) , in this case after switching between pictures I'm getting extra white space below the picture, when I repeat the image loading process couple of times it will eventually get rid of the white space. Here is the first solution:
Load method //I know that loading blank page and clearing view has prolly the same result but anyway I was trying everything...
webView.loadUrl("about:blank");
webView.clearView();
webView.clearCache(true);
webView.loadUrl("file:///android_res/raw/" + currentPicName +".gif");
Second solution is bit different as it is using template.html with viewport and style.css so basically what I am doing is to use them with WebView.loadDataWithBaseUrl(...) , but in this case I am getting less bottom extra white space (almost none, looks like padding/margin), but in case of narrow images I am getting extra white space on the right side... Also when I am switching between different size images I often get extra white space on the bottom but then repeating the loading process even once usually solves it.
webView.loadUrl("about:blank");
webView.clearView();
webView.clearCache(true);
try
{
InputStream is = getResources().getAssets().open("template.html");
int size = is.available();
byte[] buffer = new byte[size];
is.read(buffer);
is.close();
String content = "<img src='"+currentPicName+".gif'/>";
webView.loadDataWithBaseURL("file:///android_res/raw/",
new String(buffer).replace("[CONTENT]", content),
"text/html", "UTF-8", null);
} catch (IOException e)
{
e.printStackTrace();
}
Also it is worth to mention that whenever new picture is loading i often for like 1 ms can see that there is old picture flickering below it, so maybe the old view is not cleared properly and some size are cached, as the white space is added only when changing from bigger image to smaller. So maybe the solution would be to somehow resize all the .gifs to one common size while preserving their animations, but do not know how I could achieve this.
Thanks in advance for any answers/tips, if you need some more details about the situation feel free to ask! For testing purpose I am using phone with android 4.1.2, the target api is 16 I believe.
链接地址: http://www.djcxy.com/p/89298.html