android使用html+javascript來製做頁面

時間 2019-12-06

標籤 android 使用 html+javascript html javascript 製做頁面欄目 Android 简体版

原文原文鏈接

通常的android界面使用的是XML。可是XML若是要製做很高級的UI，會很複雜。若是使用HTML老進行UI設計就會簡單不少。javascript

android早就提供了這樣的藉口。html

WebView.addJavascriptInterface(Object obj, String interfaceName)java

其中obj是咱們本身用來實現功能的一個類，interfaceName是一個對象的名稱，就是obj這個對象的名稱。android

這樣說可能有點抽象，可是看一個例子就會明白。web

既然是html,那確定就要有一個HTML文件，文件名爲main.html，放置在android工程的assets文件夾下，若是沒有這個文件夾，能夠在根目錄建立一個。瀏覽器

 1 <html>
 2 <script language="javascript">
 3     /* This function is invoked by the activity */
 4     /* 這個函數被Activity調用的活動 這裏的圖片咱們能夠在它的鏈接裏面下載 android_waving.png */
 5     function wave() {
 6     /* 這裏是一個javascript 自定義函數，這是由咱們在android的程序裏調用的，不在在HTML中調用*/
 7     document.getElementById("droid").src="ic_launcher.png";
 8     }
 9     function hellow(){
10         alert('hellow world');
11     document.getElementById("droid").src="ic_launcher.png";
12     }
13 </script>
14 <body>
15 <!-- Calls into the javascript interface for the activity -->
16 <!-- 從HTML文件中調用activity中的函數 -->
17 <!-- 也就是從HTML到android程序 留意window.demo.clickOnAndroid()這句話 -->
18 <a onClick="window.asdasd.clickOnAndroid()">
19     <div style="width:80px;
20                         margin:0px auto;
21                         padding:10px;
22                         text-align:center;
23                         border:2px solid #202020;">
24         <!-- 圖片默認的爲 android_normal.png -->
25         <img id="droid" src="android_normal.png"/><br>
26         Click me!
27     </div>
28 </a>
29 <br>
30 <button onclick="window.my.show()">click</button>
31 </body>
32 </html>

Activity文件app

  1 package com.example.untitled;
  2 
  3 import android.app.Activity;
  4 import android.os.Bundle;
  5 import android.os.Handler;
  6 import android.util.Log;
  7 import android.webkit.JsResult;
  8 import android.webkit.WebChromeClient;
  9 import android.webkit.WebSettings;
 10 import android.webkit.WebView;
 11 import android.widget.Toast;
 12 
 13 public class MyActivity extends Activity {
 14     /**
 15      * Called when the activity is first created.
 16      */
 17 //    @Override
 18 //    public void onCreate(Bundle savedInstanceState) {
 19 //        super.onCreate(savedInstanceState);
 20 //        setContentView(R.layout.main);
 21 //    }
 22     private static final String LOG_TAG = "WebViewDemo";
 23     private WebView mWebView;
 24     private Handler mHandler = new Handler();
 25     @Override
 26     public void onCreate(Bundle icicle) {
 27         super.onCreate(icicle);
 28         setContentView(R.layout.main);
 29         Toast.makeText(MyActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG);
 30 
 31         mWebView = (WebView) findViewById(R.id.webView);
 32 
 33 
 34         WebSettings webSettings = mWebView.getSettings();
 35         webSettings.setSavePassword(false);
 36         webSettings.setSaveFormData(false);
 37         // 下面的一句話是必須的，必需要打開javaScript否則所作一切都是徒勞的
 38         webSettings.setJavaScriptEnabled(true);
 39         webSettings.setSupportZoom(false);
 40 
 41 
 42         mWebView.setWebChromeClient(new MyWebChromeClient());
 43 
 44         // 看這裏用到了 addJavascriptInterface 這就是咱們的重點中的重點
 45         // 咱們再看他的DemoJavaScriptInterface這個類。還要這個類必定要在主線程中
 46         mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "asdasd");
 47         mWebView.addJavascriptInterface(new myHellowWorld(),"my");
 48 
 49         mWebView.loadUrl("file:///android_asset/main.html");
 50     }
 51 
 52     class myHellowWorld{
 53         myHellowWorld(){
 54 
 55         }
 56         public void show(){
 57             mHandler.post(new Runnable(){
 58 
 59             @Override
 60             public void run() {
 61                 Toast.makeText(MyActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG).show();
 62             }
 63         });
 64         }
 65     }
 66     // 這是他定義由 addJavascriptInterface 提供的一個Object
 67     final class DemoJavaScriptInterface {
 68         DemoJavaScriptInterface() {
 69         }
 70 
 71         /**
 72          * This is not called on the UI thread. Post a runnable to invoke
 73          * 這不是呼籲界面線程。發表一個運行調用
 74          * loadUrl on the UI thread.
 75          * loadUrl在UI線程。
 76          */
 77         public void clickOnAndroid() {        // 注意這裏的名稱。它爲clickOnAndroid(),注意，注意，嚴重注意
 78             mHandler.post(new Runnable() {
 79                 public void run() {
 80                     // 此處調用 HTML 中的javaScript 函數
 81                     mWebView.loadUrl("javascript:wave()");
 82                 }
 83             });
 84         }
 85     }
 86 // 線下的代碼能夠不看，調試用的
 87 ///////////////////////////////////////////////////////////////////////////////////////////////////
 88     /**
 89      * Provides a hook for calling "alert" from javascript. Useful for
 90      * 從javascript中提供了一個叫「提示框」 。這是頗有用的
 91      * debugging your javascript.
 92      *  調試你的javascript。
 93      */
 94     final class MyWebChromeClient extends WebChromeClient {
 95         @Override
 96         public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
 97             Log.d(LOG_TAG, message);
 98             result.confirm();
 99             return true;
100         }
101     }
102 
103 }

XML的配置很簡單，裏面就放一個webView就能夠了ide

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3               android:orientation="vertical"
 4               android:layout_width="fill_parent"
 5               android:layout_height="fill_parent"
 6         >
 7     <WebView
 8             android:layout_width="fill_parent"
 9             android:layout_height="match_parent"
10             android:id="@+id/webView"/>
11 </LinearLayout>

首先，咱們看下代碼，須要打開瀏覽器對JS的支持函數

webSettings.setJavaScriptEnabled(true);

　　沒有這句，任何JS都執行不了，也就沒有意義了。post

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "asdasd");

　　上面這句就是咱們的重點了

這是說建立了一個DemoJavaScriptInterface的對像，名字是asdasd。主意html中的18行，<a onClick="window.asdasd.clickOnAndroid()">，就是說調用了一個asdasd的clickOnAndroid方法。

而這個裏面是不能進行UI操做的，因此須要用一個handle和一個線程來調用javascript:wave()，也就是JS中的WAVE函數

1             mHandler.post(new Runnable() {
2                 public void run() {
3                     // 此處調用 HTML 中的javaScript 函數
4                     mWebView.loadUrl("javascript:wave()");
5                 }
6             });

固然也不能夠不調用JS，調用java代碼也是能夠的好比說myHellowWorld中的show函數。

固然最後一句也不可少

mWebView.loadUrl("file:///android_asset/main.html");

　　這就是讓瀏覽器去調用咱們的HTML文件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。