android使用html+javascript来制作页面
一般的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来制作页面的更多相关文章
- Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
- Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...
- Android WebView与JavaScript交互操作（Demo）
应用场景: 为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式.相关Hybrid APP(混合型应用)参看:http:// ...
- Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...
- Html JavaScript网页制作与开发完全学习手册
Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...
- javascript实现当前页面截屏
javascript实现当前页面截屏 一.前言 有客户要求能对用户当前页面进行指定区域截屏,类似qq截屏的实现效果.比如用户在处理工作的时候,将当前页面录入后的一些信息进行截图下载保存.但又不能安装任 ...
- 使用javascript实现html页面直接下载网盘文件
公司新建一网站,用的是商派的易开店系统.设计方案中有一个是下载文件的功能,但易开店不支持上传资源,所以无法下载本站资源. 于是想到了网盘资源下载,有些网站是把页面链接到网盘资源文件下载页面,进行二次跳 ...
- Android：res之shape制作圆角、虚线、渐变
xml控件配置属性 android:background="@drawable/shape" 标签 corners ----------圆角gradient ----------渐 ...
- android recovery模式及ROM制作
转自android recovery模式及ROM制作 1.总述 为了方便客户日后的固件升级,本周研究了一下android的recovery模式.网上有不少这类的资料,但都比较繁杂,没有一个系统的介绍与 ...
随机推荐
- 安卓与PC网络对接实现视频实时播放
研究安卓网络通信一段时间了, 由于最近公司催的比较紧, 硬着头皮弄出来了. 现在手机客户端终于能够连接流媒体服务器实时播放前端的视频流了. 其实通信方面主要还是命令包的解析, 以及分包组包. 比如要 ...
- 常见Oracle HINT的用法
1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量,使资源消耗最小化. 例如: SELECT /*+ALL+_ROWS*/ EMP_NO,EMP_NAM,DAT_I ...
- 二叉查找树的Java实现
为了克服对树结构编程的恐惧感,决心自己实现一遍二叉查找树,以便掌握关于树结构编程的一些技巧和方法.以下是基本思路: [1] 关于容器与封装.封装,是一种非常重要的系统设计思想:无论是面向过程的函数,还 ...
- 虚拟主机无法使用fsockopen操作处理方法
一.如何禁用fsockopen()下面是两种常用的禁用fsockopen的方法.1.修改php.ini,将 disable_functions = 后加入 fsockopen2.修改php.ini,将 ...
- mvn 配置修改
http://www.cnblogs.com/geektown/p/5705405.html D:\javaInstall\apache-maven-3.3.9-bin\apache-maven-3. ...
- 《Java并发编程实战》读书笔记
Subsections 线程安全(Thread safety)锁(lock)共享对象对象组合基础构建模块任务执行取消和关闭线程池的使用性能与可伸缩性并发程序的测试显示锁原子变量和非阻塞同步机制 一.线 ...
- chrome表单自动填充去掉input黄色背景解决方案
设置css代码如下: input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } 参考文章:http://bl ...
- python 的 from import 机制
[A.py] from B import D class C:pass [B.py] from A import C class D:pass 为什么执行A的时候不能加载D呢? 如果将A.py改为:i ...
- DataGridView单元格美化
#region 重绘Column.Row int _RowHeadWidth = 41; /// /// 重绘Column.Row ...
- PHP数据类型转换 （转）
PHP数据类型转换 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: •(int).(integer):转换成整形 •(float).(double).(real):转换成浮点型 •(s ...