Android中用html代码来实现界面 WebView控件

原创 2015年11月17日 22:19:31

Android提供了WebView控件专门来加载html代码实现的界面。这个控件在某些方面用起来比较方便。比如说商家活动主题界面,这种界面会随活动的变化而不断的变化,若是用Android源生xml布局,当活动界面改变时,用户必须更新APP才能更新对应活动界面,而WebView加载的html界面则不需要用户更新APP就可以达到更换界面的目的。只需要改变HTML内部实现就可以了。此处只是写了个demo提示有这种方法实现。需要三步:

一:加载html界面。用WebView实列调用loadUrl()方法,方法参数为web地址,这里采用的tomcat服务器中的一个地址。

<span style="white-space:pre">		</span>/*第一步加HTML文件加载到WebView   */
		String url = "http://192.168.1.112:8080/HQ/hunqing.html"; 
		mWebView = (WebView) findViewById(R.id.webview);
		mWebView.loadUrl(url);

二、定义交互接口名和交互方法。这里的交互接口名和交互方法都将在html对应的行为方法中引用到。格式是window.交互接口名.交互方法名。具体应用看下面的html文件。

<span style="white-space:pre">	</span>/*第二步构造交互接口名JavaScript_interface和交互方法show()等
	 * 交互接口名和方法名都将在html中JavaScript中用到
	 * 列如window.JavaScript_interface.show();*/
	class WebViewJavaScript{
		public static final String JAVASCRIPT_NAME = "JavaScript_interface"; //交互接口名
		public void show(){  //交互方法
			Mylog.v("=========================");
			Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();
		}
		
		public void startActivity(){
			Intent intent = new Intent(WebViewActivity.this,NotificationActivity.class);
			WebViewActivity.this.startActivity(intent);
		}
		
		public void showImg(){
			Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();
		}
		
	}
三、加载的行为(javascript语言)

<span style="white-space:pre">		</span>/*加载行为*/
		WebSettings settings = mWebView.getSettings();
		settings.setJavaScriptEnabled(true);
		mWebView.addJavascriptInterface(new WebViewJavaScript(), WebViewJavaScript.JAVASCRIPT_NAME);

这里的WebView就设置完了。

下面看html里面需要写什么,在html中的<script>标签中就引用了对应的交互接口名和方法。

<span style="white-space:pre">		</span><script>
			function labaChlick(){
				window.JavaScript_interface.show();  <!-- 引用交互接口方法-->
			}
			function p1Click(){
				//alert("你好,我是弹出对话框");
				window.JavaScript_interface.startActivity();  //这行代码关联Android源生代码
			}
			function imgClick(){
				//alert("你好,我是弹出对话框");
				
			}
			function img2Click(){
				window.JavaScript_interface.showImg();
			}
		</script>

function 方法名()这是对应html文件中定义的点击行为onclick=" 方法名";

<span style="white-space:pre">			</span><div class="imgtop">
				<img class="imgtop_bg" src="./img/index_top_bg.png"/>
				<img class="imgtop_lb" src=".\img\index_microphone.png" onclick="labaChlick()"/>
				<h3 class="p3">
					<p class="sp1">离我们结婚</p>
					<p class="sp2">还有<span class="sp3">35</span>天</p>
				</h3>
			</div>
		
			<div class="imgshow">
				<img src=".\img\index_yaoqinghan.png" onclick="p1Click()"/>
				<img src=".\img\index_zhufuqiang.png" onclick="imgClick()"/>
				<img src=".\img\index_yaoyiyao.png" onclick="img2Click()"/>
				<img src=".\img\index_hunsha.png"/>
			</div>

所有实现就完成了。

Activity 代码:这里注意若是点击事件没反应,请在接口方法名前加上@JavascriptInterface

import mylog.Mylog;
import notification.NotificationActivity;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

import com.example.call.R;

 @SuppressLint("JavascriptInterface") public class WebViewActivity extends Activity {
	private WebView mWebView;
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.webview_activity_layout);
		
		/*第一步加HTML文件加载到WebView   */
		String url = "http://192.168.1.112:8080/HQ/hunqing.html"; 
		mWebView = (WebView) findViewById(R.id.webview);
		mWebView.loadUrl(url);
		
		/*加载行为*/
		WebSettings settings = mWebView.getSettings();
		settings.setJavaScriptEnabled(true);
		mWebView.addJavascriptInterface(new WebViewJavaScript(), WebViewJavaScript.JAVASCRIPT_NAME);
	}
	
	/*第二步构造交互接口名JavaScript_interface和交互方法show()等
	 * 交互接口名和方法名都将在html中JavaScript中用到
	 * 列如window.JavaScript_interface.show();*/
	class WebViewJavaScript{
		public static final String JAVASCRIPT_NAME = "JavaScript_interface"; //交互接口名
		public void show(){  //交互方法
			Mylog.v("=========================");
			Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();
		}
		
		public void startActivity(){
			Intent intent = new Intent(WebViewActivity.this,NotificationActivity.class);
			WebViewActivity.this.startActivity(intent);
		}
		
		public void showImg(){
			Toast.makeText(WebViewActivity.this, "我是JavaScript接口方法", Toast.LENGTH_SHORT).show();
		}
		
	}
	
	@Override
	/*可能存在数据缓存问题,当第一次加载了html页面以后,Android系统会自动在data->data目录下新建数据库来保存加载的网络页面。有可能导致我们修改了网络html界面后
	 * 再次通过Android系统进入网络界面时加载的是数据库保存的界面,所以当结束这个activity时可以将对应数据删除。就不会存在缓存问题了。
	 * */
	protected void onDestroy() {
		super.onDestroy();
		//遍历对应文件删除对应文件
	}
}


xml布局:里面就放了一个WebView控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <WebView 
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>

html文件:

<html>
	<head>
		<title>结婚</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<link rel="stylesheet" type="text/css" href="hunqing.css">
		<script>
			function labaChlick(){
				window.JavaScript_interface.show();  <!-- 引用交互接口方法-->
			}
			function p1Click(){
				//alert("你好,我是弹出对话框");
				window.JavaScript_interface.startActivity();  //这行代码关联Android源生代码
			}
			function imgClick(){
				//alert("你好,我是弹出对话框");
				
			}
			function img2Click(){
				window.JavaScript_interface.showImg();
			}
		</script>
	</head>
	<body bgcolor="#680011">
		<div class="mainimg" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;">
			<div class="imgtop">
				<img class="imgtop_bg" src="./img/index_top_bg.png"/>
				<img class="imgtop_lb" src=".\img\index_microphone.png" onclick="labaChlick()"/>
				<h3 class="p3">
					<p class="sp1">离我们结婚</p>
					<p class="sp2">还有<span class="sp3">35</span>天</p>
				</h3>
			</div>
		
			<div class="imgshow">
				<img src=".\img\index_yaoqinghan.png" onclick="p1Click()"/>
				<img src=".\img\index_zhufuqiang.png" onclick="imgClick()"/>
				<img src=".\img\index_yaoyiyao.png" onclick="img2Click()"/>
				<img src=".\img\index_hunsha.png"/>
			</div>
			
			<div class="info">
				<a href="###">婚礼承办方:成都幸福公社婚庆公司<img src=".\img\redRightarrow.png"/></a>
			</div>
		</div>
		
	</body>


</html>


css代码:

.imgTop {
	width: 320px;
	margin-left: -10px;
	margin-right: -10px;
	min-height: 200px;
	position:relative;
	border-bottom:1px solid #ffeeac;
}

.imgtop .imgtop_lb{
	margin-top: 10px;
	margin-left: 10px;
	position: absolute;left: 10px; top:10px;
}

.p3{
	width: 118px;
	height: 22px;
	padding: 30px;
	position: absolute;
	right: 10px;
	bottom : 0px; 
}

.sp1 {
	font-size: 10px;
	color: #ffeeac;
}

.sp2 {
	font-size: 10px;
	color: #ffeeac;
	text-align: right;
}

.sp3 {
	font-size: 20px;
}

.imgShow {
	width: 320px;
	height: 210px;
	overflow: hidden;
	margin-left: -10px;
	margin-top: 14px;
}

.imgShow img {
	width: 145px;
	height: 110px;
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-bottom: 10px;
}

.info{
	margin-top: 14px;
	text-align: center;
}

.info a{
	color: #92192d;
	font-size: 14px;
}

.info img{
	width: 20px;
	display: inline-block;
	position: relative;
	top: 2px;
	margin-left: 8px;
}

效果图:浏览器中打开html文件是这样子的:



在模拟器中打开是这样的:



当活动更新时,只需要更改html中的I显示内容即可。

五、这里还有个问题就是页面缓存问题,当第一次加载了html页面以后,Android系统会自动在data->data目录下新建数据库来保存加载的网络页面。有可能导致我们修改了网络html界面后。再次通过Android系统进入网络界面时加载的是数据库保存的界面,所以当结束这个activity时可以将对应数据删除。就不会存在缓存问题了。

<span style="white-space:pre">	</span>@Override
	/*可能存在数据缓存问题,当第一次加载了html页面以后,Android系统会自动在data->data目录下新建数据库来保存加载的网络页面。有可<span style="white-space:pre">	</span>能导致我们修改了网络html界面后
	 * 再次通过Android系统进入网络界面时加载的是数据库保存的界面,所以当结束这个activity时可以将对应数据删除。就不会存在缓存问题<span style="white-space:pre">	</span>了。
	 * */
	protected void onDestroy() {
		super.onDestroy();
		//遍历对应文件删除对应文件
	}

补充:若界面上有URL链接地址,在Android系统中会去启动Android系统中的浏览器去来浏览链接地址,当然也可以设置在webView中内部跳转。

在html中加了一个<a>标签的百度链接地址如下:

<a href="https://www.baidu.com/ ">婚礼承办方:成都幸福公社婚庆公司<img src=".\img\redRightarrow.png"/></a>
在不设置WebView内部跳转时会启动浏览器去浏览链接地址:如图:

可以明显看出来是启动了Android系统的浏览器去浏览地址,设置WebView下面的代码就可以让链接地址在WebView内部跳转。代码如下:

<span style="white-space:pre">		</span>/*在加载URL地址时回去启动浏览器,要使加载的URL地址在WebView内部跳转*/
		mWebView.setWebViewClient(new WebViewClient(){
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				view.loadUrl(url);
				return true;
			}
		});

运行效果如图:



可以看出加载URL地址时没有跳转到浏览器,而是直接在WebView内部完成的跳转。

这里有个疑问了,跳转后点击返回键时直接返回到了菜单界面而不是html界面(这里指的是婚庆界面),要实现返回到html界面,需要重写back键。实现这个功能可以参考下面这个地址的博客:

    http://blog.csdn.net/t12x3456/article/details/39134961


相关文章推荐

解决Android开发中加载html页面乱码的问题

Android开发中加载html页面乱码的问题

使用html写一个android关于界面,事情原来可以如此简单

当软件开发进入尾声,我们都会给软件配上个关于帮助界面 ,关于界面一般都会包含软件名称、软件版本、官方群号、官方公众号、感谢等等的一系列内容,这些内容往往都是一个陈列展示的内容,我们不得不使用一大堆Te...
  • tyyj90
  • tyyj90
  • 2015年11月07日 12:15
  • 3794

兼容Android的html5移动端视频播放video自动播放/隐藏播放控件

关于微信上安卓手机播放视频的一些问题的思路

html5 Video控件视频播放,电脑和手机上都能兼容。(mp4格式 电脑和android、ios都能播放)

playVideo({             //所有参数,elemt和src为必填其他看需求怎么要求             //elemt为播放控件要插入的容器,src为视频文件地址,pre...

Android中显示html标签或者带图片

Android中显示html文件要用Html.fromHtml(...)处理过的返回值,返回值可以成为setText()的参数。 只显示带文本的html可以用下面的方法处理html文件。 publ...
  • Yelbosh
  • Yelbosh
  • 2012年07月17日 16:47
  • 25430

webview显示html代码(可用于新闻浏览界面)

近期在制作校园app的新闻界面,自然也要设计到新闻浏览的一个问题,还是先展示一下效果: 使用WebView来做新闻的显示特别简单,只需要从该网站获取到新闻的html代码用St...

Android中显示html标签解决方案

一、Android中显示html标签或者带图片 1.Uri uri = Uri.parse("http://www.baidu.com"); //要链接的地址 In...

html中的table在android端显示

开始都是用Html.fromHtml(source);来显示html的 但是你会发现,对于style,table等等一系列的标签它都没有解析的 只好换一个思路,用webview去做 在xml中加入 ...

Android加载html代码和文件

我们都知道在Android上可以通过WebView加载网页,但是能否加载html的源码呢?答案是肯定的。一般条件下,我们可以在WebView和TextView上加载html的代码。 在WebView...

Android Html解析

在前一篇 Android SpannableString浅析中我们采用html实现了文本处理的效果。当时设置部分的代码如下:private void setText() { String ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android中用html代码来实现界面 WebView控件
举报原因:
原因补充:

(最多只允许输入30个字)