Android WebView 应用界面开发教程_Android

WebView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC、WebAudio、WebGL。开发者可以直接在WebView中使用聚合(Polymer)和Material设计。

一.WebView浏览网页(加载线上URL)

WebView提供了很多方法执行浏览器操作,常用方法如下:

void goBack():后退
void goForward():前进。
void goBackOrForward(int step):step为正表示前进,step为负表示后退。
void loadUrl(String url):加载指定URL对应的网页。
boolean zoomIn():放大网页。
boolean zoomOut():缩小网页。

实例:迷你浏览器

该实例包含两个界面,第一个界面包括输入网址和打开网址,第二个界面包含一个WebView,用于显示第一个界面输入的URL对应的界面。程序代码如下:

第一个界面

public class MainActivity extends AppCompatActivity {
private EditText mEditUrl;
private Button mBtnOpen;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mEditUrl = (EditText) findViewById(R.id.edit_url);
mBtnOpen = (Button) findViewById(R.id.btn_open);
mBtnOpen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, WebViewActivity.class);
String url = mEditUrl.getText().toString();
intent.putExtra("url", url);
startActivity(intent);
}
});
}
}

这个界面很简单,一个输入框,一个按钮,分别用于输入网址和打开WebView。

第二个界面

public class WebViewActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view);
mWebView = (WebView) findViewById(R.id.web_view);
Intent intent = getIntent();
String url = intent.getStringExtra("url");
mWebView.loadUrl(url);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient(){
});
}
@Override
public void onBackPressed() {
if (mWebView != null && mWebView.canGoBack()){
mWebView.goBack();
}else {
super.onBackPressed();
}
}
}

这段代码调用WebView的loadUrl(String url)方法加载、显示该URL对应的网页,并设置使其支持JavaScript。如果打开WebView过程中跳转到浏览器,则通过设置WebViewClient来是其在WebView中显示。

并重写了onBackPressed()方法,当WebView不为空且WebView可以回退时,返回上一个WebView界面,而不是直接回退到上一个Activity。

由于该应用需要访问互联网,所以需要在AndroidManifest.xml中配置:

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

该实例的效果图如下:

二.WebView加载HTML代码

WebView提供了一个loadData(String data, String mimeType, String encoding)方法,该方法可用于加载并显示HTML代码,但该方法会发生乱码。

WebView还提供了一个loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)方法,该方法是loadData(String data, String mimeType, String encoding)方法的增强版,不会产生乱码。该方法的几个参数说明:

data:指定要加载的HTML代码。

mimeType:指定HTML的MIME类型,对于HTML可指定为text/html。

encoding:指定HTML代码编码所用的字符集,比如指定为GBK。

WebView加载HTML代码:

public class MainActivity extends AppCompatActivity {
private WebView mShowWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShowWebView = (WebView) findViewById(R.id.show_web_view);
StringBuilder sb = new StringBuilder();
//拼接一段HTML代码
sb.append("<html>");
sb.append("<head>");
sb.append("<title> 欢迎您 </title>");
sb.append("</head>");
sb.append("<body>");
sb.append("<h2> 欢迎您访问<a href = \"http:www.baicu.com\">" + "百度一下</a></h2>");
sb.append("</body>");
sb.append("</html");
//加载并显示HTML代码
mShowWebView.loadDataWithBaseURL(null, sb.toString(), "text/html", "utf-8", null);
}
}

该实例运行效果如下:

三.WebView中的JavaScript调用Android方法

在WebView中调用Android方法需要三步:

调用WebView关联的WebSettings的setJavaScriptEnabled(true)启用JavaScript调用功能。

调用WebView的addJavaScriptInterface(Object object, String name)方法将object对象暴露给JavaScript对象。

在JavaScript脚本中通过刚才暴露的name对象调用Android方法。

写一个在JavaScript中调用Android方法的实例,该实例界面包含一个WebView组件,用于显示HTML页面。Activity代码如下:

public class MainActivity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.web_view);
//使用file协议加载本地assets目录下的HTML页面
mWebView.loadUrl("file:///android_asset/test.html");
//获取WebView的设置对象
WebSettings webSettings = mWebView.getSettings();
//开启JavaScript调用
webSettings.setJavaScriptEnabled(true);
//将MyObject对象暴露给JavaScript对象
mWebView.addJavascriptInterface(new MyObject(this), "myObj");
}
}

在上面代码中开启了JavaScript调用Android方法的功能,并将Android应用中的MyObject对象暴露给JavaScript脚本,暴露成JavaScript脚本中名为myObj的对象。

MyObject代码如下:

public class MyObject {
private Context context;
public MyObject(Context context) {
this.context = context;
}
//该方法将会暴露给JavaScript脚本调用
@JavascriptInterface
public void showToast(String name) {
Toast.makeText(context, name + ",您好!", Toast.LENGTH_SHORT).show();
}
//该方法将会暴露给JavaScript脚本调用
@JavascriptInterface
public void showList() {
//显示一个普通的列表对话框
new AlertDialog.Builder(context)
.setTitle("图书列表")
.setIcon(R.mipmap.ic_launcher)
.setItems(new String[]{"Head First Android", "Head First Java", "Thinking in Java"}, null)
.setPositiveButton("确定", null)
.create()
.show();
}
}

MyObject中包含了两个方法,showToast()和showList()方法,且这两个方法使用了@JavascriptInterface修饰,使得这两个方法会暴露给JavaScript脚本,从而允许JavaScript脚本通过myObj来调用这两个方法。HTML页面代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Js调用Android</title>
</head>
<body>
<!-- 注意此处的myObj是Android暴露出来的对象-->
<input type="button" value="打招呼"
onclick="myObj.showToast('Android');"/>
<input type="button" value="图书列表"
onclick="myObj.showList();"/>
</body>
</html>

当用户点击页面上的两个按钮时,该页面的JavaScript脚本会通过myObj调用Android方法。

运行该实例,点击第一个按钮,效果图如下:

点击第二个按钮,效果图如下:

 

以上所述是小编给大家介绍的Android WebView 应用界面开发教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索android
, webview开发
android界面开发
android界面开发教程、android webview开发、android webview 教程、android界面开发、android锁屏界面开发,以便于您获取更多的相关知识。

时间: 2024-09-17 03:39:27

Android WebView 应用界面开发教程_Android的相关文章

Android WebView 应用界面开发教程

WebView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC.WebAudio.WebGL.开发者可以直接在WebView中使用聚合(Polymer)和Material设计. 一.WebView浏览网页(加载线上URL) WebView提供了很多方法执行浏览器操作,常用方法如下: void goBack():后退 void goForward():前进. void goBackOrForward(int step):step

Android仿Win8界面开发_Android

本文将要模仿Win8界面的一个设计,一个一个的方块.方法很简单.这里自己把图片改改就可以成为自己想要的界面了. 1.首先来看看自定义的MyImageView: package com.example.win8test; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Camera; import android.graphics.Canvas; impo

Android NDK 开发教程_Android

Android NDK 是在SDK前面又加上了"原生"二字,即Native Development Kit,因此又被Google称为"NDK". 众所周知,Android程序运行在Dalvik虚拟机中,NDK允许用户使用类似C / C++之类的原生代码语言执行部分程序. NDK包括了: 从C / C++生成原生代码库所需要的工具和build files. 将一致的原生库嵌入可以在Android设备上部署的应用程序包文件(application packages fi

Android UI设计与开发教程 引导界面(五)实现应用程序只启动一次引导界面

这篇文章算是对整个引导界面开发专题的一个终结了吧,个人觉得大部分的引导界面基本上都是千篇一律 的,只要熟练掌握了一个,基本上也就没什么好说的了,要是在今后的开发中遇到了更好玩,更有趣的引导界 面,博主也会在这里及时的跟大家分享,今天的内容主要是教大家的应用程序只有在第一次启动的时候显示引 导界面,以后在启动程序的时候就不再显示了. 其实要想实现这样的效果,只要使用 SharedPreferences类,就会让程序变的非常简单,下面来详细介绍一下这个类的使用方法 一. SharedPreferen

Android UI设计与开发教程 引导界面(四)仿人人网V5.9.2最新版引导界面

这一篇我将会以人人网的引导界面为实例来展开详细的讲解,人人网的引导界面比较的新颖,不同于其他 应用程序千篇一律的靠滑动来引导用户,而是以一个一个比较生动形象的动画效果展示在用户们的面前,有一 种给人眼前一亮的感觉,话不多说,进入正题. 一.实现的效果图 欢迎界面: 开发教程 引导界面(四)仿人人网V5.9.2最新版引导界面-变色龙引导最新版"> 引 导界面1

Android LibGDX游戏引擎开发教程(七) 中文字体的显示和绘制(上)

在字体的显示和绘制中,Libgdx的作者(Mario Zechner,美国人)给我们提供了一个非常好用的工具 --Hiero,那么下面就来看看它具体的使用方法. 一.Hiero工具的使用 1.Hiero工 具的下载地址 开发教程(七) 中文字体的显示和绘制(上)-android 绘制字体"> 2.下载结束后,双击hiero.jar文件打开,我们可以看到Hiero的一些基本功能,相比来说作者做的 还是比较简单易懂的.从界面上知道,它包括很多选项,可以制作特效.改变背景颜色.设置内间距等等,右

Android miniTwitter登录界面开发实例

本文要演示的Android开发实例是如何完成一个Android中的miniTwitter登录界面,下面将分步骤讲解怎样实现图中的界面效果,让大家都能轻松的做出美观的登录界面. 先贴上最终要完成的效果图: miniTwitter登录界面的布局分析 首先由界面图分析布局,基本可以分为三个部分,下面分别讲解每个部分. 第一部分是一个带渐变色背景的LinearLayout布局,关于背景渐变色就不再贴代码了,效果如下图所示: 第二部分,红色线区域内,包括1,2,3,4 如图所示: 红色的1表示的是一个带圆

Android LibGDX游戏引擎开发教程(九) 动画类的使用

对于一款成功的游戏,动画效果也是整个游戏中不可或缺的元素之一,那下面我们就来讲解一下动画类的 使用方法. 一.Animation类 1.Animation介绍 开发教程(九) 动画类的使用-android 动画引擎"> 该类存放在 com.badlogic.gdx.graphics.g2d的包下,该类继承自Object. 2.Animation定义 这 是官方API的定义,大概的意思是说:一个动画就是存放了一个列表的图片表示在设定的时间间隔序列的显示 .比如,一个正在跑步或者正在跳动的人.

Android LibGDX游戏引擎开发教程(八) 中文字体的显示和绘制(下)

在上一篇的文章中,我们介绍了Hiero这个非常好用工具的使用,但是LIbgdx的BitmapFont不支持多图,常 用汉字3500个,你总不能用hiero自己做吧,那怎么办呢?这其实微软早就解决这个问题了,它给我们提供了 这个TTF字库,保存汉字字,方便我们使用. 一.FreeType的使用 1.打开解压好的0.9.8版的 包,找到里面的extensions文件夹 开发教程(八) 中文字体的显示和绘制(下)-android 绘制字体"> 打开后,再点击进入gdx-freetype文件夹 找