如何利用html5开发android界面

如何利用html5开发android界面,第1张

使用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"/>

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的属性如下

Html代码

<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" />

在一个样式表中,指定不同的样式

Html代码

#header {

<SPAN style="WHITE-SPACE: pre"> </SPAN>background:url(medium-density-image.png)

}

@media screen and (-webkit-device-pixel-ratio: 1.5) {

// CSS for high-density screens

#header {

background:url(high-density-image.png)

}

}

@media screen and (-webkit-device-pixel-ratio: 0.75) {

// CSS for low-density screens

#header {

background:url(low-density-image.png)

}

}

Html代码

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

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不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页

在WebView中加载Web页面,使用loadUrl()

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview)

myWebView.loadUrl("http://www.example.com")

注意在manifest文件中加入访问互联网的权限:

Xml代码

<uses-permission android:name="android.permission.INTERNET" />

在Android中点击一个链接,默认是调用应用程序来启动,因此WebView需要代为处理这个动作 通过WebViewClient

Java代码

//设置WebViewClient

webView.setWebViewClient(new WebViewClient(){

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url)

return true

}

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url)

}

public void onPageStarted(WebView view, String url, Bitmap favicon) {

super.onPageStarted(view, url, favicon)

}

})

这个WebViewClient对象是可以自己扩展的,例如

Java代码

private class MyWebViewClient extends WebViewClient {

public boolean shouldOverrideUrlLoading(WebView view, String url) {

if (Uri.parse(url).getHost().equals("www.example.com")) {

return false

}

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url))

startActivity(intent)

return true

}

}

之后:

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview)

myWebView.setWebViewClient(new MyWebViewClient())

另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器,也就是需要可以回退历史记录

因此需要覆盖系统的回退键 goBack,goForward可向前向后浏览历史页面

Java代码

public boolean onKeyDown(int keyCode, KeyEvent event) {

if ((keyCode == KeyEvent.KEYCODE_BACK) &&myWebView.canGoBack() {

myWebView.goBack()

return true

}

return super.onKeyDown(keyCode, event)

}

Java代码

WebView myWebView = (WebView) findViewById(R.id.webview)

WebSettings webSettings = myWebView.getSettings()

webSettings.setJavaScriptEnabled(true)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7245062.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存