基于html的android开发.ppt

Android应用开发新路线,利用HTML5开发Android应用程序！,Android与HTML5融合,Android的HTML5应用程序概述如何适配多分辨率的Android设备？如何在Android中构建HTML5应用程序？如何在Android中调试HTML5应用程序？如何在Android中使用HTML5的本地储存？如何在Android中使用HTML5的本地数据库？如何在Android中使用HTML5的地理定位？如何在Android中构建HTML5离线应用？如何使用Canvas进行绘图？,AndroidHTML5应用概述,viewport,适配多分辨率的Android设备,Android浏览器加载WEB页面时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。而当页面在WebView中显示时，会采用”完全载入“的方式，即保证WEB页面的原始大小。,设备屏幕的密度是基于屏幕的分辨率（由每英寸所包含的点数（dpi）定义的。Android支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多。默认情况下，Android浏览器和WebView是针对中等密度的屏幕。Android浏览器和WebView在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）。,viewport属性的应用,viewport需要放置在HTML的标签中，在标签的content属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开。,Exmaple,CSS控制设备密度,Android浏览和WebView支持CSS媒体性能（webkit-device-pixel-ratio），允许指定屏幕密度创建一些样式CSS媒体性能。该值应该是“0.75”，“1”或“1.5”，它们分别表示对于低、中、高密度屏幕的设备。,下面为每种密度创建独立的样式：,在一个样式表中，指定不同样式：,#headerbackground:url(medium-density-image.png);mediascreenand(-webkit-device-pixel-ratio:1.5)/CSSforhigh-densityscreens#headerbackground:url(high-density-image.png);mediascreenand(-webkit-device-pixel-ratio:0.75)/CSSforlow-densityscreens#headerbackground:url(low-density-image.png);,JavaScript控制设备密度,Android浏览器和WebView支持查询当前设备密度的DOM特性（window.devicePixelRatio），该值指定用于当前设备按比例缩放的系数。例如，值为“1.0”，则说明设备是中等密度，并且默认页面不进行缩放；如果该值是“1.5”，那么，设备是高密度设备，并且默认页面调整1.5x（倍）；如果该值是“0.75”，那么，设备是低密度设备，并且默认页面调整0.75x（倍）。,如何使用JavaScript查询设备密度：,if(window.devicePixelRatio=1.5)alert(Thisisahigh-densityscreen);elseif(window.devicePixelRation=0.75)alert(Thisisalow-densityscreen);,在Android中构建HTML5应用程序,AndroidWebView应用,WebView类是AndroidView类的扩展，它允许Web页面作为Activity布局的一部分显示。它不包括完整Web浏览器的任何功能，如导航控制或地址栏。默认情况下WebView所能做的就是显示一个网页。,添加WebView到应用程序中:,要在WebView中加载Web页面，使用loadUrl(),WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.loadUrl();,.,处理页面导航,在WebView中，当用户从Web页面里点击一个链接，在Android中，默认行为是启动一个应用程序来处理URL。通常，默认Web浏览器打开并加载这个目的URL。但是，您可以为您的WebView忽略此默认行为，由WebView打开所有链接。然后，通过WebView，您可以运行用户向前、向后浏览他们的Web页面的历史。,privateclassMyWebViewClientextendsWebViewClientpublicbooleanshouldOverrideUrlLoading(WebViewview,Stringurl)if(Uri.parse(url).getHost().equals()returnfalse;Intentintent=newIntent(Intent.ACTION_VIEW,Uri.parse(url);startActivity(intent);returntrue;,WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.setWebViewClient(newMyWebViewClient();,浏览网页历史记录,当WebView重写URL加载后，它会自动累计访问过Web页面的历史。你可以用goBack()和goForward()向前和向后浏览历史页面。,publicbooleanonKeyDown(intkeyCode,KeyEventevent)if(keyCode=KeyEvent.KEYCODE_BACK),Android与JavaScript交互,如果您计划使用JavaScript将Web页面加载到WebView中，您就必须为您的WebView启用JavaScript。一旦启用JavaScript，您就可以在您的应用程序与您的JavaScript代码之间建立接口。默认情况下，在WebView中，JavaScript是禁用的。您可以通过将WebSettings附加到您的WebView中来启用JavaScript。你可以用getSettings()检索WebSettings，然后用setJavaScriptEnabled()启动JavaScript。,WebViewmyWebView=(WebView)findViewById(R.id.webview);WebSettingswebSettings=myWebView.getSettings();webSettings.setJavaScriptEnabled(true);,Android与JS通信实例演示:在Android中处理JS的警告、对话框等；在JS中调用Android接口；在Android调用JS函数。,Android中调试HTML5应用,如果您正在开发一个Android的Web应用程序，您可以使用控制台（console）JavaScriptAPI调试您的JavaScript，调试消息输出到Logcat。,在Android浏览器中用控制台API：,Js代码：console.log(HelloWorld);Log信息：Console:HelloWorld,Android的WebKit没有实现在其他桌面浏览器中实现的所有控制台API。但您可以使用基本的文本记录功能：,console.log(String)console.info(String)console.warn(String)console.error(String),在WebView中用控制台API,在调试您的WebView的Web页面时，是支持控制台API。在Android1.6和更低版本下，控制台信息自动发送到Logcat，并加以“WebCore”标签。如果您是针对Android2.1（APILevel7）或更高版本，那么你必须提供一个WebChromeClient实现onConsoleMessage()回调方法，为了使控制台的信息显示到Logcat中。,WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.setWebChromeClient(newWebChromeClient()publicvoidonConsoleMessage(Stringmessage,intlineNumber,StringsourceID)Log.d(MyApplication,message+-Fromline+lineNumber+of+sourceID););,WebViewmyWebView=(WebView)findViewById(R.id.webview);myWebView.setWebChromeClient(newWebChromeClient()publicbooleanonConsoleMessage(ConsoleMessagecm)Log.d(MyApplication,cm.message()+-Fromline+cm.lineNumber()+of+cm.sourceId();returntrue;);,ConsoleMessage还包括一个MessageLevel表示控制台传递信息类型。您可以用messageLevel()查询信息级别，以确定信息的严重程度，然后使用适当的Log方法或采取其他适当的措施。,HTML5本地储存在Android中的应用,HTML5提供了两种在客户端存储数据的新方法：localStorage-没有时间限制的数据存储sessionStorage-针对一个session的数据存储,localStorage.lastname=Smith;document.write(localStorage.lastname);,sessionStorage.lastname=Smith;document.write(sessionStorage.lastname);,WebStorageAPI：,/清空storagelocalStorage.clear();/设置一个键值localStorage.setItem(“yarin”,“yangfegnsheng”);/获取一个键值localStorage.getItem(“yarin”);/获取指定下标的键的名称（如同Array）localStorage.key(0);/return“fresh”/删除一个键值localStorage.removeItem(“yarin”);,setDomStorageEnabled（true）,HTML5本地数据库在Android中的应用,HTML5的本地数据库使用的是SQLite这款轻型数据库。我们可以使用SQL语句进行复杂的本地数据存储。,/启用数据库webSettings.setDatabaseEnabled(true);Stringdir=this.getApplicationContext().getDir(database,Context.MODE_PRIVATE).getPath();/设置数据库路径webSettings.setDatabasePath(dir);/扩充数据库的容量publicvoidonExceededDatabaseQuota(Stringurl,StringdatabaseIdentifier,longcurrentQuota,longestimatedSize,longtotalUsedQuota,WebStorage.QuotaUpdaterquotaUpdater)quotaUpdater.updateQuota(estimatedSize*2);,SQLite数据库使用演示：,HTML5地理定位在Android中的应用,HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。,地理定位演示：,/启用地理定位webSettings.setGeolocationEnabled(true);/设置定位的数据库路径webSettings.setGeolocationDatabasePath(dir);/配置权限publicvoidonGeolocationPermissionsShowPrompt(Stringorigin,GeolocationPermissions.Callbackcallback)callback.invoke(origin,true,false);super.onGeolocationPermissionsShowPrompt(origin,callback);,HTML5地理定位API,W3C中新添加了一个名为Geolocation的API规范，GeoloactionAPI的作用就是通过浏览器获取用户的地理位置。我们可以使用navigator.geolocation来简单的获取用户的地理位置信息。,常用的navigator.geolocation对象有以下三种方法：/获取当前地理位置navigator.geolocation.getCurrentPosition(success_callback_function,error_callback_function,position_options)/持续获取地理位置navigator.geolocation.watchPosition(success_callback_function,error_callback_function,position_options)/清除持续获取地理位置事件navigator.geolocation.clearWatch(watch_position_id)其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项,HTML5地理定位API,position对象所包含的数据：,Error代码：TIMEOUT:表示获取信息超时。PERMISSION_DENIED：表示用户选择了拒绝了位置服务。POSITION_UNAVAILABLE：表示位置不可知。,Position选项：,构建HTML5离线应用,为了能够让用户在离线状态下继续访问Web应用，开发者需要提供一个cachemanifest文件。这个文件中列出了所有需要在离线状态下使用的资源，浏览器会把这些资源缓存到本地。,cachemanifest文件例子：,CACHEMANIFEST#这是注释images/sound-icon.pngimages/background.pngNETWORK:test.cgiCACHE:style/default.cssFALLBACK:/files/projects/projects,HTML5离线应用的更新缓存机制,应用程序可以等待浏览器自动更新缓存，也可以使用Javascript接口手动触发更新。自动更新浏览器除了在第一次访问Web应用时缓存资源外，只会在cachemanifest文件本身发生变化时更新缓存。而cachemanifest中的资源文件发生变化并不会触发更新。手动更新开发者也可以使用window.applicationCache的接口更新缓存。方法是检测window.applicationCache.status的值，如果是UPDATEREADY，那么可以调用window.applicationCache.update()更新缓存。,if(window.applicationCache.status=window.applicationCache.UPDATEREADY)window.applicationCache.update();,在线状态检测HTML5提供了两种检测是否在线的方式：navigator.online和online/offline事件。navigator.onLinenavigator.onLine属性表示当前是否在线。如果为true,表示在线；如果为false,表示离线。当网络状态发生变化时，navigator.onLine的值也随之变化。开发者可以通过读取它的值获取网络状态。online/offline事件当开发离线应用时，通过navigator.onLine获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此HTML5还提供了online/offline事件。当在线/离线状态切换时，online/offline事件将触发在body元素上，并且沿着document.body、document和window的顺序冒泡。因此，开发者可以通过监听它们的online/offline事件来获悉网络状态。,在Android中构建HTML5离线应用,/开启应用程序缓存webSettingssetAppCacheEnabled(true);Stringdir=this.getApplicationContext().getDir(cache,Context.MODE_PRIVATE).getPath();/设置应用缓存的路径webSettings.setAppCachePath(dir);/设置缓存的模式webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);/设置应用缓存的最大尺寸webSettings.setAppCacheMaxSize(1024*1024*8);/扩充缓存的容量publicvoidonReachedMaxAppCacheSize(longspaceNeeded,longtotalUsedQuota,WebStorage.QuotaUpdaterquotaUpdater)quotaUpdater.updateQuota(spaceNeeded*2);,使用Canvas绘制图形图像,什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。,创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度：,通过JavaScript来绘制canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：/通过id获取canvas元素varc=document.getElementById(myCanvas);/创建context对象varcxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);,