内容正文:
第14章 Android 和 HTML5 的混合开发
Android Studio 移动应用开发基础(第 2 版)
目录
14.1 Android 和 HTML5 的混合开发基础
14.2 使用 WebView 组件显示本地页面
14.3 Android 与 HTML5 页面之间的信息交互
14.4 同步练习
14.1 Android 和 HTML5 的混合开发基础
这些年来,基于 HTML5 的应用程序开发越来越受青睐。在 Android 平台上,除了可以使用原生 Android 进行应用程序开发(Android 原生开发),还可以将 Android 和 HTML5 相结合,进行混合式应用程序开发(Android 和 HTML5 的混合开发)。与 Android 原生开发相比,Android 和 HTML5 混合开发的优点在于,对 Android 应用程序做较小的修改,即可使其既可以运行于 Android 平台上,又可以运行于普通的浏览器上。
Android 平台上,有一个用于显示网页页面的基本组件 WebView。使用 WebView 组件,应用程序既可以显示网络 HTML 页面,又可以显示内置在 Android App 中的 HTML 页面。下面举例说明 WebView 组件的使用方法。
新建一个名为 Ch1401 的 Android 应用程序工程,修改布局文件activity_main.xml 中的代码:
修改 MainActivity.java 文件:
需要在 AndroidManifest.xml 文件中为网络访问授权。修改后的 AndroidManifest.xml 文件:
14.2 使用 WebView 组件显示本地页面
使用 WebView 组件不仅可以显示网络 HTML 页面,还可以显示本地 HTML 页面,即内置在 Android App 中的页面。为了能够显示内置在 Android App 中的 HTML 页面,Android 要求所有的 HTML 页面必须存储于工程的 src/main/assets 目录下。在默认情况下,src/main/assets目录是不存在的。因此,需要自行创建 assets 目录。
first.html 文件:
修改 MainActivity.java 文件:
14.3 Android 与 HTML5 页面之间的信息交互
在 Android 和 HTML5 的混合开发中,不可避免地要求 Android 的原生 Java 代码与 HTML页面进行信息交互;
这种信息交互包括两方面:其一,从 Android 的原生 Java 代码向 HTML页面传送信息,如将 Java 处理的信息显示在 HTML 页面上;其二,从 HTML 页面向 Android的原生 Java 代码传送数据,这些数据需要在 Android 的原生 Java 代码中进行进一步的处理。
下面举例说明如何在 Android 的原生 Java 代码与 HTML 页面之间进行信息交互。
在该案例应用程序中,首先启动一个 Activity,该 Activity 中包含一个输入框和一个按钮,用户在输入框中输入信息后,点击按钮,即可启动一个新的 Activity,这个新的 Activity 通过WebView 组件打开一个 HTML 页面,在该 HTML 页面中显示一张图片和从 Android 原生 Java代码传递来的信息,点击 HTML 页面中的信息,可以再启动一个新的 Activity,在这个新的Activity 中显示 HTML 页面中的内容。
新建一个名为 Ch1402 的应用程序工程,按照 14.2 节中的步骤创建assets 目录:
修改布局文件 activity_main.xml :
修改 MainActivity.java 文件:
新建一个名为 HTMLActivity的 Java 类文件:
布局文件 activiry_html.xml:
新建名为 HTMLSupport 的 Java 类文件。使用@JavascriptInterface 标注可以被 JavaScript 代码访问的 Android 原生方法,用于在Android 的原生 Java 代码与 HTML 页面之间进行信息交互。:
display.html文件中的代码:
新建一个名为 ThirdActivity 的 Java 类文件:
布局文件 activity_third.xml:
14.4 同步练习
修改 14.3 中的案例应用程序,修改 display.html 文件中的代码,使其在 HTML 页面中显示从 Android 原生 Java 代码传递过来的信息,并且显示一个输入框和一个按钮,用户在输入框中输入信息后,点击按钮,即可启