js+html在android中的使用

原文地址：http://blog.csdn.net/zhangxy0605/article/details/74456115

一般android界面使用的是XML。但是XML如果要制作很高级的UI，会很复杂。如果使用HTML来进行UI设计就会简单很多。

将HTML文件放置在android工程的assets文件夹下，如果没有这个文件夹，可以在根目录创建一个。

Ui.xml

…….
function refresh_show_trigger(resp_json_array) {
   console.log("js *************** start");
   console.log(resp_json_array);
   if (resp_json_array != undefined) {
      json_result = resp_json_array;
      //json_result = $.parseJSON(resp_json_array);
   }
   if (refresh_show == undefined) {
      setTimeout(refresh_show_trigger, 100);
   } else {
      refresh_show();
   }
   console.log("js *************** end");
}

refresh_show_trigger();
…….

Android 中代码：

public class UserWebView extends RelativeLayout{
    private volatile boolean load_over = false;
    private WebView webview;
    private JSONObject loadData ;

    private final int MESSAGE_WEB_LOAD_OVER=1;

    private Handler handler;
    public UserWebView(Context context) {
        this(context,null);
    }

    public UserWebView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public UserWebView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        InitHandler();
        InitView(context);

    }


    private void InitView(Context context){

        View view = View.inflate(context, R.layout.layout_web_view,null);
        webview = (WebView)view.findViewById(R.id.veb_view);
        WebSettings wv_setttig = webview.getSettings();
        wv_setttig.setJavaScriptEnabled(true);


        this.addView(view);

        webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
        webview.setWebViewClient(new WebViewClient(){
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                //开始
                super.onPageStarted(view, url, favicon);
            }
            @Override
            public void onPageFinished(WebView view, String url) {
                //结束
                super.onPageFinished(view, url);

                load_over = true;

            }
        });

        String url = "file:///android_asset/weather_html/ui.html";
        webview.loadUrl(url);


    }

    public void setHolderData(JSONObject data){

        //webview.addJavascriptInterface();

        Log.d("111111","start javascript 。。。。。。。。。。。。" + data);
        loadData = data;

        new Thread(new Runnable() {
            @Override
            public void run() {
                int loop_count = 0;
                while (!load_over && loop_count < 30) {
                    try {
                        Thread.sleep(200L);
                    } catch (InterruptedException e) {

                    }
                    loop_count++;
                }
                if(load_over ) {
                    handler.sendEmptyMessage(MESSAGE_WEB_LOAD_OVER);
                }

            }
        }).start();



    private void InitHandler(){
        handler = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);

                switch(msg.what){
                    case MESSAGE_WEB_LOAD_OVER:{
                        webview.loadUrl(String.format("javascript:refresh_show_trigger(%s)", loadData));
                        break;
                    }
                }

            }
        };
    }
}

layout_web_view.xml

<?xml version="1.0" encoding="utf-8"?>
<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/veb_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

refresh_show_trigger()为js 中的代码，在android中调用来刷新web页面的显示。在这里要注意web页面加载需要一定的时间，所以要在web加载完毕后才能再次加载刷新数据，否则就一直现在web 默认的页面，新的数据不能显示。这里新建了一个thread 来判断是否加载完毕，当加载完毕的时候 ，发送handler消息给主线程，调用 webview.loadUrl(String.format(“javascript:refresh_show_trigger(%s)”, loadData));
来刷新画面。