<meta charset="utf-8">
在開發(fā)中蹲坷,有時候我們需要加載html中的數(shù)據(jù)绿聘,當(dāng)html中的各個元素寬高都已經(jīng)設(shè)置好了的情況下爬凑,我們可以直接用WebView加載级解,但是也有時候html各個標(biāo)簽的寬高是不正常的冒黑,特別是圖片。以下介紹WebView設(shè)置加載的網(wǎng)絡(luò)圖片自適應(yīng)寬高的3種方法勤哗,以作記錄:
-
方法一抡爹、WebView加載url
該方法使用js來設(shè)置,在Webview的setWebViewClient()方法中WebViewClient在加載完網(wǎng)頁后執(zhí)行一個JavaScript方法芒划,這個JavaScript方法將所有網(wǎng)頁中圖片的寬度設(shè)置為屏幕顯示寬度冬竟。
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String javascript = "javascript:function ResizeImages() {" +
"var myimg,oldwidth;" +
"var maxwidth = document.body.clientWidth;" +
"for(i=0;i <document.images.length;i++){" +
"myimg = document.images[i];" +
"if(myimg.width > maxwidth){" +
"oldwidth = myimg.width;" +
"myimg.width = maxwidth;" +
"}" +
"}" +
"}";
String width = String.valueOf(ScreenUtils.widthPixels(mContext));
view.loadUrl(javascript);
view.loadUrl("javascript:ResizeImages();");
}
-
方法二欧穴、WebView直接加載HTML字符串(使用java.lang.String類中的replace()方法)
這種情況我們有時候也會碰到,HTML字符串直接保存在數(shù)據(jù)庫中诱咏,后臺直接將其返回給我們苔可,我們需要將其加載到WebView中,該情況下我們可以直接使用java.lang.String中的replace方法來替換HTML中的對應(yīng)字符串就行袋狞,如下所示:
//后臺返回給我們的html字符串
String content = ".....<........>......</......>.....";
設(shè)置寬高自適應(yīng)方法
content = content.replace("<img", "<img style="max-width:100%;height:auto");
webView.loadDataWithBaseURL(null, content, "text/html", "utf-8", null);
-
方法三焚辅、WebView直接加載HTML字符串(使用Jsoup)
Jsoup解析html字符串是非常方便的,他的中文版官網(wǎng)為Jsoup中文版苟鸯,其使用方法這里面介紹的非常詳細(xì)同蜻,就不多說了,我就直接吧代碼粘貼出來
/**
* 設(shè)置img標(biāo)簽下的width為手機屏幕寬度早处,height自適應(yīng)
*
* @param data html字符串
* @return 更新寬高屬性后的html字符串
*/
private String getNewData(String data) {
Document document = Jsoup.parse(data);
Elements pElements = document.select("p:has(img)");
for (Element pElement : pElements) {
pElement.attr("style", "text-align:center");
pElement.attr("max-width", String.valueOf(ScreenUtils.getScreenWidth(getContext()) + "px"))
.attr("height", "auto");
}
Elements imgElements = document.select("img");
for (Element imgElement : imgElements) {
//重新設(shè)置寬高
imgElement.attr("max-width", "100%")
.attr("height", "auto");
imgElement.attr("style", "max-width:100%;height:auto");
}
Log.i("newData:", document.toString());
return document.toString();
}
作者:WonderSky_HY
鏈接:http://www.reibang.com/p/d2acd79c3d32
來源:簡書
著作權(quán)歸作者所有湾蔓。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處砌梆。