① 如何利用html5开发android界面
使用WebView加载HTML即可。
WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页,实现WebView有以下两种不同的方法:
第一种方法的步骤:
1.在要Activity中实例化WebView组件:WebView webView = new WebView(this);
2.调用WebView的loadUrl()方法,设置WevView要显示的网页:
互联网用:webView.loadUrl("http://www.google.com");
本地文件用:webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在:assets 文件中
3.调用Activity的setContentView( )方法来显示网页视图
4.用WebView点链接看了很多页以后为了让WebView支持回退功能,需要覆盖覆盖Activity类的onKeyDown()方法,如果不做任何处理,点击系统回退剪键,整个浏览器会调用finish()而结束自身,而不是回退到上一页面
5.需要在AndroidManifest.xml文件中添加权限,否则会出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET" />
第二种方法的步骤:
1、在布局文件中声明WebView
2、在Activity中实例化WebView
3、调用WebView的loadUrl( )方法,设置WevView要显示的网页
4、为了让WebView能够响应超链接功能,调用setWebViewClient( )方法,设置 WebView视图
5、用WebView点链接看了很多页以后为了让WebView支持回退功能,需要覆盖覆盖Activity类的onKeyDown()方法,如果不做任何处理,点击系统回退剪键,整个浏览器会调用finish()而结束自身,而不是回退到上一页面
6、需要在AndroidManifest.xml文件中添加权限,否则出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET"/>
② html5app开发框架有哪些(用html5开发的app实例)
①:PhoneGap
PhoneGap恐怕是最老的一个框架了,相信很多人都已经听说过甚至使用过它,但是PhoneGap是基于开源的cordova商业版本。
②:Ionic
IONIC是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScriptMVVM框架和AngularJS来增强应用。提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。
③:MobileAngularUI
MobileAngularUI是使用bootstrap3和AngularJS的响历猜余应式移动开发HTML5框架。
MobileAngularUI的关键字有:
Bootstrap3
AngularJS
Bootstrap3Mobile组件,比如switches,overlays和sidebars,这些都是bootstrap中没有的。
AngularJSmoles,比如angular-route,angular-touch和angular-animate
响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西。MobileAngularUIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。
④:IntelXDK
IntelXDK是Inter开发兆或的一款跨平台开发工具,我们可以很容易的通过IntelXDK开发应用,你需要做的只是下载他们的应用开发工具,有Linux、Windows和Mac版,它还提供了很多个开发框架,比如Twitterbootstrap,jQueryMobile和Topcoat.
⑤:Titanium
’sTitanium不同于其它框架的是,它是一个开源的框架。
Titanium是混合式移动应用开发的一站式解决方案,你只需要下载Titaniumstudio就可以解决所有的事情,TitaniumSDK包含了很多手机平台的APIs和后端云服务。
Titanium使用Alloy,Alloy是一个快速开发的手机应用MVC框架,模块式开发可以大大减小开发时间,提高代码复用。
⑥:SenchaTouch
SenchaTouch同样也是HTML5手机应用跨平台开发框架,运行iOS/Android/Blackberry。它已经诞生很多年了,现在已经成为很常用的混合式编程开发框架。
SenchaTouch可以让你的WebApp看起来像NativeApp。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的WEB标准,全面兼容Android和AppleiOS设备。
⑦:KendoUI
Telerik’sKendoUI是一个强大的框架用于快速HTML5UI开发。基于最新的HTML5、CSS3和JavaScript标准。
KendoUI包含了开发现代JavaScript开发所需要的所有一切,包括:肢滚强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。
③ 如何利用html5开发android界面
H5开发安卓界面需要注意以下三点:
(上)包括Android设备多分辨率的问题,Android中构建HTML5应用程序基础
(中)包括Android与JS之间的互动,Android处理JS的警告对话框等,Android中的调试
(下)包括本地储存在Android中的应用,地理位置的应用,离线应用的构建
进入正题
● Android设备多分辨率的问题
Android浏览器默认预览模式浏览 会缩小页面 WebView中则会以原始大小显示
Android浏览器和WebView默认为mdpi。hdpi相当于mdpi的1.5倍 ldpi相当于0.75倍
三种解决方式:1 viewport属性 2 CSS控制 3 JS控制
1 viewport属性放在HTML的<meta>中
html代码:
<span style="font-size: x-small;"> <head>
<title>Exmaple</title>
<meta name=”viewport” content=”width=device-width,user-scalable=no”/>
</head></span>
meta中viewport的属性如下:
<span style="font-size: x-small;"> <meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/>
</span>
2 CSS控制设备密度
为每种密度创建独立的样式表(注意其中的webkit-device-pixel-ratio 3个数值对应3种分辨率)
html代码:
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
3 JS控制
Android浏览器和WebView支持查询当前设别密度的DOM特性
window.devicePixelRatio 同样值有3个(0.75,1,1.5对应3种分辨率)
JS中查询设备密度的方法
js代码:
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
Android中构建HTML5应用
使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签
WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页。
④ 如何让android 手机支持 html5 video 标签 播放
Android 是可以通过html5的video来播放视频的。
一、需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做
具体如下:
1如果要声明整个应用都要加速:< application ... android:hardwareAccelerated ="true">
2.如果要在Activity中声明,则:
<activity ... android:hardwareAccelerated="true" >
Window, getWindow.setFlags( WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);