今天给大家分享一个有意思的东西，android本身提供的布局已经非常完善，但是如果绘制过于复杂的页面会很麻烦，webView控件一般用来加载网页，同时我们也可以尝试加载本地的html文件，下面给大家介绍一个简单的Demo；
1.附上一个文件，mainTest.html,建议大家在自己电脑上新建个.txt文本文件，将Html内容放入里面，再将.txt文件修改成.html文件，完成之后将该文件放入asset文件夹下，如果有附属的；
<html> <script language="javascript"> /* This function is invoked by the activity */ /* 这个函数被Activity调用的活动 这里的图片我们可以在它的连接里面下载 android_waving.png */ function wave() { /* 这里是一个javascript 自定义函数，这是由我们在android的程序里调用的，不在在HTML中调用*/ document.getElementById("droid").src="ic_launcher.png"; } function hellow(){ alert('hellow world'); document.getElementById("droid").src="ic_launcher.png"; } </script> <body> <!-- Calls into the javascript interface for the activity --> <!-- 从HTML文件中调用activity中的函数 --> <!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 --> <a onClick="window.asdasd.clickOnAndroid()"> <div style="80px; margin:0px auto; padding:10px; text-align:center; border:2px solid #202020;"> <!-- 图片默认的为 android_normal.png --> <img id="droid" src="android_normal.png"/><br> Click me! </div> </a> <br> <button onclick="window.my.show()">click</button> </body> </html>
我自己不了解HTML，上部分参考就就OK，如果有附属的.css和.js文件就一并复制；
2.Activity调用 这部分我会详细介绍
①XML布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <WebView android:id="@+id/webView" android:layout_width="fill_parent" android:layout_height="match_parent" /> </RelativeLayout>
② Activity代码
package com.example.androidhtmldemo; import android.annotation.SuppressLint; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.util.Log; import android.webkit.JsResult; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.widget.Toast; @SuppressLint("JavascriptInterface") public class MainActivity extends Activity { /** * Called when the activity is first created. */ // @Override // public void onCreate(Bundle savedInstanceState) { // super.onCreate(savedInstanceState); // setContentView(R.layout.main); // } private static final String LOG_TAG = "WebViewDemo"; private WebView mWebView; private Handler mHandler = new Handler(); @SuppressLint("JavascriptInterface") @Override public void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.activity_main); Toast.makeText(MainActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG).show(); mWebView = (WebView) findViewById(R.id.webView); WebSettings webSettings = mWebView.getSettings(); webSettings.setSavePassword(false); webSettings.setSaveFormData(false); // 下面的一句话是必须的，必须要打开javaScript不然所做一切都是徒劳的 webSettings.setJavaScriptEnabled(true); webSettings.setSupportZoom(false); mWebView.setWebChromeClient(new MyWebChromeClient()); // 看这里用到了 addJavascriptInterface 这就是我们的重点中的重点 // 我们再看他的DemoJavaScriptInterface这个类。还要这个类一定要在主线程中 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "asdasd"); mWebView.addJavascriptInterface(new myHellowWorld(),"my"); mWebView.loadUrl("file:///android_asset/main.html"); } class myHellowWorld{ myHellowWorld(){ } public void show(){ mHandler.post(new Runnable(){ @Override public void run() { Toast.makeText(MainActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG).show(); } }); } } // 这是他定义由 addJavascriptInterface 提供的一个Object final class DemoJavaScriptInterface { DemoJavaScriptInterface() { } /** * This is not called on the UI thread. Post a runnable to invoke * 这不是呼吁界面线程。发表一个运行调用 * loadUrl on the UI thread. * loadUrl在UI线程。 */ public void clickOnAndroid() { // 注意这里的名称。它为clickOnAndroid(),注意，注意，严重注意 mHandler.post(new Runnable() { public void run() { // 此处调用 HTML 中的javaScript 函数 mWebView.loadUrl("javascript:wave()"); } }); } } // 线下的代码可以不看，调试用的 /////////////////////////////////////////////////////////////////////////////////////////////////// /** * Provides a hook for calling "alert" from javascript. Useful for * 从javascript中提供了一个叫“提示框” 。这是很有用的 * debugging your javascript. * 调试你的javascript。 */ final class MyWebChromeClient extends WebChromeClient { @Override public boolean onJsAlert(WebView view, String url, String message, JsResult result) { Log.d(LOG_TAG, message); result.confirm(); return true; } } }
③相关类及方法
addJavaScriptInterface 这个方法非常重要，通过它来实现我们的代码和HTML实现交互，需要传递两个参数，第一个参数：
.绑定到JavaScript的类的实例，这个类有两地啊要说明：1）类中的方法如果需要HTML调用则必须方法名必须与HTML中保持一致 2）HTML和我们的Project若要实现交互必须建立新的线程，使用handler来更新我们的代码，可以想见代码；
.用来显示在JavaScript中的实例，简单的说就是与第一个参数绑定的标签，在HTML中可以通过这个标签来调用第一个参数所拥有的方法；
loadUrl 1）加载网页 ：loadUrl("http://www.baidu.com/");
2）加载SD卡内资源：loadUrl("file:///mnt/sdcard/Google.html");
3）加载assets文件夹内资源 ：loadUrl("file:///android_asset/Google.html");
android使用HTML今天就介绍到这，欢迎大家交流~