Android中用html代码来实现界面 WebView控件

Android提供了WebView控件专门来加载html代码实现的界面。这个控件在某些方面用起来比较方便。比如说商家活动主题界面，这种界面会随活动的变化而不断的变化，若是用Android源生xml布局，当活动界面改变时，用户必须更新APP才能更新对应活动界面，而WebView加载的html界面则不需要用户更新APP就可以达到更换界面的目的。只需要改变HTML内部实现就可以了。此处只是写了个demo提示有这种方法实现。需要三步：

一：加载html界面。用WebView实列调用loadUrl()方法，方法参数为web地址，这里采用的tomcat服务器中的一个地址。

<span style="white-space:pre"></span>/*第一步加HTML文件加载到WebView   */String url = "http://192.168.1.112:8080/HQ/hunqing.html"; mWebView = (WebView) findViewById(R.id.webview);mWebView.loadUrl(url);

二、定义交互接口名和交互方法。这里的交互接口名和交互方法都将在html对应的行为方法中引用到。格式是window.交互接口名.交互方法名。具体应用看下面的html文件。

<span style="white-space:pre"></span>/*第二步构造交互接口名JavaScript_interface和交互方法show()等 * 交互接口名和方法名都将在html中JavaScript中用到 * 列如window.JavaScript_interface.show();*/class WebViewJavaScript{public static final String JAVASCRIPT_NAME = "JavaScript_interface"; //交互接口名public void show(){  //交互方法Mylog.v("=========================");Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();}public void startActivity(){Intent intent = new Intent(WebViewActivity.this,NotificationActivity.class);WebViewActivity.this.startActivity(intent);}public void showImg(){Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();}}

三、加载的行为（javascript语言）

<span style="white-space:pre"></span>/*加载行为*/WebSettings settings = mWebView.getSettings();settings.setJavaScriptEnabled(true);mWebView.addJavascriptInterface(new WebViewJavaScript(), WebViewJavaScript.JAVASCRIPT_NAME);

这里的WebView就设置完了。

下面看html里面需要写什么，在html中的<script>标签中就引用了对应的交互接口名和方法。

<span style="white-space:pre"></span><script>function labaChlick(){window.JavaScript_interface.show();  <!-- 引用交互接口方法-->}function p1Click(){//alert("你好，我是弹出对话框");window.JavaScript_interface.startActivity();  //这行代码关联Android源生代码}function imgClick(){//alert("你好，我是弹出对话框");}function img2Click(){window.JavaScript_interface.showImg();}</script>

function 方法名（）这是对应html文件中定义的点击行为onclick=" 方法名"；

<span style="white-space:pre"></span><div class="imgtop"><img class="imgtop_bg" src="./img/index_top_bg.png"/><img class="imgtop_lb" src=".\img\index_microphone.png" onclick="labaChlick()"/><h3 class="p3"><p class="sp1">离我们结婚</p><p class="sp2">还有<span class="sp3">35</span>天</p></h3></div><div class="imgshow"><img src=".\img\index_yaoqinghan.png" onclick="p1Click()"/><img src=".\img\index_zhufuqiang.png" onclick="imgClick()"/><img src=".\img\index_yaoyiyao.png" onclick="img2Click()"/><img src=".\img\index_hunsha.png"/></div>

所有实现就完成了。

Activity 代码：这里注意若是点击事件没反应，请在接口方法名前加上@JavascriptInterface

import mylog.Mylog;import notification.NotificationActivity;import android.annotation.SuppressLint;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.Window;import android.webkit.WebSettings;import android.webkit.WebView;import android.widget.Toast;import com.example.call.R; @SuppressLint("JavascriptInterface") public class WebViewActivity extends Activity {private WebView mWebView;protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.webview_activity_layout);/*第一步加HTML文件加载到WebView   */String url = "http://192.168.1.112:8080/HQ/hunqing.html"; mWebView = (WebView) findViewById(R.id.webview);mWebView.loadUrl(url);/*加载行为*/WebSettings settings = mWebView.getSettings();settings.setJavaScriptEnabled(true);mWebView.addJavascriptInterface(new WebViewJavaScript(), WebViewJavaScript.JAVASCRIPT_NAME);}/*第二步构造交互接口名JavaScript_interface和交互方法show()等 * 交互接口名和方法名都将在html中JavaScript中用到 * 列如window.JavaScript_interface.show();*/class WebViewJavaScript{public static final String JAVASCRIPT_NAME = "JavaScript_interface"; //交互接口名public void show(){  //交互方法Mylog.v("=========================");Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();}public void startActivity(){Intent intent = new Intent(WebViewActivity.this,NotificationActivity.class);WebViewActivity.this.startActivity(intent);}public void showImg(){Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();}}@Override/*可能存在数据缓存问题，当第一次加载了html页面以后，Android系统会自动在data->data目录下新建数据库来保存加载的网络页面。有可能导致我们修改了网络html界面后 * 再次通过Android系统进入网络界面时加载的是数据库保存的界面，所以当结束这个activity时可以将对应数据删除。就不会存在缓存问题了。 * */protected void onDestroy() {super.onDestroy();//遍历对应文件删除对应文件}}

xml布局：里面就放了一个WebView控件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >        <WebView         android:id="@+id/webview"        android:layout_width="fill_parent"        android:layout_height="fill_parent"/></LinearLayout>

html文件：

<html><head><title>结婚</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="hunqing.css"><script>function labaChlick(){window.JavaScript_interface.show();  <!-- 引用交互接口方法-->}function p1Click(){//alert("你好，我是弹出对话框");window.JavaScript_interface.startActivity();  //这行代码关联Android源生代码}function imgClick(){//alert("你好，我是弹出对话框");}function img2Click(){window.JavaScript_interface.showImg();}</script></head><body bgcolor="#680011"><div class="mainimg" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;"><div class="imgtop"><img class="imgtop_bg" src="./img/index_top_bg.png"/><img class="imgtop_lb" src=".\img\index_microphone.png" onclick="labaChlick()"/><h3 class="p3"><p class="sp1">离我们结婚</p><p class="sp2">还有<span class="sp3">35</span>天</p></h3></div><div class="imgshow"><img src=".\img\index_yaoqinghan.png" onclick="p1Click()"/><img src=".\img\index_zhufuqiang.png" onclick="imgClick()"/><img src=".\img\index_yaoyiyao.png" onclick="img2Click()"/><img src=".\img\index_hunsha.png"/></div><div class="info"><a href="###">婚礼承办方:成都幸福公社婚庆公司<img src=".\img\redRightarrow.png"/></a></div></div></body></html>

css代码：

.imgTop {width: 320px;margin-left: -10px;margin-right: -10px;min-height: 200px;position:relative;border-bottom:1px solid #ffeeac;}.imgtop .imgtop_lb{margin-top: 10px;margin-left: 10px;position: absolute;left: 10px; top:10px;}.p3{width: 118px;height: 22px;padding: 30px;position: absolute;right: 10px;bottom : 0px; }.sp1 {font-size: 10px;color: #ffeeac;}.sp2 {font-size: 10px;color: #ffeeac;text-align: right;}.sp3 {font-size: 20px;}.imgShow {width: 320px;height: 210px;overflow: hidden;margin-left: -10px;margin-top: 14px;}.imgShow img {width: 145px;height: 110px;display: inline-block;float: left;margin-left: 10px;margin-bottom: 10px;}.info{margin-top: 14px;text-align: center;}.info a{color: #92192d;font-size: 14px;}.info img{width: 20px;display: inline-block;position: relative;top: 2px;margin-left: 8px;}

效果图：浏览器中打开html文件是这样子的：

在模拟器中打开是这样的：

当活动更新时，只需要更改html中的I显示内容即可。

五、这里还有个问题就是页面缓存问题，当第一次加载了html页面以后，Android系统会自动在data->data目录下新建数据库来保存加载的网络页面。有可能导致我们修改了网络html界面后。再次通过Android系统进入网络界面时加载的是数据库保存的界面，所以当结束这个activity时可以将对应数据删除。就不会存在缓存问题了。

<span style="white-space:pre"></span>@Override/*可能存在数据缓存问题，当第一次加载了html页面以后，Android系统会自动在data->data目录下新建数据库来保存加载的网络页面。有可<span style="white-space:pre"></span>能导致我们修改了网络html界面后 * 再次通过Android系统进入网络界面时加载的是数据库保存的界面，所以当结束这个activity时可以将对应数据删除。就不会存在缓存问题<span style="white-space:pre"></span>了。 * */protected void onDestroy() {super.onDestroy();//遍历对应文件删除对应文件}

补充：若界面上有URL链接地址，在Android系统中会去启动Android系统中的浏览器去来浏览链接地址，当然也可以设置在webView中内部跳转。

在html中加了一个<a>标签的百度链接地址如下：

<a href="https://www.baidu.com/ ">婚礼承办方:成都幸福公社婚庆公司<img src=".\img\redRightarrow.png"/></a>

在不设置WebView内部跳转时会启动浏览器去浏览链接地址：如图：

可以明显看出来是启动了Android系统的浏览器去浏览地址，设置WebView下面的代码就可以让链接地址在WebView内部跳转。代码如下：

<span style="white-space:pre"></span>/*在加载URL地址时回去启动浏览器，要使加载的URL地址在WebView内部跳转*/mWebView.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});

运行效果如图：

可以看出加载URL地址时没有跳转到浏览器，而是直接在WebView内部完成的跳转。

这里有个疑问了，跳转后点击返回键时直接返回到了菜单界面而不是html界面（这里指的是婚庆界面），要实现返回到html界面，需要重写back键。实现这个功能可以参考下面这个地址的博客：

    http://blog.csdn.net/t12x3456/article/details/39134961