遇到一个需求,要去展示 html.
当时说的只是文字,我默默的用了 TextView 和 Html 去实现了。
结果。。。
测试说不行,产品说她不是这样跟我讲的(所以还是要文档123的写清楚,我这么小心翼翼的人还是被坑了)
产品要和 web 一样,图:
我用 textview 是这样
行吧,其实我也觉得不好,后面吧唧了半天原来要图文混排,
你 TM 的早说啊,图文混排服务器下发 html。
好吧,上我强大的 webview 来了。
但是我们最外层是一个ScrollView,嵌套滑动很卡的感觉,查了很多资料,
然后在stackoverflow找到了一个办法,地址给忘了是什么了。
就是加上这个
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="48dp"
android:descendantFocusability="blocksDescendants"
android:fillViewport="true"
android:scrollbars="none">
嗯是这个
android:descendantFocusability="blocksDescendants"
后面遇到了 webview 不适应屏幕了,忘记截图了。
后面查阅了一点资料,直接上代码吧。
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.loadDataWithBaseURL(null, product.htmlStr, "text/html", "utf-8", null);
就这样,解决了滑动卡顿,大小自适应问题。
webview大小自适应大约有三种方法:
第一种:
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
第二种:
WebSetting settings = webView.getSettings();
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
把所有内容放在webview等宽的一列中。(可能会出现页面中链接失效)
第三种:
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int mDensity = metrics.densityDpi;
if (mDensity == 120) {
settings.setDefaultZoom(ZoomDensity.CLOSE);
}else if (mDensity == 160) {
settings.setDefaultZoom(ZoomDensity.MEDIUM);
}else if (mDensity == 240) {
settings.setDefaultZoom(ZoomDensity.FAR);
}
这方法可以让你的页面适应手机屏幕的分辨率,完整的显示在屏幕上,可以放大缩小。
例如适合800px宽度的页面,如果通过WebView在1024px的屏幕宽度下显示时,内容(图片)会被放大,整体页面会超出屏幕。
试了将WebView的settings中的缩放都关闭了也不行。
后来发现了WebSettings.ZoomDensity这个设置,并在文档中找到了以下说明:
Enum for specifying the WebView's desired density. FAR makes 100% looking like in 240dpi MEDIUM makes 100% looking like in 160dpi CLOSE makes 100% looking like in 120dpi
这样就能很好的说明以上问题的原因了,又是密度惹的祸...
默认WebView的ZoomDensity是MEDIUM,对应160dpi。而我之前800px宽度的屏幕对应的是60dpi,1024px宽度的屏幕对应的是240dpi。所以,页面在高分辨率的屏幕上被放大了1.5倍。这个和图片自缩放的机制是一样的。
于是,只要通过当前屏幕的密度,动态设置该属性就能适应不同屏幕(当然,默认你的页面是针对160dpi的密度大小设计的),即可解决:
int screenDensity = getResources().getDisplayMetrics().densityDpi ;
WebSettings.ZoomDensity zoomDensity = WebSettings.ZoomDensity.MEDIUM ;
switch (screenDensity){
case DisplayMetrics.DENSITY_LOW :
zoomDensity = WebSettings.ZoomDensity.CLOSE;
break;
case DisplayMetrics.DENSITY_MEDIUM:
zoomDensity = WebSettings.ZoomDensity.MEDIUM;
break;
case DisplayMetrics.DENSITY_HIGH:
zoomDensity = WebSettings.ZoomDensity.FAR;
break ;
}
webSettings.setDefaultZoom(zoomDensity);
最终效果
一周后,由于其他原因没上线,然后我觉得WebView 实现这个也不是很好,想着趁着时间换下。请看不用 WebView实现图文混排