Android使用Html绘制页面

今天给大家分享一个有意思的东西，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今天就介绍到这，欢迎大家交流~