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));
來刷新畫面。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章