android开发之htm5交互（一）

项目下来后，一直在那闷头写原生的android代码，主管跟我说了好几次，你可以试试h5，都被我置之不理。现在项目完成的差不多了，我也试着用h5去实现一些主要用于图片展示的板块，发现，这玩意儿真的快多了！虽然我h5都忘的差不多了，但还是很快就搞出来了。

其实就是在XML文件中引入WebView控件，然后加载本地的h5布局。步骤如下（因为是新手，可能有表述不清的地方，望见谅！）：

1、在android原生XML文件中引入webView控件

LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="match_parent"    android:layout_height="match_parent">    <WebView        android:id="@+id/mainWebView"        android:layout_width="match_parent"        android:layout_height="match_parent">    </WebView></LinearLayout>

2、在Activity中加载该布局文件

这里讲的是本地文件的读取方式，首先写好的html文件需放置在assets文件夹（该文件夹与java、src文件夹处于同一级别下）下。

/webView 控件获取 assert mWebView != null; WebSettings settings = mWebView.getSettings(); //是否允许使用js settings.setJavaScriptEnabled(true); //设置界面在当前窗口打开,不跳转网页 mWebView.setWebViewClient(new WebViewClient()); //加载本地h5文件布局mWebView.loadUrl("file:///android_asset/index.html");

到这里，html文件就可以加载出来了。好久没有写过html5了，真的是让我吐了一口老血啊！

遇到的问题：

WebView比手机屏幕大，造成底部出现横向的滑动条。

解决方法：在网上找了很多偏方，一个个试了下来：

//支持内容重新布局settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //设置webview推荐使用的窗口 settings.setUseWideViewPort(true); //设置webview加载的页面的模式 settings.setLoadWithOverviewMode(true);

结果对于我这个项目，完全都不起作用，后来觉得应该不是webView的问题，可能出在了h5的代码上，后来找了找，的确一张横屏的图片没有设置宽度，最后将此图片的宽度设置为：max-width:100%;问题就这样解决了。

为什么不把图片直接设置成width:100%?

因为这样图片如果不够此宽度，就会被拉长，设置成max-width，限制其最大宽度。

我只是代码的搬运工，在此感谢那些愿意贡献出自己开发经验的大牛们！