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

android早就提供了这样的借口。

WebView.addJavascriptInterface(Object obj, String interfaceName)

其中obj是我们自己用来实现功能的一个类，interfaceName是一个对象的名称，就是obj这个对象的名称。

这样说可能有点抽象，但是看一个例子就会明白。

既然是html,那肯定就要有一个HTML文件，文件名为main.html，放置在android工程的assets文件夹下，如果没有这个文件夹，可以在根目录创建一个。

 <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="width: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>

Activity文件

 package com.example.untitled;

 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;

 public class MyActivity 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();

     @Override

     public void onCreate(Bundle icicle) {

         super.onCreate(icicle);

         setContentView(R.layout.main);

         Toast.makeText(MyActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG);

         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(MyActivity.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;

         }

     }

 }

XML的配置很简单，里面就放一个webView就可以了

 <?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

               android:orientation="vertical"

               android:layout_width="fill_parent"

               android:layout_height="fill_parent"

         >

     <WebView

             android:layout_width="fill_parent"

             android:layout_height="match_parent"

             android:id="@+id/webView"/>

 </LinearLayout>

首先，我们看下代码，需要打开浏览器对JS的支持

webSettings.setJavaScriptEnabled(true);

　　没有这句，任何JS都执行不了，也就没有意义了。

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

　　上面这句就是我们的重点了

这是说创建了一个DemoJavaScriptInterface的对像，名字是asdasd。主意html中的18行，<a onClick="window.asdasd.clickOnAndroid()">，就是说调用了一个asdasd的clickOnAndroid方法。

而这个里面是不能进行UI操作的，所以需要用一个handle和一个线程来调用javascript:wave()，也就是JS中的WAVE函数

             mHandler.post(new Runnable() {

                 public void run() {

                     // 此处调用 HTML 中的javaScript 函数

                     mWebView.loadUrl("javascript:wave()");

                 }

             });

当然也不可以不调用JS，调用java代码也是可以的比如说myHellowWorld中的show函数。

当然最后一句也不可少

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

　　这就是让浏览器去调用我们的HTML文件。

android使用html+javascript来制作页面的更多相关文章

  1. Android - FragmentTabHost 与 Fragment 制作页面切换效果

    使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...

  2. Android - TabHost 与 Fragment 制作页面切换效果

    Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...

  3. Android WebView与JavaScript交互操作（Demo）

    应用场景: 为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式.相关Hybrid APP(混合型应用)参看:http:// ...

  4. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  5. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...

  6. javascript实现当前页面截屏

    javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...

  7. 使用javascript实现html页面直接下载网盘文件

    公司新建一网站,用的是商派的易开店系统.设计方案中有一个是下载文件的功能,但易开店不支持上传资源,所以无法下载本站资源. 于是想到了网盘资源下载,有些网站是把页面链接到网盘资源文件下载页面,进行二次跳 ...

  8. Android：res之shape制作圆角、虚线、渐变

    xml控件配置属性 android:background="@drawable/shape" 标签 corners ----------圆角gradient ----------渐 ...

  9. android recovery模式及ROM制作

    转自android recovery模式及ROM制作 1.总述 为了方便客户日后的固件升级,本周研究了一下android的recovery模式.网上有不少这类的资料,但都比较繁杂,没有一个系统的介绍与 ...

随机推荐

  1. Entity FrameWork对有外键关联的数据表的添加操作

    前天做了一个MVC Entity FrameWork项目,遇到有外键关联的数据编辑问题.当你编辑的时候,按照正常的逻辑,把每个字段的数据都对号入座了,然后点击保存按钮,本以为会顺理成章的编辑数据,但是 ...

  2. runoob

    今天学习bootstrap的时候偶然发现http://www.runoob.com/ 这个网站不错,比w3cschool界面要好看,内容要丰富 比较适合新手学习,而且上面的内容比较丰富,不错.

  3. Web Performance Test : IP切换/IP欺骗

    译者前言 本文翻译自<Visual Studio Performance Testing Quick Reference Guide 3.6> 有关于IP Switching的章节.< ...

  4. 基于ASP.NET MVC定时执行任务调度

    相对FluentScheduler实现定时调度任务的使用简单,配置少的特点,Quartz.Net则配置稍微复杂一些.下面我们就接合一个 ASP.NET MVC网站应用程序的定时执行任务调试的小实例来了 ...

  5. 【Session】Tomcat中Session的外置

    > 参考的优秀文章 Tomcat Session 持久化 Package org.apache.catalina.session 最近同事在做Session外置的功能,我对Session持久化. ...

  6. C# Reportviewer 固定表头

    RDLC报表固定每页都显示表头以XML方式打开rdlc文件查找到<TablixRowHierarchy> <TablixMembers> <TablixMember> ...

  7. parseInt的源码阅读

    parseInt的源码阅读 Integer.parseInt()这个方法的功能小巧又实用,实现起来困难不大,没有很复杂.这里就来看一下Java的源码是怎么写的吧,走一边大婶写过的代码,应该会有点收获吧 ...

  8. System.Security.Cryptography.CryptographicException 出现了内部错误

    调试微信支付退款时,需要使用pfx证书,在本地调试时没有问题,但在服务器部署时报异常:System.Security.Cryptography.CryptographicException 出现了内部 ...

  9. BZOJ 3229: [Sdoi2008]石子合并

    3229: [Sdoi2008]石子合并 时间限制: 3 Sec  内存限制: 128 MB提交: 497  解决: 240[提交][][] 题目描述 在一个操场上摆放着一排N堆石子.现要将石子有次序 ...

  10. js插入动态脚本

    原文章:https://www.w3cmm.com/dom/insert-javascript.html 动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该DOM动态添加的脚本.和操作HTM ...